1.html/jsp文件
<body>
<div style="margin:10px 0;"></div> <div class="easyui-panel" style="padding:5px"> <ul id="tt" class="easyui-tree" > </ul> </div> <!-- 右键菜单 --> <div id="mm" class="easyui-menu" style="width:120px;"> <div οnclick="append()" data-options="iconCls:'icon-add'">增加子部门</div> <div οnclick="removeit()" data-options="iconCls:'icon-remove'">删除部门</div> <div class="menu-sep"></div> <div οnclick="insertNode()">增加部门</div> <div οnclick="updateNode()">编辑部门</div> </div> </body>2.js文件
<script type="text/javascript" >
var jdata = 访问后台获得的Json数据（list应该也行，不过没有试过） $(function(){ $('#tt').tree({ checkbox: true, //url: , data:jdata, parentField:"parentNodeCode", textFiled:"orgName", idFiled:"orgId",onContextMenu: function(e,node){ //显示上下文菜单:就是显示右键菜单 e.preventDefault(); $(this).tree('select',node.target); $('#mm').menu('show',{ left: e.pageX, top: e.pageY }); }, formatter:function(node){ //显示父节点含有子节点个数 var s = node.text; if (node.children){ s += ' <span style=\'color:blue\'>(' + node.children.length + ')</span>'; } return s; }, onClick:function(node){ //node.isLeaf：判断他们是不是叶子，数据库中查询中已赋值 //children：通过判断他们是否有子节点了，就不在执行了，防止多次加载数据，导致重复 children=$('#tt').tree('getChildren',node.target); if(node && node.isLeaf=='false' && !children.length){ $('#tt').tree('append', { parent: node.target, data:data//访问后台获得的Json数据 }); }//单击组织树的节点时，同时grid去访问数据库获得相应的数据
showStu(); }, onCollapse : function(node){ /* 当节点收起来的时候，查找的子节点，并逐一删除 */ var children = $('#tt').tree("getChildren",node.target); if(children.length){ for (var i=0;i<children.length;i++){ $('#tt').tree("remove",children[i].target); } } } }); }); //对数据进行处理，处理成树的形式:重写loadFilter --这个不是原创，不过在哪里看到就忘了 $.fn.tree.defaults.loadFilter = function (data, parent) { var opt = $(this).data().tree.options; var idFiled, textFiled, parentField; if (opt.parentField) { idFiled = opt.idFiled || 'orgId'; textFiled = opt.textFiled || 'orgName'; parentField = opt.parentField || 'parentNodeCode'; var i, l, treeData = [], tmpMap = []; for (i = 0, l = data.length; i < l; i++) { tmpMap[data[i][idFiled]] = data[i]; //alert(data[i][idFiled]);// 节点的orgId : } for (i = 0, l = data.length; i < l; i++) { if (tmpMap[data[i][parentField]] && data[i][idFiled] != data[i][parentField]) { if (!tmpMap[data[i][parentField]]['children']) tmpMap[data[i][parentField]]['children'] = []; data[i]['text'] = data[i][textFiled]; tmpMap[data[i][parentField]]['children'].push(data[i]); } else { data[i]['text'] = data[i][textFiled]; treeData.push(data[i]); } } return treeData; } return data; };</script>
至于右键的四个方法就自己根据的业务逻辑实现
3/tree.json数据大概如下：重写的loadFilter会根据pid/parentNodeCode挂接成树
[
{ "orgId": 1, "orgName": "Folder1" }, { "orgId": 2, "parentNodeCode": 1, "orgName": "File1", "checked": true }, { "orgId": 3, "parentNodeCode": 1, "orgName": "Folder2", "state": "open" }, { "orgId": 4, "parentNodeCode": 3, "orgName": "File3", "checked": true }, { "orgId": 8, "parentNodeCode": 3, "orgName": "Async Folder" }, { "orgId": 9, "orgName": "language", "state": "closed" }, { "orgId": "j1", "parentNodeCode": 9, "orgName": "Java" }, { "orgId": "j2", "parentNodeCode": 9, "orgName": "C#" } ]