EasyUI - 操作 Tree 控制項

標籤：

效果：

 

HTML代碼：

• 使用了模板頁

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">    <div id="Accordions" class="easyui-accordion">        <div title="所有使用者" data-options="iconCls:‘icon-save‘,selected:true" style ="padding:0 0 0 10px;">            <ul id="Tree"></ul>        </div>        <div title="密碼操作" data-options="iconCls:‘icon-reload‘">            content2         </div>        <div title="搜尋操作" data-options="iconCls:‘icon-reload‘">            content3         </div>    </div></asp:Content>

 

JavaScript代碼：

$(function () {    $(‘#Tree‘).tree({        url: "Json/Tree_Node.ashx",        datatype: JSON,        lines: true,        animate: true,        onClick: function (node) {            alert(node.text + node.id);        }    });})

 

ashx代碼（一般處理常式）：

using System.Data;using System.Web;using EasyUI.DAL;using System.Text;namespace EasyUI.Json{    /// <summary>    /// Tree_Node 的摘要說明    /// </summary>    public class Tree_Node : IHttpHandler    {        DataSet ds = new DataSet();        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            DataTable dt = SelectDT();            string json = GetTreeJsonByTable(dt, "ID", "CategoryName", "Url", "ParentID", "1000");            context.Response.Write(json);            context.Response.End();        }        #region 根據DataTable產生EasyUI Tree Json樹結構        StringBuilder result = new StringBuilder();        StringBuilder sb = new StringBuilder();        /// <summary>          /// 根據DataTable產生EasyUI Tree Json樹結構          /// </summary>          /// <param name="tabel">資料來源</param>          /// <param name="idCol">ID列</param>          /// <param name="txtCol">Text列</param>          /// <param name="url">節點Url</param>          /// <param name="rela">關係欄位</param>          /// <param name="pId">父ID</param>          private string GetTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string url, string rela, object pId)        {            result.Append(sb.ToString());            sb.Clear();            if (tabel.Rows.Count > 0)            {                sb.Append("[");                string filer = string.Format("{0}=‘{1}‘", rela, pId);                DataRow[] rows = tabel.Select(filer);                if (rows.Length > 0)                {                    foreach (DataRow row in rows)                    {                        sb.Append("{\"id\":\"" + row[idCol] + "\",\"text\":\"" + row[txtCol] + "\",\"attributes\":\"" + row[url] + "\",\"state\":\"open\"");                        if (tabel.Select(string.Format("{0}=‘{1}‘", rela, row[idCol])).Length > 0)                        {                            sb.Append(",\"children\":");                            GetTreeJsonByTable(tabel, idCol, txtCol, url, rela, row[idCol]);                            result.Append(sb.ToString());                            sb.Clear();                        }                        result.Append(sb.ToString());                        sb.Clear();                        sb.Append("},");                    }                    sb = sb.Remove(sb.Length - 1, 1);                }                sb.Append("]");                result.Append(sb.ToString());                sb.Clear();            }            return result.ToString();        }        #endregion        #region 建立資料        /// <summary>        /// 擷取資料庫中分類資料        /// </summary>        /// <returns></returns>        protected static DataTable SelectDT()        {            DataTable dt = new System.Data.DataTable();            dt = SQLHelper.ExecuteTable("select ID, CategoryName, Url, ParentID from Tb_APCategory", System.Data.CommandType.Text);            return dt;        }        #endregion        public bool IsReusable        {            get            {                return false;            }        }    }}

 

格式化資料為Json資料（核心代碼，從上面截取）：

#region 根據DataTable產生EasyUI Tree Json樹結構StringBuilder result = new StringBuilder();StringBuilder sb = new StringBuilder();/// <summary>  /// 根據DataTable產生EasyUI Tree Json樹結構  /// </summary>  /// <param name="tabel">資料來源</param>  /// <param name="idCol">ID列</param>  /// <param name="txtCol">Text列</param>  /// <param name="url">節點Url</param>  /// <param name="rela">關係欄位</param>  /// <param name="pId">父ID</param>  private string GetTreeJsonByTable(DataTable tabel, string idCol, string txtCol, string url, string rela, object pId){    result.Append(sb.ToString());    sb.Clear();    if (tabel.Rows.Count > 0)    {        sb.Append("[");        string filer = string.Format("{0}=‘{1}‘", rela, pId);        DataRow[] rows = tabel.Select(filer);        if (rows.Length > 0)        {            foreach (DataRow row in rows)            {                sb.Append("{\"id\":\"" + row[idCol] + "\",\"text\":\"" + row[txtCol] + "\",\"attributes\":\"" + row[url] + "\",\"state\":\"open\"");                if (tabel.Select(string.Format("{0}=‘{1}‘", rela, row[idCol])).Length > 0)                {                    sb.Append(",\"children\":");                    GetTreeJsonByTable(tabel, idCol, txtCol, url, rela, row[idCol]);                    result.Append(sb.ToString());                    sb.Clear();                }                result.Append(sb.ToString());                sb.Clear();                sb.Append("},");            }            sb = sb.Remove(sb.Length - 1, 1);        }        sb.Append("]");        result.Append(sb.ToString());        sb.Clear();    }    return result.ToString();}#endregion

View Code

 

完成。

EasyUI - 操作 Tree 控制項