插件使用效果
在需要的页面中引入css,js.
<link rel="stylesheet" type="text/css" href="zTree_v3/demo.css" />
<link rel="stylesheet" type="text/css" href="zTree_v3/zTreeStyle.css"/>
<script type="text/javascript" src="zTree_v3/jquery.ztree.core.min.js"></script>
在HTML页面中插件展示处
<div id="treeDemo" class="ztree"></div>
自定义内容
SCRIPT type="text/javascript"> var setting = { data: { simpleData: { enable: true } }, callback: { beforeClick: beforeClick, } }; var zNodes =[ { id:1, pId:0, name:"普通的父节点", open:true},//open为true表示为展开状态 { id:11, pId:1, name:"叶子节点 - 1",}, { id:12, pId:1, name:"叶子节点 - 2",}, { id:13, pId:1, name:"叶子节点 - 3",}, { id:2, pId:0, name:"NB的父节点",open:true}, { id:21, pId:2, name:"叶子节点2 - 1", click:false}, { id:22, pId:2, name:"叶子节点2 - 2", click:false}, { id:23, pId:2, name:"叶子节点2 - 3", click:false}
];
function beforeClick(treeId, treeNode, clickFlag) {//点击节点获取该节点信息
treeNode.getParentNode()//点击节点的父节点参数
treeNode//判断点击节点的所有信息
return(treeNode.click != false);
}
$(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); </SCRIPT>
给选中节点添加标记
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var node = zTree.getNodeByParam("id",1);//当前节点的id
zTree.selectNode(node);
插件下载http://pan.baidu.com/s/1eSJ7bpg