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

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


<script type="text/javascript">
    
   $(function(){ 
     TreeData();
    }) ;
 function TreeData()
     {
      $('#tree').tree({
          url:'demo.ashx',
          checkbox:true,
          onClick:function(node){
            alert(node.text);
          },
          onContextMenu: function(e, node){  
                        e.preventDefault();  
                        $('#tree').tree('select', node.target);  
                        $('#mm').menu('show', {  
                            left: e.pageX,  
                            top: e.pageY  
                        });  
                    }  
        });
     }
     function  remove()
     {
       
         var nodes = $('#tree').tree('getChecked');
         var ids = '';
            for(var i=0; i<nodes.length; i  ){
                if (ids != '') ids  = ',';
                ids  = nodes[i].id;
                 //$('#tree').tree('remove',nodes[i].target);
            }
         $.post("demo01.ashx",{"ids":ids,"type":"del"},function(data){
            InitTreeData();
         });
      
     }
     function update()
     {
          var node = $('#tree').tree('getSelected');
            if (node){
                node.text = '修改';  //-->txt-->DB
                node.iconCls = 'icon-save'; //-->sel-->DB
                $('#tree').tree('update', node);
            }
     }
     function  append()
     {
        
        var node = $('#tree').tree('getSelected');
        
            $('#tree').tree('append',{
                parent: (node?node.target:null),
                data:
                [
                    {
                        text:'new1',//  -->txt-->DB
                        id:'1',
                        checked:true
                    } 
                ]
            });
         
     }
    </script>

</head>
<body>
    <ul id="tree">
    </ul>
    <div id="mm" class="easyui-menu" style="width: 120px;">
        <div onclick="append()" iconcls="icon-add">
            添加节点</div>
        <div onclick="remove()" iconcls="icon-remove">
            删除节点</div>
        
        <div onclick="update()" iconcls="icon-edit">修改节点</div>
    </div></body>

如果上面的的加载获取数据方法不适合你，还可以尝试一下这个 


//获取树形结构
$.ajax({
    url: '/demo.ashx?random='   Math.random(),
    type: 'POST',
    success: function (data) {
        //加载树形结构
        $('#tree').tree({
            data: data,
            checkbox: true,
            onClick: function (node) {
                //树形菜单点击事件
                alert(node.id);
            },
            onContextMenu: function (e, node) {
                e.preventDefault();
                $('#tree').tree('select', node.target);
            }
        });
    }
});


原文链接：JQuery EasyUI tree增加/删除/修改节点使用说明