ztree点击事件加载树

来源：互联网发布：淘宝女士丝巾编辑：程序博客网时间：2024/05/01 18:22

1.导入三个文件

* zTreeStyle.css

* jQuery-1.4.2.js

* jquery-ztree.2.5.js

2.在页面上准备树的容器

3.js代码

加载树的根节点

var tree = {zTree:'',pNode:'',setting:{isSimpleData: true,treeNodeKey: "mid",treeNodeParentKey: "pid",showLine: true,root:{ isRoot:true,nodes:[]},callback:{ //回调函数/** * event:鼠标事件 * treeId：树的容器id * treeNode：当前点击的节点 */expand:function(event,treeId,treeNode){tree.pNode = treeNode;tree.loadNodeByPNode();}}},

/** * 一般情况下，如果一段代码中要用到一个变量 * 而这个变量的值是在回调函数中赋值的 * 这个时候要保证使用这个变量的时候回调函数已经执行了 */loadRootNode:function(){ //加载根节点,pid=0var parameter = {pid:0};$.post("menuitemAction_showMenuitemsByPid.action",parameter,function(data){     tree.zTree =  $("#tree").zTree(tree.setting,data.menuitemList);});},

点击该节点，加载该节点的子节点

/** * 该方法是点击父节点的+号后执行的，意味着执行该方法的时候树已经生成了 * 所以才能用tree.zTree */loadNodeByPNode:function(){var parameter= {pid:tree.pNode.mid //子节点的pid是父节点的mid};//获取pid = mid的数据，也就是子节点的id等于父节点的id，说明此父节点加载了子节点if(!tree.zTree.getNodeByParam("pid",tree.pNode.mid)){$.post("menuitemAction_showMenuitemsByPid.action",parameter,function(data){/** * 把查询出来的字节点追加到父节点上 */tree.zTree.addNodes(tree.pNode,data.menuitemList,true);});}}};$().ready(function(){tree.loadRootNode();});

4.效果

页面加载时：

点击+号：

0 0