JQuery EasyUI tree增加/删除/修改节点,EasyUI tree操作使用说明
不多说,直接上代码,代码简单易懂
1 | < script type = "text/javascript" > |
2 | |
3 | $(function(){ |
4 | TreeData(); |
5 | }) ; |
01 | function TreeData() |
02 | { |
03 | $('#tree').tree({ |
04 | url:'demo.ashx', |
05 | checkbox:true, |
06 | onClick:function(node){ |
07 | alert(node.text); |
08 | }, |
09 | onContextMenu: function(e, node){ |
10 | e.preventDefault(); |
11 | $('#tree').tree('select', node.target); |
12 | $('#mm').menu('show', { |
13 | left: e.pageX, |
14 | top: e.pageY |
15 | }); |
16 | } |
17 | }); |
18 | } |
19 | function remove() |
20 | { |
21 | |
22 | var nodes = $('#tree').tree('getChecked'); |
23 | var ids = ''; |
24 | for(var i=0; i< nodes.length ; i ){ |
25 | if (ids != '') ids = ',' ; |
26 | ids = nodes [i].id; |
27 | //$('#tree').tree('remove',nodes[i].target); |
28 | } |
29 | $.post("demo01.ashx",{"ids":ids,"type":"del"},function(data){ |
30 | InitTreeData(); |
31 | }); |
32 | |
33 | } |
34 | function update() |
35 | { |
36 | var node = $('#tree').tree('getSelected'); |
37 | if (node){ |
38 | node.text = '修改' ; //-->txt-->DB |
39 | node.iconCls = 'icon-save'; //-->sel-->DB |
40 | $('#tree').tree('update', node); |
41 | } |
42 | } |
43 | function append() |
44 | { |
45 | |
46 | var node = $('#tree').tree('getSelected'); |
47 | |
48 | $('#tree').tree('append',{ |
49 | parent: (node?node.target:null), |
50 | data: |
51 | [ |
52 | { |
53 | text:'new1',// -->txt-->DB |
54 | id:'1', |
55 | checked:true |
56 | } |
57 | ] |
58 | }); |
59 | |
60 | } |
61 | </ script > |
62 |
63 | </ head > |
64 | < body > |
65 | < ul id = "tree" > |
66 | </ ul > |
67 | < div id = "mm" class = "easyui-menu" style = "width: 120px;" > |
68 | < div onclick = "append()" iconcls = "icon-add" > |
69 | 添加节点</ div > |
70 | < div onclick = "remove()" iconcls = "icon-remove" > |
71 | 删除节点</ div > |
72 | |
73 | < div onclick = "update()" iconcls = "icon-edit" >修改节点</ div > |
74 | </ div ></ body > |
如果上面的的加载获取数据方法不适合你,还可以尝试一下这个
01 | //获取树形结构 |
02 | $.ajax({ |
03 | url: '/demo.ashx?random=' Math.random(), |
04 | type: 'POST' , |
05 | success: function (data) { |
06 | //加载树形结构 |
07 | $( '#tree' ).tree({ |
08 | data: data, |
09 | checkbox: true , |
10 | onClick: function (node) { |
11 | //树形菜单点击事件 |
12 | alert(node.id); |
13 | }, |
14 | onContextMenu: function (e, node) { |
15 | e.preventDefault(); |
16 | $( '#tree' ).tree( 'select' , node.target); |
17 | } |
18 | }); |
19 | } |
20 | }); |
原文链接:JQuery EasyUI tree增加/删除/修改节点使用说明