jquery ztree树

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

猜你喜欢