JQuery EasyUI tree增加/删除/修改节点,EasyUI tree操作使用说明

不多说,直接上代码,代码简单易懂


1<script type="text/javascript">
2     
3   $(function(){
4     TreeData();
5    }) ;
01function 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增加/删除/修改节点使用说明