EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例
来源: 阅读:2228 次 日期:2014-10-11 13:51:07
温馨提示: 小编为您整理了“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" "">

<html xmlns="">

<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

更多信息请查看IT技术专栏

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map