jquery ztree树

来源:互联网 发布:网络教育专升本统考 编辑:程序博客网 时间:2024/06/07 19:58

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元素,并不能起到子节点查询变色的效果。这个方法并不好,期待大神能给与建议。谢谢




原创粉丝点击