下载demo 之后，按照此路径打开看到实例。
实例路径
树形结构原理：
- 父节点pId是0
- 子节点的pId和父节点的id相同
js调用：
<SCRIPT type="text/javascript">
var zTree;
var demoIframe;
var setting = {
view: {
dblClickExpand: false,
showLine: true,
selectedMulti: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: ""
}
},
callback: {
beforeClick: function (treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("tree");
if (treeNode.isParent) {
zTree.expandNode(treeNode);
return false;
} else {
demoIframe.attr("src", treeNode.file + ".html");
return true;
}
}
}
};
var zNodes = [
{id: 1, pId: 0, name: "[core] 基本功能 演示", open: true},
{id: 101, pId: 1, name: "最简单的树 -- 标准 JSON 数据", file: "core/standardData"},
{id: 1001, pId: 101, name: "不显示 连接线", file: "core/noline"}
];
$(document).ready(function () {
var t = $("#tree");
t = $.fn.zTree.init(t, setting, zNodes);
});
</SCRIPT>
html：
<BODY>
<div id="tree" class="ztree"></div>
</BODY>
可以有多层下级，效果如图所示：
树形结构效果图
真是超好用的树形结构插件，想了解更多属性请 点击查看原文。
网友评论