关于Tree的代码:
<ul id="treeDemo"></ul> <div id="treeDemoMenu" class="easyui-menu" style="width:120px;"> <div onclick="append()" data-options="iconCls:'icon-add'">Append</div> <div onclick="removeit()" data-options="iconCls:'icon-remove'">Remove</div> <div class="menu-sep"></div> <div onclick="expand()">Expand</div> <div onclick="collapse()">Collapse</div> </div> <script> var treeId=undefined; $('#treeDemo').tree({ url:'tree_data.json', animate:true, /*checkbox:true, cascadeCheck:true, onlyLeafCheck:false,*/ lines:true, dnd:true, //当可拖动元素被放下时触发。source 参数指被拖动的 DOM 元素。 //移动后触发的事件 onDrop: function(e,source){ console.log(e) console.log(source) /*var targetId = $(target).tree('getNode', targetNode).id; $.ajax({ url: '...', type: 'post', dataType: 'json', data: { id: source.id, targetId: targetId, point: point } });*/ }, formatter:function(node){ var s = node.text; if (node.children){ if (node.children.length>0) { s += '
(' + node.children.length + ')
'; }; } return s; }, onClick: function(node){ $(this).tree('beginEdit',node.target); }, //编辑节点后触发。 onAfterEdit:function(node){ console.log(node) }, onContextMenu: function(e,node){ e.preventDefault(); $(this).tree('select',node.target); $('#treeDemoMenu').menu('show',{ left: e.pageX, top: e.pageY }); } }); function append(){ var t = $('#treeDemo'); var node = t.tree('getSelected'); t.tree('append', { parent: (node?node.target:null), data: [{ text: 'new item1' },{ text: 'new item2' }] }); } function removeit(){ var node = $('#treeDemo').tree('getSelected'); $('#treeDemo').tree('remove', node.target); } function collapse(){ var node = $('#treeDemo').tree('getSelected'); $('#treeDemo').tree('collapse',node.target); } function expand(){ var node = $('#treeDemo').tree('getSelected'); $('#treeDemo').tree('expand',node.target); } </script>
渲染