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

 

完成。