主頁 > 知識庫 > EasyUI Tree+Asp.net實現(xiàn)權(quán)限樹或目錄樹導(dǎo)航的簡單實例

EasyUI Tree+Asp.net實現(xiàn)權(quán)限樹或目錄樹導(dǎo)航的簡單實例

復(fù)制代碼代碼如下:

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

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

html xmlns="http://www.w3.org/1999/xhtml">
    head>
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    title>網(wǎng)站后臺通用管理系統(tǒng)，%=adminname%>，您好！/title>
    link href="Css/default.css" rel="stylesheet" type="text/css" />
    !--easyui-->
    link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
    link rel="stylesheet" type="text/css" href="easyui/themes/default/tree.css" />
    link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
    script type="text/javascript" src="easyui/jquery-1.8.0.min.js">/script>
    script type="text/javascript" src="easyui/jquery.easyui.min.js">/script>
    script type="text/javascript" src='EasyUI/JQLoader.js'> /script>
    script type="text/javascript" src='EasyUI/outlook.js'> /script>
    script type="text/javascript">
        $(function () {
            $('#lefttree').tree({
                animate: true,
                checkbox: false,
                url: 'GetTreeDataFromDB.ashx?father=0',
                onClick: function (node) {
                    if (node.attributes != "") {
                        addTab(node.text, node.attributes, node.id);
                    }
                },
                onLoadSuccess: function (node, data) {
                    $('#lefttree').show();
                }
            });

            $('#loginOut').click(function () {
                $.messager.confirm('系統(tǒng)提示', '您確定要退出本次登錄嗎?', function (r) {
                    if (r) {
                        location.href = 'LoginExit.ashx';
                    }
                });
            })
        });
    /script>
    /head>
    body class="easyui-layout" style="overflow-y: hidden" scroll="no">
    form id="form1" runat="server">
      noscript>
      div style=" position:absolute; z-index:100000; height:2046px;top:0px;left:0px; width:100%; background:white; text-align:center;"> img src="images/noscript.gif" alt='抱歉，請開啟腳本支持！' /> /div>
      /noscript>
      div region="north" split="true" border="false" style="overflow: hidden; height: 60px;
        background: url(images/layout-browser-hd-bg.gif) #7f99be repeat-x center 50%;
        line-height: 20px;color: #fff; font-family: Verdana, 微軟雅黑,黑體">
        div style="float:right;padding-top:5px;padding-right:20px;text-align:right;"> span class="head">nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;/span>
          div style=" margin-top:6px;" class="head"> span class="icon icon-quit">nbsp;/span>a href="#" id="loginOut">安全退出/a> /div>
        /div>
        span style="padding-left:10px; font-size: 16px; ">img src="images/blocks.gif" width="20" height="20" align="absmiddle" />網(wǎng)站后臺通用管理系統(tǒng) V1.0/span> /div>
      div region="south" split="true" style="height: 30px; background: #D2E0F2; ">
        div class="footer"> 網(wǎng)站后臺通用管理系統(tǒng) %=adminname%>，您好！版權(quán)所有@2012/div>
      /div>
      div region="west" hide="true" split="true" title="導(dǎo)航菜單" style="width:180px;" id="west">
        div id="nav" class="easyui-accordion" fit="true" border="false">
          !-- 導(dǎo)航內(nèi)容 -->
          div id="lefttree" style="margin:5px;">/div>
        /div>
      /div>
      div id="mainPanle" region="center" style="background: #eee; overflow-y:hidden">
        div id="tabs" class="easyui-tabs" fit="true" border="false" >
          div title="歡迎使用" style="padding:20px;overflow:hidden; " > span style="font-size:18px;">歡迎進(jìn)入系統(tǒng)/span> /div>
        /div>
      /div>
      div id="mm" class="easyui-menu" style="width:150px;">
        div id="mm-tabupdate">刷新/div>
        div class="menu-sep">/div>
        div id="mm-tabclose">關(guān)閉/div>
        div id="mm-tabcloseall">全部關(guān)閉/div>
        div id="mm-tabcloseother">除此之外全部關(guān)閉/div>
        div class="menu-sep">/div>
        div id="mm-tabcloseright">當(dāng)前頁右側(cè)全部關(guān)閉/div>
        div id="mm-tabcloseleft">當(dāng)前頁左側(cè)全部關(guān)閉/div>
        div class="menu-sep">/div>
        div id="mm-exit">退出/div>
      /div>
    /form>
/body>
/html>

復(fù)制代碼代碼如下:

%@ WebHandler Language="C#" Class="GetTreeDataFromDB" %>

using System;
using System.Web;
using System.Configuration;
using System.Data;
using System.Text;
using System.Collections.Generic;
//add
using System.Web.Script.Serialization;

public class GetTreeDataFromDB : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        //獲取數(shù)據(jù)庫中的分類數(shù)據(jù)
        string fatherid = context.Request.QueryString["father"];
        DataTable dt = createDT();

        string json = GetTreeJsonByTable(dt, "module_id", "module_name","module_url", "module_fatherid", "0");
        context.Response.Write(json);
        context.Response.End();
    }

    #region 根據(jù)DataTable生成EasyUI Tree Json樹結(jié)構(gòu)
    StringBuilder result = new StringBuilder();
    StringBuilder sb = new StringBuilder();
    /// summary>
    /// 根據(jù)DataTable生成EasyUI Tree Json樹結(jié)構(gòu)
    /// /summary>
    /// param name="tabel">數(shù)據(jù)源/param>
    /// param name="idCol">ID列/param>
    /// param name="txtCol">Text列/param>
    /// param name="url">節(jié)點Url/param>
    /// param name="rela">關(guān)系字段/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 創(chuàng)建數(shù)據(jù)
    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("C1", "全國", "0", "1.aspx", "1");
dt.Rows.Add("M01", "廣東", "C1", "2.aspx", "1");

        dt.Rows.Add("M0101", "深圳", "M01", "3.aspx", "100");
        dt.Rows.Add("M010101", "南山區(qū)", "M0101", "4.aspx", "1000");
        dt.Rows.Add("M010102", "羅湖區(qū)", "M0101", "", "1001");
        dt.Rows.Add("M010103", "福田區(qū)", "M0101", "", "1002");
        dt.Rows.Add("M010104", "寶安區(qū)", "M0101", "", "1003");
        dt.Rows.Add("M010105", "龍崗區(qū)", "M0101", "", "1004");

        dt.Rows.Add("M01010301", "上梅林", "M010103", "", "1002001");
        dt.Rows.Add("M01010302", "下梅林", "M010103", "", "1002002");
        dt.Rows.Add("M01010303", "車公廟", "M010103", "", "1002003");
        dt.Rows.Add("M01010304", "竹子林", "M010103", "", "1002004");
        dt.Rows.Add("M01010305", "八卦嶺", "M010103", "", "1002005");
        dt.Rows.Add("M01010306", "華強(qiáng)北", "M010103", "", "1002006");

        dt.Rows.Add("M0102", "廣州", "M01", "", "101");
        dt.Rows.Add("M010201", "越秀區(qū)", "M0102", "", "1105");
        dt.Rows.Add("M010202", "海珠區(qū)", "M0102", "", "1106");
        dt.Rows.Add("M010203", "天河區(qū)", "M0102", "", "1107");
        dt.Rows.Add("M010204", "白云區(qū)", "M0102", "", "1108");
        dt.Rows.Add("M010205", "黃埔區(qū)", "M0102", "", "1109");
        dt.Rows.Add("M010206", "荔灣區(qū)", "M0102", "", "1110");
        dt.Rows.Add("M010207", "羅崗區(qū)", "M0102", "", "1111");
        dt.Rows.Add("M010208", "南沙區(qū)", "M0102", "", "1112");
        return dt;
    }
    #endregion

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

復(fù)制代碼代碼如下:

    #region 根據(jù)DataTable生成EasyUI Tree Json樹結(jié)構(gòu)  
    StringBuilder result = new StringBuilder();  
    StringBuilder sb = new StringBuilder();      
    /// summary>  
    /// 根據(jù)DataTable生成EasyUI Tree Json樹結(jié)構(gòu)  
    /// /summary>  
    /// param name="tabel">數(shù)據(jù)源/param>  
    /// param name="idCol">ID列/param>  
    /// param name="txtCol">Text列/param>  
    /// param name="url">節(jié)點Url/param>  
    /// param name="rela">關(guān)系字段/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] + "\"");  
                    if (tabel.Select(string.Format("{0}='{1}'", rela, row[idCol])).Length > 0)  
                    {  
                        //點擊展開
                        sb.Append(",\"state\":\"closed\",\"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   

您可能感興趣的文章:

淺談EasyUi ComBotree樹修改父節(jié)點選擇的問題
EasyUi combotree 實現(xiàn)動態(tài)加載樹節(jié)點
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI創(chuàng)建樹形菜單
Jquery easyui 實現(xiàn)動態(tài)樹
jquery中EasyUI實現(xiàn)異步樹
jquery中EasyUI實現(xiàn)同步樹
jQuery EasyUI API 中文文檔 - TreeGrid 樹表格使用介紹
EasyUI創(chuàng)建人員樹的實例代碼

標(biāo)簽：益陽攀枝花拉薩棗莊咸寧廈門南平 POS機(jī)

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《EasyUI Tree+Asp.net實現(xiàn)權(quán)限樹或目錄樹導(dǎo)航的簡單實例》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。