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

赞 (0)

相关推荐

  • EasyUI创建人员树的实例代码

    EasyUI创建人员树的实例代码

    最近做了一个树状的下拉列表,在这里记录一下,以后可以直接使用 项目中的树状下拉列表是用来选择人员用的,具体实现展示如下: 先说一说功能,左边的人员数是提供选人的,当点击中间的按钮,选中的人员会直接移到右边,如果要删除已选中的人员,只需要双击右边人的姓名即可,点击确定进行集体的业务逻辑操作,一般就是新增人员到某一个表中. 我们再来看看这个DIV的具体代码,由于项目中在多个地方都使用到了这个人员树,所以我把这个DIV抽象出来当作一个公共的jsp页面.如需调用,只需要include这个jsp即可 us

  • jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

    扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name'

  • jquery中EasyUI实现异步树

    前台使用EasyUI实现 . EasyUI向后台传递一个id参数 . 第一次加载 , 向后台传递的id为null . 之后每次将树节点展开 , 会向后台传递一个当前节点的 id . Control层 : 复制代码 代码如下: /**   * tree   */  @RequestMapping(value = "/tree.do")  public void mytree(HttpServletResponse response, String id) {   this.writeJs

  • EasyUi combotree 实现动态加载树节点

    推荐阅读: 简介EasyUI datagrid editor combogrid搜索框的实现 EasyUi中的Combogrid 实现分页和动态搜索远程数据 easyui 1.2.4例子中并没有给出动态加载树节点的例子,只好自己研究. 从源码中可知可以看出combotree 是继承 combo 和 tree两个控件,所以在展开其下级子节点时,把combotree内置的tree的options选项的url重置成一个动态取选择值的url,代码如下: $('#cc').combotree({ url:

  • 浅谈EasyUi ComBotree树修改 父节点选择的问题

    本人在使用 Easy UI 期间发现了一个不太适合项目的bug,可能也不算bug把 . 毕竟不同项目背景 取舍不同. 我在做网元树选择的时候  发现当选取父节点后,子节点都会被选择  返回  .但是如果我们选中父节点后没有必要选择子节点. 故对源脚本作适当修改 下拉框树修改 父节点选中后只显示父节点  取消返回子节点 修改方法 找到树的选择函数 进行遍历判断  查找关键字 combotree multiple 大约行数 10564 function _7d5(_7d6) { var opts=$

  • 轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    轻松学习jQuery插件EasyUI EasyUI创建树形菜单

    一.EasyUI使用标记创建树形菜单 一个树形菜单(Tree)可以从标记创建.easyui 树形菜单(Tree)也可以定义在 <ul> 元素中.无序列表的 <ul> 元素提供一个基础的树(Tree)结构.每一个 <li> 元素将产生一个树节点,子 <ul> 元素将产生一个父树节点. 创建树形菜单(Tree) <ul class="easyui-tree"> <li> <span>Folder</s

  • jquery中EasyUI实现同步树

    在JS中,将显示树的url地址写成control的地址即可. control: 复制代码 代码如下: @RequestMapping(value = "/tree")  public void tree(HttpServletRequest request, HttpServletResponse response) throws IOException {   this.writeJson(response, bookService.getTree());  } dao: 复制代码

  • Jquery easyui 实现动态树

    在上篇文章给大家介绍了jquery中EasyUI实现异步树,本文给大家介绍jquery easyui实现动态树. 首先是在jsp页面中引入相关的js文件 在body中加入流程列表,通过后天拼接json数据 具体内容请看下面代码详情吧. 首选在jsp页面中引入相关的js <link rel="stylesheet" type="text/css" href="<%=path %>/css/jquery_easyui/themes/defau

  • 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的搜索树节点方法(推荐)

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

  • jQuery EasyUI tree增加搜索功能的实现方法

    扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏. /** * 1)扩展jquery easyui tree的节点检索方法.使用方法如下: * $("#treeId").tree("search", searchText); * 其中,treeId为easyui tree的根UL元素的ID,searchText为检索的文本. * 如果searchText为空或"",将恢复展示所有节点为正常状

  • C# 表达式目录树Expression的实现

    C# 表达式目录树Expression的实现

    目录 表达式目录树 表达式目录树的拼装 应用 Linq to SQL ExpressionVisitor 表达式目录扩展 通过表达式目录树实现 表达式目录树 表达式目录树:语法树,或者说是一种数据结构 1.表达式目录树Expression:System.Linq.Expressions; 2.描述了多个变量或者和常量之间的关系,按照一定的规则进行组装! 可以向委托一样使用lambd表达式快捷声明: 不能有语句体,声明只能有一行代码: 可以通过Compile(),编译成一个委托: Func<int

  • EasyUI Tree树组件无限循环的解决方法

    EasyUI Tree树组件无限循环的解决方法

    在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环.如: tree.json [{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[{ "text"

  • 使用ASP实现网站的“目录树”管理的代码

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

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

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

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

  • Easyui Tree获取当前选择节点的所有顶级父节点

    Easyui Tree获取当前选择节点的所有顶级父节点

    只支持四层目录结构,比较笨的一个方法 JS代码 var node = $('#tree').tree('getSelected'); //获取该节点所有父节点 var parentAll = node.text; var flag = ">>"; parentAll = flag.concat(parentAll); var parent = $('#tree').tree('getParent', node.target); if(parent != null &

  • Openlayers+EasyUI Tree动态实现图层控制

    Openlayers+EasyUI Tree动态实现图层控制

    本文实例为大家分享了Openlayers+EasyUI Tree动态实现图层控制的具体代码,供大家参考,具体内容如下 功能介绍 主要功能 根据openlayers3.0与easyUI tree 功能实现图层显隐控制功能,达到子节点选择实现单个图层的显隐,父节点选择实现所有图层的显隐. 页面展示 主要代码 HTML+CSS #xuanfu1 { position: absolute; top: 50px; right: 40px; background-color: rgba(134,149,23

  • asp.net使用DataGridTree实现下拉树的方法

    本文实例讲述了asp.net使用DataGridTree实现下拉树的方法.分享给大家供大家参考.具体实现方法如下: 下拉树实现原理:输出json到客户端,客户端实现动态加载,中间不会和服务端交互.数据量支持上经测试几千还是很快的.本下拉树控件是用c#+js树实现. 2.c# 计算器 计算字符串数学表达式源码 计算数学表达式原理 采用c#实现 很实用 //a.建立两个栈:第一个位操作数栈,第二个操作符符栈!(将栈定义为string类型) //b.对数字来说是无条件压入数字栈中. //c.而对符号来

随机推荐