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

最近实现了一个角色权限设置的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');