1.文件引入
<script type="text/javascript" src="/libs/zTree_v3-master/js/jquery.ztree.core.js"></script> <script type="text/javascript" src="/libs/zTree_v3-master/js/jquery.ztree.exedit.js"></script> //用于ztree编辑啊(增,删,查,改) <script type="text/javascript" src="/libs/zTree_v3-master/js/jquery.ztree.excheck.js"></script> //checkBox <link rel="stylesheet" type="text/css" href="/libs/zTree_v3-master/css/zTreeStyle/zTreeStyle.css">
2.setting属性分析
var setting = { data:{ simpleData:{ enable:true, autoCheckTrigger:true, chkStyle:"checkbox", chkboxType:{"Y":"ps","N":"ps"}, tId:"id", //修改ztree对节点id的命名 pId:"parentId" //修改ztree对父节点id的命名 } }, check: { enable: true //设置checkbox可用 } };
3.初始化
var zNodes = []; zNodes = [ { tId:1, name: "根节点1", //节点名称 open: false, isParent:true }, { name: "根节点2", open: false, tId: 2, //自定义的,可有可无 编号 children: [ { tId:3, name: "2层节点1" }, { tId:4, name: "2层节点2", /*open: true,*/ children: [{ tId:5, name:"3层节点1" }] } ] } ];
zNodes = [ {id:1,name: "根节点1", open: false, isParent:true,pId: 0}, {id: 4, name: "2层节点2",pId: 1}, {id:3, name: "2层节点1",pId: 4 }, {id:5, name:"3层节点1",pId:4}, { name: "根节点2", open: false,id: 2,pId: 0} ];
<ul id="treeDemo" class="ztree"></ul> //html代码
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
4增加节点
(1)通过增加json字符串
zNodes[1].children[1].children.push({name:"3层节点2:手动添加Json字符串"})
(2)通过ztree的addNodes方法
var newNode1 = {name:"3层节点3:我是addNodes新增的"}; var x = zTreeObj.getNodeByTId("4"); zTreeObj.addNodes(x, -1, newNode1, true);
5.模糊查询,并使查询节点变色
var zNodes1 = zTreeObj.getNodesByParamFuzzy("name", '3层', null); //以name为条件查询,结果为节点的数组 for (var i = 0; i < zNodes1.length;i++) { $("#" + zNodes1[i].tId + '_span').css('background-color', 'red'); //修改选中节点的颜色 }未打开节点并不在查询结果中,因为这些节点并没有生成html元素
$(document).on('click',".switch",function() { if ($("#select").val() != "") { setTimeout(function() { $("#sel").click(); }, 200) } })通过节点的展开按钮的点击事件,如果查询条件不为空则进行查询操作。通过setTimeout设置0.2秒的延迟是因为需要生成html元素,顺序执行的话仍然会先执行查询,后加入
html元素,并不能起到子节点查询变色的效果。这个方法并不好,期待大神能给与建议。谢谢