本篇文章主要是對EasyUI Tree+Asp.net實現權限樹或目錄樹導航的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
代碼如下: <%@ 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>網站後台通用管理系統，<%=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('系統提示', '您確定要退出本次登錄嗎?', 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"> </span> <div style=" margin-top:6px;" class="head"> <span class="icon icon-quit"> </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" />網站後台通用管理系統 V1.0</span> </div> <div region="south" split="true" style="height: 30px; background: #D2E0F2; "> <div class="footer"> 網站後台通用管理系統 <%=adminname%>，您好！ 版權所有@2012</div> </div> <div region="west" hide="true" split="true" title="導航菜單" style="width:180px;" id="west"> <div id="nav" class="easyui-accordion" fit="true" border="false"> <!-- 導航內容 --> <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;">歡迎進入系統</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">關閉</div> <div id="mm-tabcloseall">全部關閉</div> <div id="mm-tabcloseother">除此之外全部關閉</div> <div class="menu-sep"></div> <div id="mm-tabcloseright">當前頁右側全部關閉</div> <div id="mm-tabcloseleft">當前頁左側全部關閉</div> <div class="menu-sep"></div> <div id="mm-exit">退出</div> </div> </form> </body> </html> 復制代碼 代碼如下: <%@ 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"; //獲取數據庫中的分類數據 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 根據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 創建數據 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", "南山區", "M0101", "4.aspx", "1000"); dt.Rows.Add("M010102", "羅湖區", "M0101", "", "1001"); dt.Rows.Add("M010103", "福田區", "M0101", "", "1002"); dt.Rows.Add("M010104", "寶安區", "M0101", "", "1003"); dt.Rows.Add("M010105", "龍崗區", "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", "華強北", "M010103", "", "1002006"); dt.Rows.Add("M0102", "廣州", "M01", "", "101"); dt.Rows.Add("M010201", "越秀區", "M0102", "", "1105"); dt.Rows.Add("M010202", "海珠區", "M0102", "", "1106"); dt.Rows.Add("M010203", "天河區", "M0102", "", "1107"); dt.Rows.Add("M010204", "白雲區", "M0102", "", "1108"); dt.Rows.Add("M010205", "黃埔區", "M0102", "", "1109"); dt.Rows.Add("M010206", "荔灣區", "M0102", "", "1110"); dt.Rows.Add("M010207", "羅崗區", "M0102", "", "1111"); dt.Rows.Add("M010208", "南沙區", "M0102", "", "1112"); return dt; } #endregion public bool IsReusable { get { return false; } } } 代碼如下: #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] + """); 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
