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
相关文章
- 这篇文章主要为大家详细介绍了easyUI下拉列表点击事件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22
jQuery EasyUI编辑DataGrid用combobox实现多级联动
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧...2016-09-01jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
这篇文章主要介绍了jQuery Easyui使用之可折叠面板动态加载无效果的解决方案,非常不错,具有参考借鉴价值,感兴趣的朋友一起看下吧...2016-08-24JQuery EasyUI学习教程之datagrid 添加、修改、删除操作
这篇文章主要介绍了JQuery EasyUI datagrid 添加、修改、删除操作的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-25如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
这篇文章主要介绍了如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上,需要的朋友可以参考下...2015-12-28关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了Bootstrap树形组件jqTree的简单封装,封装一个稍微完整点的树形组件,感兴趣的小伙伴们可以参考一下...2016-01-26
基于element-ui封装可搜索的懒加载tree组件的实现
这篇文章主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-23- 这篇文章主要介绍了jquery插件EasyUI中form表单提交实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-01-14
- 这篇文章主要介绍了EasyUI Pagination 分页的两种做法小结的相关资料,需要的朋友可以参考下...2016-07-25
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下...2016-05-04- 最近使用到了jstree,感觉是一款灵活的、可多项定制的tree插件。下面通过本文给大家详细介绍下jstree的简单实例,需要的朋友可以参考下...2016-12-02
- jquery easyui框架提供了创建网页所需要的一切,可以帮助大家建立站点,接下来,通过本文给大家介绍Jquery easyui开启行编辑模式增删改操作,感兴趣的朋友一起学习...2016-01-15
jQuery EasyUI中DataGird动态生成列的方法
EasyUI中使用DataGird显示数据列表中,有时需要根据需要显示不同的列,例如,在权限管理中,不同的用户登录后只能查看自己权限范围内的列表字段,这就需要DataGird动态组合列,下面介绍EasyUI中DataGird动态生成列的方法...2016-04-06- 关于类别树的多级是一个刚接触ajax和多级类别很头痛的问题,针对那种商品种类繁多,级别层次多更是麻烦的问题,去年刚学asp.net,实验室的同学曾经这样做过,递归sql,现在看了惊心动魄...2021-09-22
- 这篇文章主要介绍了jQuery zTree如何改变指定节点文本样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-17
- 这篇文章主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-05-16
C#使用Jquery zTree实现树状结构显示 异步数据加载
这篇文章主要为大家详细介绍了C#使用Jquery zTree实现树状结构显示和异步数据加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25- 这篇文章主要介绍了Jquery插件easyUi实现表单验证示例,需要的朋友可以参考下...2015-12-17
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
本文给大家介绍基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用,非常具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-05-14