官方演示:http://www.ztree.me/v3/demo.php#_101
这个插件很好用,它的简单JSON数据模式可以非常方便的实现多层树形菜单,只要指定自己的节点id和父节点id,他会根据自己的节点id自动排序,而且拼接简单,大大减轻了webservice输出json数据的工作量
这是简单json数据的示例:file属性就是该项的链接了
var nodes = [
{id:1, pId:0, name: "父节点1",file:"链接"},
{id:11, pId:1, name: "子节点1"},
{id:12, pId:1, name: "子节点2"}
];
zTree的功能也很齐全,该有的都有了。
示例代码:
<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.5.js"></script>
<script type="text/javascript">
var iframe;
$(document).ready(function () {
$.ajax({
url: "WebService.asmx/GetItems", //这是从webservice中读取构造好的json数据
type: "POST",
data: {
},
dataType: "text",
success: function (result) {
var zNodes = stringToJson(result);
$.fn.zTree.init($("#tree"), setting, zNodes);
iframe = $("#contentIframe");
// var zTree = $.fn.zTree.getZTreeObj("tree"); 这里是设置默认选中的项(红色点亮),给定id
// zTree.selectNode(zTree.getNodeByParam("id", 2));
},
error: function (e) { console.log(e); }
});
});
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);
if (treeNode.level == 1 || treeNode.level == 2) { //这是设定1,2层在右侧iframe里显示对应的链接
iframe.attr("src", treeNode.file);
}
return false;
} else {
iframe.attr("src", treeNode.file);
return true;
}
}
}
};
function stringToJson(stringValue) {
eval("var theJsonValue = " + stringValue);
return theJsonValue;
}
</script>