NET 利用 jquery+ztree 实现 角色权限设置(以树结构显示导航菜单)

最新推荐文章于 2021-10-15 14:14:22 发布
最新推荐文章于 2021-10-15 14:14:22 发布
阅读量2.5k 收藏
点赞数
分类专栏： .NET And C# Jquery And JavaScript 文章标签： jquery ztree 角色树形结构 权限管理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kongwei521/article/details/50633484
版权

最近实现了一个角色权限设置的demo，特此发出来给大家参考，主要利用了 Jquery+Ztree 来读数据库来实现的。

Ztree 下载地址：http://www.ztree.me/v3/main.php#_zTreeInfo

效果图：



引用css+js文件 ：

	<!-- Core Scripts -->
		<script src="assets/js/jquery-1.8.2.min.js"></script>

		<!-- Template Script -->
		<link href="assets/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
		<script src="assets/js/jquery.ztree.core-3.5.min.js"></script>
		<script src="assets/js/jquery.ztree.excheck-3.5.min.js"></script>
		<script type="text/javascript">

			var setting = {
				view: {
					selectedMulti: false
				},
				check: {
					enable: true
				},
				data: {
					key: {
						//将treeNode的ItemName属性当做节点名称
						name: "menuname"
					},
					simpleData: {
						//是否使用简单数据模式
						enable: true,
						//当前节点id属性  
						idKey: "menuid",
						//当前节点的父节点id属性 
						pIdKey: "fathermenuid",
						//用于修正根节点父节点数据，即pIdKey指定的属性值
						rootPId: 0
					}
				},
				callback: {
					beforeCheck: beforeCheck,
					onCheck: onCheck
				}
			};


			function beforeCheck(treeId, treeNode) {

				return (treeNode.doCheck !== false);
			}
			var arrayObj = new Array();
			function onCheck(e, treeId, treeNode) {
				if (treeNode.check_Child_State > 0) {
					arrayObj.push(treeNode.menuid);
					for (var i = 0; i < treeNode.children.length; i++) {
					// 	alert(treeNode.children[i].menuid + treeNode.children[i].menuname);

						arrayObj.push(treeNode.children[i].menuid);
					}
				}
				else {
					//选中则添加
					if (treeNode.checked == true) {

						arrayObj.push(treeNode.menuid);
			// 		alert(treeNode.menuid + treeNode.menuname);
					}
						//去掉勾选则从数组中删除
					else {
						//判断一个父节点取消则相应的子节点全部取消
						if (treeNode.check_Child_State == 0)
						{
							//先清除掉父节点然后循环去掉字节点的选中ID
							arrayObj.splice(jQuery.inArray(treeNode.menuid, arrayObj), 1);
							for(var i=0;i<treeNode.children.length;i++)
							{
								arrayObj.splice(jQuery.inArray(treeNode[i], arrayObj), 1);
							}
						}else
						arrayObj.splice(jQuery.inArray(treeNode.menuid, arrayObj), 1);
					}
				}
	// 	alert(arrayObj.sort().toString());
				$("#hfRole").val(arrayObj.sort().toString());//存放隐藏域中以便插入数据
			}
			//获取URL请求参数
			function getQueryString(name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]); return null;
			}

			$(function () { //页面初始化加载树结构菜单
				$.post("UserRoleSet.aspx", function (json) {
					var treeObj = $.fn.zTree.init($("#treeDemo"), setting, json);
					//默认展开所有节点
					treeObj.expandAll(false);

					//如果地址有参数时则为修改选中状态 (编辑修改时用)
					if (getQueryString("upid") != null) {
						var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
						var mid = $("#hfRole").val().split(',');
						for (var i = 0; i < mid.length; i++) {
							var node = treeObj.getNodeByParam("menuid", mid[i]);
							node.checked = true;
							//node.open = true;
							//treeObj.selectNode(node);
							treeObj.updateNode(node);

						}
					}

				});
			});

		</script>

后台C#代码： 

		public StringBuilder seriesData = new StringBuilder();

		protected void Page_Load(object sender, EventArgs e)
		{
			if (!IsPostBack)
			{
				//在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)
				if (Request.Headers["X-Requested-With"] != null && Request.Headers["X-Requested-With"].ToLower() == "XMLHttpRequest".ToLower())
				{
					//清除缓冲区流中的所有内容输出
					Response.Clear();
					//设置输出流的HTTP MIMEl类型
					Response.ContentType = "application/json";
					//将一个字符串写入HTTP相应输出流
					Response.Write(GetJson());
					//将当前所有缓冲的输出发送到客户端，停止该页的执行
					Response.End();
				}
			}
		}
		//序列化，将对象转化为JSON字符串
		protected string GetJson()
		{
			//为启用 AFAX 的应用程序提供序列化和反序列化功能
			System.Web.Script.Serialization.JavaScriptSerializer json = new System.Web.Script.Serialization.JavaScriptSerializer();
			List<MenuList> list = new List<MenuList>();
			//获取管理员模块列表
			using (EastAgricultureDataContext db = new EastAgricultureDataContext())
			{
				list = (from p in db.menulist select new MenuList { menuid = p.menuid, menuname = p.menuname, fathermenuid = p.fathermenuid }).ToList<MenuList>();
			}

			//将对象转换为JSON字符串      
			return json.Serialize(list);
		}
public class MenuList
        {
            public int menuid { get; set; }
            public string menuname { get; set; }
            public int fathermenuid { get; set; }
        }

SQL表结构及数据：

-- ----------------------------
DROP TABLE [dbo].[menulist]
GO
CREATE TABLE [dbo].[menulist] (
[menuid] int NOT NULL IDENTITY(1,1) ,
[menuname] nvarchar(50) NOT NULL ,
[fathermenuid] int NOT NULL ,
[menulink] nvarchar(100) NULL ,
[addTime] datetime NOT NULL DEFAULT (getdate()) 
)

GO

-- ----------------------------
-- Records of menulist
-- ----------------------------
SET IDENTITY_INSERT [dbo].[menulist] ON
GO
SET IDENTITY_INSERT [dbo].[menulist] OFF
GO

-- ----------------------------
-- Indexes structure for table menulist
-- ----------------------------

-- ----------------------------
-- Primary Key structure for table menulist
-- ----------------------------
ALTER TABLE [dbo].[menulist] ADD PRIMARY KEY ([menuid])
GO
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('1', N'后台首页', '0', N'Index.aspx', '2016-01-28 21:32:01.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('2', N'个人中心', '0', N'', '2016-01-28 21:33:49.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('3', N'完善个人信息', '2', N'PerfectUserInfo.aspx', '2016-01-28 21:34:20.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('4', N'修改个人秘密', '2', N'UpdatePassWord.aspx', '2016-01-28 21:34:33.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('5', N'用户信息管理', '2', N'UserinfoManager.aspx', '2016-01-28 21:34:44.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('6', N'用户充值管理', '2', N'UserRecharge.aspx', '2016-01-28 21:34:53.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('7', N'一键推广分销', '2', N'ShareLink.aspx', '2016-01-28 21:35:04.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('8', N'商品管理', '0', NULL, '2016-01-28 21:35:53.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('9', N'商品信息管理', '8', N'GoodsManager.aspx', '2016-01-28 21:36:12.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('10', N'商品分类管理', '8', N'GoodsSortManager.aspx', '2016-01-28 21:36:20.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('11', N'团购商品管理', '8', N'GroupBuyManager.aspx', '2016-01-28 21:36:31.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('12', N'订单管理', '0', N'', '2016-01-28 21:36:43.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('13', N'订单管理信息', '12', N'OrderListManager.aspx', '2016-01-28 21:36:58.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('14', N'营销中心', '0', NULL, '2016-01-28 21:37:47.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('15', N'新闻信息管理', '13', N'NewsNoticesManager.aspx', '2016-01-28 21:38:06.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('16', N'新闻分类管理', '13', N'NewsSortManager.aspx', '2016-01-28 21:38:17.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('17', N'植保分类管理', '13', N'PlantDoctorSortManger.aspx', '2016-01-28 21:38:28.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('18', N'植保医院信息管理', '13', N'PlantDoctorManager.aspx', '2016-01-28 21:38:42.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('19', N'广告信息管理', '13', N'AdManager.aspx', '2016-01-28 21:38:48.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('20', N'活动管理信息', '13', N'HuoDongManager.aspx', '2016-01-28 21:38:56.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('21', N'参与活动管理', '13', N'JoinHuoDongManager.aspx', '2016-01-28 21:39:01.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('22', N'我的收入', '0', NULL, '2016-01-28 21:40:14.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('23', N'我的收入明细', '22', N'MyPayMoney.aspx', '2016-01-28 21:40:24.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('24', N'我的积分明细', '22', N'MyPoint.aspx', '2016-01-28 21:40:30.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('25', N'系统管理', '0', NULL, '2016-01-28 21:40:37.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('26', N'角色管理', '25', N'UserRoleManager', '2016-01-29 20:34:02.000');
INSERT INTO [EastAgriculture].[dbo].[menulist] ([menuid], [menuname], [fathermenuid], [menulink], [addTime]) VALUES ('27', N'会员设置', '25', N'MemberManager.aspx', '2016-01-29 20:34:02.000');

蝶恋花雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ztree菜单导航
05-11
ztree菜单导航
C#使用Jquery zTree实现树状结构显示 异步数据加载
08-31
主要为大家详细介绍了C#使用Jquery zTree实现树状结构显示和异步数据加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Ztree权限树，用户角色
有时间可以指导毕业设计，可以私聊我。一个热爱编程的smallCuteMonkey，可以私信我
08-22 79
下载相应的jar包，放入webapp下面 创建相应的tree.jsp 里面的id,pId,target,url这些属性固定，pId 0表示根菜单 pId 1表示一级菜单 看demo怎么使用的可以照着来用
.NET+Jquery+jquery.ztree 实现树状角色权限设置
kongwei521的专栏
04-03 2136
效果图： HTML代码：     权限选择：
用jquery，ztree根据角色分配权限
wangyiqianyi的专栏
06-28 222
权限jsp &lt;link rel="stylesheet" href="&lt;%=path%&gt;/ztree/css/demo.css" type="text/css"&gt; &lt;link rel="stylesheet" href="&lt;%=path%&gt;/ztree/css/zTreeStyle/zTre
多功能jQuery树插件zTree实现权限列表简单实例
11-23
总结来说，zTree作为一个强大的jQuery树插件，不仅能够实现权限列表的展示，还可以广泛应用于组织架构、文件目录、导航菜单等多种场景。通过熟练掌握其配置和API，开发者可以轻松地创建符合业务需求的树形结构。
jquery-zTree树形菜单
04-15
zTree广泛应用于各类管理系统，如权限管理、组织架构展示、文件目录浏览、导航菜单等。例如： 1. **权限分配**：在角色管理中，使用zTree展示权限节点，用户可以通过勾选树节点来分配权限。 2. **组织架构**：在...
JQuery实现树插件 Ztree
08-02
总之，JQuery实现的Ztree插件以其轻量级、易用性和强大的功能，成为了构建Web应用树形结构的首选。无论你是新手还是经验丰富的开发者，Ztree都能帮助你高效地实现目标。通过不断学习和实践，你可以充分利用Ztree，...
jQuery zTree
12-10
zTree的主要目标是为开发者提供一个轻量级且功能强大的解决方案，用于处理树形数据结构，如组织结构图、文件目录、导航菜单等。 ### 一、zTree的基本概念 1. **节点（Node）**：zTree中的每一个元素都是一个节点，...
JQuery-zTree-v3.1.rar_ztree
09-20
3. **权限管理**：在角色权限分配中，展示并操作权限节点。 4. **组织结构**：构建企业或团队的组织结构图。 总的来说，`JQuery-zTree-v3.1.rar`提供的zTree插件是一个功能强大且易于使用的工具，无论是在前端开发...
ztree实现权限树实例
01-12
使用ztree实现权限树，父子菜单级联，选中子菜单、父菜单关联。
中国一二级省市JSON格式（2017年7月20号后数据）
07-26
在开发过程中经常要使用到一二级省市列表，之前都是在网上找前人做好的JSON文件使用，但是使用后发现部分数据过时，要进行修改却难以查全，比如现在北京没了崇文区宣武区，上海没了闸北区卢湾区南汇区等等。博主根据2017年7月国家统计局官方网站上的数据做了该JSON，里面包含中国一级省市和其下的（一级省的）地级市，洲，盟，直辖县级市，直辖县以及（一级直辖市的）区，县；地级市再往下的市县便没有再细分了，小伙伴们可以根据自己的业务需求修改使用。id为区域编号（即邮政编码）
jquery多级菜单复杂权限设置系统
09-07
jquery实现的漂亮多级菜单 ，另带复杂权限设置模块 （自带数据库）
通过jq控制导航栏
weixin_54684864的博客
03-02 390
通过jq控制导航栏 想法:用js类方法做出转换导航栏 使导航栏内容发生变化 总结：控制导航栏转换要注意控制的页面的添加于删除; 难点:如何通过返回值控制导航栏转换； 按钮的位置和切换时的效果流畅； 效果：导航栏切换； 点击相应的按钮转到相应页面； **注意:**vlaue需要转换 getAttribute是返回所选属性值 data-id只是行内存放数据的一个标签 总过程： 先写转变页面 用button按钮来转换页面 点击完成切换 过程： Html部分： 创建包裹层div 建立控制三个页面的按钮 data-
角色权限、权限树、菜单展示
斌仔的小博客
10-15 836
业务场景：实现系统的权限控制、多级的菜单展示，适用于子父级关系的 实现：使用Stream进行实现 调用递归方法进行展示 /** * 查出所有分类，并且组装成父子结构 * * 最终实现的效果就是：只发了一个sql语句，查出所有的菜单，再利用递归的方式来组合出父子菜单 * @return */ @Override public List<CategoryEntity> listWithTree() { //1、查出所
ZTree+Struts2+ajax+json实现checkbox权限树
stream丶CC的专栏
09-24 8865
zTree的插件可以在网上下载：http://www.ztree.me/v3/main.php#_zTreeInfo参考了一些资料后，写的一个权限树（直接上代码）：1、JSP: &lt;%@ page language="java" import="java.util.*" contentType="text/html; charset=gb2312" errorPage=""%&gt; &lt...
ZTree入门权限管理
赵广陆
12-15 1173
目录1 ztree入门2 权限2.1 表关系2.2 通过SQL查询某个用户对应的模块2.3 授权功能2.3.1 效果展示2.3.2 思考2.3.3 展示权限Dao2.3.4 展示权限Service2.3.5 展示权限RoleServlet2.3.6 展示权限前端2.4 修改权限 1 ztree入门 第一步:引入ztree相关资源 <!--引入jqurey--> <script type="text/javascript" src="js/jquery-1.4.4.min.js"&
实现权限树样式的插件
Java那点事 | 学习●思考●分享 | Java技术交流QQ群：83753349
05-19 1302
可以使用jQuery的treeview插件实现权限树的样式，如下： 实现上面效果的代码如下： 系统管理 岗位管理 岗位添加 岗位删除 部门管理 用户管理 网上交流
zTree树形菜单案例
wwq674137727的博客
11-02 758
1、引入zTree的相关js： 2、异步获取菜单数据： var zTree; var dataTable; var treeSetting = {     view: {         showIcon : false,     //不显示图标         showLine: true,      //设置 zTree 不显示节点之间的连线         s
jquery+ztree多级下拉选择
最新发布
01-15
jquery ztree是一款基于jQuery的树形结构的插件，可以用来实现多级下拉选择。使用jquery ztree实现多级下拉选择的方法如下： 首先，引入jquery ztree的相关文件，包括jquery库、ztree插件等。 其次，准备好相应的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值