jQuery EasyUI tree的 使用

jQuery EasyUI tree的 使用

1、简单数据表结构

2、先看效果图

 

  

 --删除后的效果

  

数据也发生相应变化

3、前台代码　　　　　　

复制代码
<script type="text/javascript">
    
   $(function(){ 
     InitTreeData();
    }) ;
     function InitTreeData()
     {
      $('#tree').tree({
          url:'demo01.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>
复制代码

 4、后台代码，目前只做了删除操作，增加，修改业务逻辑一样就没有多写 【注：此代码只是演示功能而已，有些地方写的不是很严谨，请见谅。】

posted @ 2013-09-16 10:32  破浪远航  阅读(276)  评论(0)    收藏  举报