zTree分层显示，分层联动示例
功能描述：一棵多层的树，将其某个层之下的子节点显示到一棵新的树中（如：前面两级在左侧的一棵树中显示，对应的2级节点的三级和四级(如果有的话) ,显示在右侧新的树中，如select的联动一样）
本文使用zTree_v3.4，如果其他版本的zTree，自行参考API修改对应的方法，zTree_v3.4下载地址：zTree_v3.4下载，zTree_v3.4示例，zTree_v3.4中文API
效果如下
源代码如下
DEMO1.html，3+层数据和2-层树数据节点分离
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>zTree树分层显示，分层联动</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core-3.4.js"></script>
<script type="text/javascript">
var nodes = [{ name: '中国', open: true,
children: [
{ name: '广西',id:'1'},
{ name: '上海', id: '2' },
{ name: '广东', id: '3' },
{ name: '澳门', id: '4' }
]
}];
//3级+子节点，用JSON存储节点，键名称为对应的ID，当然也可以直接合并到nodes对应节点自定义数据节点childNodes中，这样id配置也可以省略（查看下面的示例2）
//注意不要设置为children，要不zTree会自动生成子节点，节点图标为文件夹，而不是叶子图标，而且会出现+/-图标
//还得配置beforeExpand事件，判断如果是展开2级节点需要return false阻止展开，然后将children数据生成到另外一个树中
var childNodes = {
"1": [
{ name: '桂林', open: true, children: [{ name: '七星区' }, { name: '象山区'}] },
{ name: '南宁', children: [{ name: '青秀区' }, { name: '琅东'}] }
],
"2": [{ name: '浦东'}],
"3": [
{ name: '广州', open: true, children: [{ name: '番禺'}] },
{ name: '深圳', children: [{ name: '罗湖'}] }
]
};
var settings = { callback: { onClick: function (e, treeId, treeNode, clickFlg) {
if (treeNode.level == 1) {//点击2级树
$.fn.zTree.destroy('tree2'); //销毁之前创建的3级+树
if (childNodes[treeNode.id]) { //有子节点则创建3级+树
$.fn.zTree.init($("#tree2"), {}, childNodes[treeNode.id]);
}
}
}
}
};
$(document).ready(function () {
$.fn.zTree.init($("#tree1"), settings, nodes);
});
</script>
</HEAD>
<BODY>
<ul id="tree1" class="ztree" style="float:left"></ul>
<ul id="tree2" class="ztree" style="float:left"></ul>
</BODY>
</HTML>
示例２，数据源来源同一个变量
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>zTree树分层显示，分层联动</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core-3.4.js"></script>
<script type="text/javascript">
var nodes = [{ name: '中国', open: true,
children: [
{ name: '广西', childNodes: [{ name: '桂林', open: true, children: [{ name: '七星区' }, { name: '象山区'}] }, { name: '南宁', children: [{ name: '青秀区' }, { name: '琅东'}]}] },
{ name: '上海', childNodes: [{ name: '浦东'}] },
{ name: '广东', childNodes: [{ name: '广州', open: true, children: [{ name: '番禺'}] }, { name: '深圳', children: [{ name: '罗湖'}]}] },
{ name: '澳门' }
]
}];
var settings = { callback: { onClick: function (e, treeId, treeNode, clickFlg) {
if (treeNode.level == 1) {//点击2级树
$.fn.zTree.destroy('tree2'); //销毁之前创建的3级+树
if (treeNode.childNodes) { //有子节点则创建3级+树
$.fn.zTree.init($("#tree2"), {}, treeNode.childNodes);
}
}
}
}
};
$(document).ready(function () {
$.fn.zTree.init($("#tree1"), settings, nodes);
});
</script>
</HEAD>
<BODY>
<ul id="tree1" class="ztree" style="float:left"></ul>
<ul id="tree2" class="ztree" style="float:left"></ul>
</BODY>
</HTML>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：zTree分层显示，分层联动示例