jquery easyui-----------tree

 

一  tree初始化方式

1. html方式初始化

 

<ul id="tt1" class="easyui-tree">
          <li>  
         <span>Folder</span>
         <ul>
             <li>
                 <span>Sub Folder 1</span>
                 <ul>  
                     <li>
                         <span><a href="#">File 11</a></span>  
                     </li>
                 </ul>
             </li>
             <li>
                 <span>File 2</span>  
             </li>
             <li>
                 <span>File 3</span>  
             </li>
         </ul>
     </li>
     <li>
         <span>File21</span>  
     </li>
    </ul>

html

2. 本地加載json

<ul id="tt1">
</ul>

<script type="text/javascript">
    $(function () {
        var data = [{
            text: 'Item1',
            state: 'closed',
            children: [{
                text: 'Item11'
            }, {
                text: 'Item12'
            }]
        }, {
            text: 'Item2'
        }];
        $('#tt1').tree();  //首先初始化樹結構
        $('#tt1').tree('loadData', data);
    });
</script>

js

3. 異步加載樹結構

<ul id="tt">
</ul>

<script type="text/javascript">
        $(function () {
            $('#tt').tree({
                lines: true,  //顯示格式控制
                url: '/Ajax/Parameter/AA40.ashx?Method=InitTree',
                /*************每次打開全部節點*************************/
                onLoadSuccess: function (node, data) {
                    var t = $(this);
                    if (data) {
                        $(data).each(function (index, d) {
                            if (this.state == 'closed') {
                                t.tree('expandAll');
                            }
                        });
                    }
                    /***********選中指定id的節點****************/
                    var node = $('#tt').tree('find', 410);
                    $('#tt').tree('select', node.target);          
                },
                /**************點擊節點展開或關閉樹形結構***************/
                onClick: function (node) {
                    if (node.state == 'closed') {
                        $(this).tree('expand', node.target);
                        console.info(node.target);
                    } else {
                        $(this).tree('collapse', node.target);
                    }
                },
                onDblClick: function (node) {
                    var g = $(this).tree('getParent', node.target);   //獲取選中節點的父節點
                }
            });
        });
    </script>View Code 

js

        /// <summary>
        /// 初始化樹結構
        /// </summary>
        public void InitTree()
        {
            com.zhonghui.bll.sys bll = new bll.sys();
            DataSet ds = bll.GetList("");
            if (ds.Tables[0].Rows.Count > 0)
            {
                string strWhere = string.IsNullOrEmpty(Request["id"]) == true ? " sysPID IS NULL" : " sysPID='" + Request["id"] + "'";
                string s = GetTreeJson(ds.Tables[0], "sysID", "sysName", "sysPID", strWhere);
                Response.Write(s);   
            }
        }           
        /// <summary>
        /// 根據DataTable生成Json樹結構  【異步加載樹結構】
        /// </summary>
        /// <param name="tabel">table列表</param>
        /// <param name="nodeID">節點id</param>
        /// <param name="nodeName">節點名稱</param>
        /// <param name="pNodeID">父節點ID</param>
        /// <param name="strWhere">條件</param>
        /// <returns></returns>
        public string GetTreeJson(DataTable tabel, string nodeID, string nodeName, string pNodeID, string strWhere)
        {
                StringBuilder strJson = new StringBuilder();
                strJson.Append("[");
                DataRow[] rows = tabel.Select(strWhere);
                if (rows.Length > 0)
                {
                    foreach (DataRow row in rows)
                    {
                        strJson.Append("{\"id\":\"" + row[nodeID] + "\",\"text\":\"" + row[nodeName]);
                        if (tabel.Select(string.Format("{0}='{1}'", pNodeID, row[nodeID])).Length > 0)
                        {
                            strJson.Append("\",\"state\":\"closed\"");
                        }
                        else
                        {
                            strJson.Append("\",\"state\":\"open\"");
                        }

                        strJson.Append("},");
                    }
                    strJson = strJson.Remove(strJson.Length - 1, 1);
                }
                strJson.Append("]");
            return strJson.ToString();
        }       

aspx