jQuery EasyUI tree的使用

本文轉載自查看原文 2012-12-26 06:10 77632 easyui/ easyui tree/ jQuery/ jquery tree

睡不着就來看看研究下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、后台代碼，目前只做了刪除操作，增加，修改業務邏輯一樣就沒有多寫【注：此代碼只是演示功能而已，有些地方寫的不是很嚴謹，請見諒。】

很多人都問遞歸怎么寫的，這里寫上一個，與上個例子無關的業務

/// <summary>
    /// 構建easyUI數據
    /// </summary>
    public class VEasyUiTree
    {
        public int id { get; set; }
        public string text { get; set; }
        /// <summary>
        /// 'open' 或 'closed'，默認是 'open'。
        /// 如果為'closed'的時候，將不自動展開該節點。
        /// </summary>
        public string state { get; set; }
        public bool ischecked { get; set; }// replace checked

        public object attributes { get; set; }
        public List<VEasyUiTree> children { get; set; } }

        /// <summary>
        /// 遞歸獲取數據
        /// </summary>
        /// <param name="dep"></param>
        /// <returns></returns>
        public VEasyUiTree getTree(Department dep)
        {
            //轉換成Easyui數據
            VEasyUiTree model = GetVTree(dep);
            var list = depMan.GetDepsByParentId(dep.DeptId);
            if (list.Count > 0)
            {
                model.children = new List<VEasyUiTree>();
                foreach (var item in list)
                {
                    //遞歸子節點
                    model.children.Add(getTree(item));
                }
            }


            return model;
        }

 List<VEasyUiTree> trees = new List<VEasyUiTree>();
                    //獲取頂級節點
                    List<Department> listDep = depMan.GetDepsByParentId(Convert.ToInt32(hdnTopDepId.Value));
                    foreach (Department dept in listDep)
                    {
                        trees.Add(getTree(dept));
                    }

如果您覺得寫的好，請點擊右下方推薦

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Jquery easyui tree的使用 Jquery easyui tree的使用 Jquery easyui Tree的簡單使用 JQuery EasyUI Tree JQuery EasyUI 數據樹控件（Tree）的簡單使用實例 Jquery EasyUI Tree .net實例 easyui tree loadFilter的使用 EasyUI Tree的簡單使用 EasyUI-Tree的使用 easyui tree的簡單使用

jQuery EasyUI tree的 使用

免責聲明！

jQuery EasyUI tree的使用