前言

我们在开发过程中可能会用到zTree这种树形控件，并且这种树形控件自带的图标样式可能和我们的需求不一样，那么这个时候就需要我们把控件的图标换成我们自己的图标，那么需要怎么实现那，咱们一块来看一下：

引用

无论咱们怎么实现上述效果，都需要先把控件引用进来，才可以使用

<link type="text/css" rel="stylesheet" href="ztree_v3/css/metroStyle/metroStyle.css">

<script type="text/javascript" src="ztree_v3/js/jquery.ztree.all.js"></script>

<script type="text/javascript" src="ztree_v3/js/jquery.ztree.exhide.js"></script>

HTML代码

<div id="orgTreePanle" data-options="region:'north',border:false" style=" position: absolute; background-color: white; top: 45px; overflow: auto;width: 290px;height: 90%;z-index: 1;right: 30px;">

<div id="orgTree" class="ztree"></div>

</div>

实现方法1

var setting = {

data: {

key : {name: "name"},

simpleData: {

enable: true,

idKey: "id",

pIdKey: "pid"

}

},

check: {

enable: false,

chkboxType: { "Y" : "", "N" : "p" }

}

};//这里可以参考官方文档设置自己的setting

var nodes = [

{id:”1”,,pid:”0”,name: "父节点1", iconOpen:”打开图标路径”, iconClose:”关闭图标路径”, children: [

{ id:”1-1”,pid:”1”,name: "子节点1"},

{ id:”1-2”,pid:”1”,name: "子节点2"}

]}

];

orgTree=$.fn.zTree.init($("#orgTree"), setting,result);

iconOpen：这个属性就是树打开节点显示的图标

iconClose：这个属性是树关闭节点显示的图标

实现方法2

var setting = {

data: {

key : {name: "name"},

simpleData: {

enable: true,

idKey: "id",

pIdKey: "pid"

}

},

check: {

enable: false,

chkboxType: { "Y" : "", "N" : "p" }

} ,

callback:{

onNodeCreated: zTreeOnNodeCreated

}

};//这里可以参考官方文档设置自己的setting

var nodes = [

{id:”1”,,pid:”0”,name: "父节点1", children: [

{ id:”1-1”,pid:”1”,name: "子节点1"},

{ id:”1-2”,pid:”1”,name: "子节点2"}

]}

];

orgTree=$.fn.zTree.init($("#orgTree"), setting,result);

function zTreeOnNodeCreated(event, treeId, treeNode) {

$('#'+treeNode.tId+'_ico').css("background", "url(图片路径) center center/15px 15px no-repeat");

}

zTreeOnNodeCreated就是此方法使用到的核心函数，通过该函数动态给节点增加节点

最终实现效果