EasyUI ComboTree無限層級異步加載示例

時間 2019-11-20

標籤 easyui combotree 無限層級異步加載示例简体版

原文原文鏈接

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasuUIDemoTree.aspx.cs" Inherits="EasuUIDemoTree" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>EasyUI ComboTree示例</title>
    <!--easyui-->
    <link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../JS/jquery-easyui-1.5/themes/icon.css" />
    <script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.min.js"></script>
    <script type="text/javascript" src="../JS/jquery-easyui-1.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#cbt").combotree({
                width: 175,
                url: 'EasyUIHandler.ashx?method=combotree',
                valueField: 'id',
                textField: 'text',
                editable: false
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input id="cbt" class="easyui-combotree"/>
        </div>
    </form>
</body>
</html>

<%@ WebHandler Language="C#" Class="EasyUIHandler" %>

using System;
using System.Web;
using System.Collections.Generic;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System.Data;
using System.Data.SqlClient;

public class EasyUIHandler : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        int pageIndex = MSCL.RequestHelper.GetInt("page", 0);  //當前頁碼
        int pageSize = MSCL.RequestHelper.GetInt("rows", 0);  //每頁顯示記錄數
        string method = MSCL.RequestHelper.GetString("method");//前臺傳的標示值 

        string JsonStr = string.Empty;
        try
        {
            switch (method)
            {
                case "combotree":
                    //easyui 會每展開一個節點，日後端傳一個·id
                    string parentNodeId =  MSCL.RequestHelper.GetString("id") ?? null;
                    if (string.IsNullOrEmpty(parentNodeId))
                    {
                        parentNodeId = "0";
                    }
                    List<TreeModule> Toptree = GetSubNodes(parentNodeId);
                    JsonStr =Newtonsoft.Json.JsonConvert.SerializeObject(Toptree);
                    break;
                default:
                    break;
            }
        }
        catch (Exception ex)
        {
            throw;
        }
        context.Response.Write(JsonStr);
        context.Response.End();
    }

    /// <summary>
    /// * 獲取菜單的樹的方法*
    /// </summary>
    /// <param name="parentNodeId"></param>
    /// <returns></returns>
    public List<TreeModule> GetSubNodes(string parentNodeId)
    {
        DataTable dt = CreateDT();
        List<TreeModule> Tree = new List<TreeModule>();
        TreeModule TM = null;
        if (dt != null && dt.Rows.Count > 0)
        {
            DataRow[] rows = dt.Select("module_fatherid ='" + parentNodeId + "'");

            foreach (DataRow item in rows)
            {
                string id = item["module_id"].ToString();
                string text = item["module_name"].ToString();
                TM = new TreeModule();
                DataRow[] IsNulRows = dt.Select("module_fatherid ='" + id + "'");
                if (IsNulRows.Length > 0)
                {
                    //這個很關鍵，此節點爲closed狀態，才能夠展開，才能日後臺傳你點擊的id  
                    //看到Combotree的異步加載Demo，發現treegrid_data.json中 state="closed" 屬性能把點擊展開的節點Id傳到後臺中
                    TM.state = "closed";
                }
                TM.id = id;
                TM.text = text;
                Tree.Add(TM);
            }
        }
        return Tree;
    }
    
    #region 建立數據
    protected static DataTable CreateDT()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("module_id");
        dt.Columns.Add("module_name");
        dt.Columns.Add("module_fatherid");
        dt.Columns.Add("module_url");
        dt.Columns.Add("module_order");

        dt.Rows.Add("100", "全國", "0", "", "1");
        dt.Rows.Add("10001", "廣東", "100", "", "1");

        dt.Rows.Add("1000101", "深圳", "10001", "", "100");
        dt.Rows.Add("100010101", "南山區", "1000101", "", "1000");
        dt.Rows.Add("100010102", "羅湖區", "1000101", "", "1001");
        dt.Rows.Add("100010103", "福田區", "1000101", "", "1002");
        dt.Rows.Add("100010104", "寶安區", "1000101", "", "1003");
        dt.Rows.Add("100010105", "龍崗區", "1000101", "", "1004");

        dt.Rows.Add("10001010301", "上梅林", "100010103", "", "1002001");
        dt.Rows.Add("10001010302", "下梅林", "100010103", "", "1002002");
        dt.Rows.Add("10001010303", "車公廟", "100010103", "", "1002003");
        dt.Rows.Add("10001010304", "竹子林", "100010103", "", "1002004");
        dt.Rows.Add("10001010305", "八卦嶺", "100010103", "", "1002005");
        dt.Rows.Add("10001010306", "華強北", "100010103", "", "1002006");

        dt.Rows.Add("1000102", "廣州", "10001", "", "101");
        dt.Rows.Add("100010201", "越秀區", "1000102", "", "1105");
        dt.Rows.Add("100010202", "海珠區", "1000102", "", "1106");
        dt.Rows.Add("100010203", "天河區", "1000102", "", "1107");
        dt.Rows.Add("100010204", "白雲區", "1000102", "", "1108");
        dt.Rows.Add("100010205", "黃埔區", "1000102", "", "1109");
        dt.Rows.Add("100010206", "荔灣區", "1000102", "", "1110");
        dt.Rows.Add("100010207", "羅崗區", "1000102", "", "1111");
        dt.Rows.Add("100010208", "南沙區", "1000102", "", "1112");
        return dt;
    }
    #endregion  
    
    public class TreeModule
    {
        public string id { get; set; }
        public string text { get; set; }
        public string state { get; set; }
    }

    public bool IsReusable {
        get {
            return false;
        }
    }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。