zTree简单数据模式的应用

最新推荐文章于 2021-03-17 00:14:55 发布

有灯就可以编程

最新推荐文章于 2021-03-17 00:14:55 发布

阅读量749

点赞数

分类专栏：前端文章标签： zTree 简单数据模式

本文链接：https://blog.youkuaiyun.com/qq_27092581/article/details/95983267

版权

前端专栏收录该内容

2 篇文章

订阅专栏

一、构造节点数组

方式一：直接给出数组

var treeNodes = [
    {"id":1, "pId":0, "name":"test1"},
    {"id":11, "pId":1, "name":"test11"},
    {"id":12, "pId":1, "name":"test12"},
    {"id":111, "pId":11, "name":"test111"}
];

方式二：通过push构造数组

var zNodes =[];
//遍历获取的数据 构造数组
$.each(object.list, function(i, item) {
                    zNodes.push({
                        id:item.id,
                        pId:item.pid,
                        name:item.name,
                        NODE_VALUE:item.value
                    });
                  });

二、定义树的加载方法参数

var setting = {
    view: {
        showLine: false,
        showIcon: true,
        nameIsHTML: true,
        addDiyDom: addDiyDom
    },
    data: {
        simpleData: {
            enable: true  //简单数据模式
        }
    },
    check: {
        enable: true,
        chkStyle: "checkbox",
        chkboxType: {"Y":"ps", "N":"ps"}
    },
    callback: {
        beforeCollapse: beforeCollapse,   //折叠之前回调函数
        beforeExpand: beforeExpand,       //展开之前回调函数
        onNodeCreated: onNodeCreated,     //用于捕获节点生成 DOM 后的事件回调函数
        onExpand: zTreeOnExpand,          //节点被展开触发事件
        //MouseDown: zTreeOnMouseDown,
        onRightClick: null,//OnRightClick
        onClick: zTreeOnClick
    }
};

三、初始化zTree树

$.fn.zTree.init($("#treeDemo"), setting, zNodes);

当然以上操作还要在页面声明树的位置：

<ul id="treeDemo" class="ztree table_ztree" style="width:100%;height:700px;overflow-y:auto;margin-top: 10px;"></ul>