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