EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例

 本篇文章主要是对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   
 
 

时间： 2024-08-21 15:41:21

EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例的相关文章

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

扩展jquery easyui tree的搜索树节点方法(推荐)_jquery

如下所示: /** * 1)扩展jquery easyui tree的节点检索方法.使用方法如下: * $("#treeId").tree("search", searchText); * 其中,treeId为easyui tree的根UL元素的ID,searchText为检索的文本. * 如果searchText为空或"",将恢复展示所有节点为正常状态 */ (function($) { $.extend($.fn.tree.methods,

用Visual C++ 6.0递归查找目录树

在SDI项目内,通过使用CFileDialog和CFileFind类,不仅可以实现Windows桌面上现有的查找功能,而且可以灵活扩展查找条件.例如,下面的程序将在VisualC++6.0的Output窗口内逐行输出c:\windows下所有长度小于500字节的只读文件: #include /*含有 _getcwd,_chdir原型*/ void f0(){ char x[256],y[256]; CFileDialog fd(TRUE); /*用TRUE值构造"File Open"对

easyui tree树控件动态插入的html代码会失去渲染？

问题描述 easyui tree树控件动态插入的html代码会失去渲染? HI, RT, 问题描述:试图通过ajax向后台发送请求,服务端返回已经拼接好的 列表(树形控件的叶子结点和子节点), 前台回调函数拿到返回值后插入到树形控件ul标签里,但是没有样式(即没有被渲染). 脚本如下: $(document).ready(function () { $.post('/test.ashx', { 'action': 'getNodes' }, function (data, textStatus)

用ASP实现网站的“目录树”管理

数据库结构(共使用了两个表) 1.tblCategory 字段名 类型 Root binary 说明树关或开(目录的根) ID 自动编号 关键字 Sort integer 识别该字段内容的整数(如果root是开状态sort为0)表示显示的目录的顺序 Name text(255)可以包含html中的标识符 HREF text(255) 允许空 2.tblPages ID 自动编号 Sort integer 关键字 Name text(255) HREF text(255) 3.default.ht

以前收集的一些资料---如何使用ASP实现网站的“目录树”管理

使用ASP实现网站的目录树本来想多翻译些东西出来的,但是最近越来越忙了,以后我尽量多贴些短小的代码出来,翻译是越来越没空完成了.呵呵.数据库结构(共使用了两个表)1.tblCategory字段名  类型   Root   binary   说明树关或开(目录的根)ID     自动编号 关键字Sort   integer  识别该字段内容的整数(如果root是开状态sort为0)表示显示的目录的顺序Name   text(255)可以包含html中的标识符HREF   text(255) 允许空

如何使用ASP实现网站的“目录树”管理

使用ASP实现网站的目录树本来想多翻译些东西出来的,但是最近越来越忙了,以后我尽量多贴些短小的代码出来,翻译是越来越没空完成了.呵呵.数据库结构(共使用了两个表)1.tblCategory字段名 类型 Root binary 说明树关或开(目录的根)ID 自动编号 关键字Sort integer 识别该字段内容的整数(如果root是开状态sort为0)表示显示的目录的顺序Name text(255)可以包含html中的标识符HREF text(255) 允许空2.tblPagesID 自动编号

jQuery EasyUI tree 使用拖拽时遇到的错误小结_jquery

在我使用tree拖拽时总是失败,控制台输出了很多错误. 经过跟踪分析发现这是一个由于特殊配置导致的错误. 原先错误的代码如下: $('#tree').tree({ //省略其他 loadFilter: function(data, parent){ return data.rows; } }); 由于我后台返回值并不是一个直接适合tree使用的数据,需要从中取出rows才可以,所以就有了这段代码. 而 EasyUI 出错的原因就在于当拖动时,拖动方法中仍然会调用loadFilter方法,如下图代

请问一下用ExtJs在Asp.net上构建一个动态的树？

问题描述 请问一下用ExtJs在Asp.net上构建一个动态的树?请吧源码发给我谢谢! 解决方案 解决方案二:<html><head><scripttype="text/javascript"src="js/ext/ext-base.js"></script><scripttype="text/javascript"src="js/ext/ext-all.js">&l