一、构造节点数组
方式一:直接给出数组
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>