一、在做权限分配之前,首先先了解“ZTree”这个插件,我的这个系统没有用Jquery-EasyUI的Tree。用的是”ZTree“朋友们可以试试,也很强大。点击下载ZTree插件

      1、介绍“ZTree”,在目录:\zTree\demo\cn\index.html,有个Demo,打开看一看。

2、这个是最简单的“不显示”节点图标的树。如果想用的话,点击右键“此框架-查看源代码”的方式。和查看Jquery-UI的方式一样。

3、下面这个是显示图标的树,我的系统用的就是这种样式!

       

4、接下来就看看是怎么使用吧。

(1)、右键查看源代码,看到引用插件的JS、CSS

    <link href="@Url.Content("~/zTree/css/zTreeStyle/zTreeStyle.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/zTree/js/jquery.ztree.core-3.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/zTree/js/jquery.ztree.excheck-3.1.js")" type="text/javascript"></script>
        (2)、系统演示:带图标的那种样式。

                   (3)、ZTree的属性:建议看看:http://www.ztree.me/v3/api.php ,下面是Demo中的源代码部分

<SCRIPT type="text/javascript">
<!--
var setting = {
data: {
simpleData: {
enable: true
}
}
}; var zNodes =[
{ id:, pId:, name:"展开、折叠 自定义图标不同", open:true, iconOpen:"../../../css/zTreeStyle/img/diy/1_open.png", iconClose:"../../css/zTreeStyle/img/diy/1_close.png"},
{ id:, pId:, name:"叶子节点1", icon:"../../../css/zTreeStyle/img/diy/2.png"},
{ id:, pId:, name:"叶子节点2", icon:"../../../css/zTreeStyle/img/diy/3.png"},
{ id:, pId:, name:"叶子节点3", icon:"../../../css/zTreeStyle/img/diy/5.png"},
{ id:, pId:, name:"展开、折叠 自定义图标相同", open:true, icon:"../../../css/zTreeStyle/img/diy/4.png"},
{ id:, pId:, name:"叶子节点1", icon:"../../../css/zTreeStyle/img/diy/6.png"},
{ id:, pId:, name:"叶子节点2", icon:"../../../css/zTreeStyle/img/diy/7.png"},
{ id:, pId:, name:"叶子节点3", icon:"../../../css/zTreeStyle/img/diy/8.png"},
{ id:, pId:, name:"不使用自定义图标", open:true },
{ id:, pId:, name:"叶子节点1"},
{ id:, pId:, name:"叶子节点2"},
{ id:, pId:, name:"叶子节点3"} ]; $(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//-->
</SCRIPT>

前台JS代码

(4)、看到上面的JS部分,是写在前台的,但是这个系统中是在后台中写的,方便结合数据库进行权限分配的操作然后用

              @Html.Raw(ViewData["tree"].ToString())的方式渲染出来。 
(5)、把“operate”拼接到一块,使用StringBuider效率更高。

//TX:使用ZTree树显示权限
public ActionResult ZTreeList(int userId)
{
//var user = this.user();
limits = userPriviligeBLL.listPrivilige(userId);
string operate = string.Empty;
//var listLimtAll = userLimitBll.GetAllLimits();
var listModul = userModuleBll.pagedGetAllList();
operate += "<script type=\"text/javascript\">var setting = {check: {enable: true},data: {simpleData: {enable: true}}};var zNodes =[";
int i = ;
foreach (var item in listModul)
{
i++;
operate += "{ id:" + item.ID + ", pId:0, name:\"" + item.Name + "\", open:true,nocheck:true,iconSkin:\"pIcon0" + i + "\"},";
operate += GetChild(item.ID);
}
if (listModul != null) //有功能项 去除最后一个逗号
operate = operate.Substring(, operate.Length - );
operate += "];$(document).ready(function(){$.fn.zTree.init($(\"#treeDemo\"), setting, zNodes);});</script>";
ViewData["tree"] = operate;
ViewData["uid"] = userId;
return View();
}

ZTreeList

(6)、其中使用到“递归”算法,查询下级的节点。

        // 查找下级节点
private string GetChild(int FID)
{
string child = string.Empty;
var listLimtAll = userLimitBll.GetAllLimits();
var items = listLimtAll.Where(a => a.Module.ID == FID);
foreach (var item in items)
{
//child += "{ id:" + item.ID + ", pId:" + FID + ", name:\"" + item.Name + "\", open:true " + GetChecked(item.ID.ToString()) + "},";
child += "{ id:" + -item.ID + ", pId:" + FID + ", name:\"" + item.Name + "\", open:true,iconSkin:\"icon01\"" + GetChecked(item.ID.ToString()) + "},";
}
//
return child;
}

GetChild

(7)、在权限分配之前,先检查这个权限是否有复选框的勾选。

        //判断是否有权限 有复选框 勾选
private string GetChecked(string FID)
{
StringBuilder list = new StringBuilder();
foreach (var item in limits)
{
list.Append(item.ToString() + ",");
}
if (list != null)
{
if (Convert.ToInt32(FID).In(limits) == true)
return ",checked:true";
}
return string.Empty;
}
#endregion

GetChecked

(8)、前台View:1、判断前面的复选框是否有一个为选中,否则提示。2、遍历选中的复选框的节点,把选中的ID,用,分割。3、Ajax的方式传递到后台进行权限的分配。4、分配成功之后,关闭分配权限的页面。导向用户管理页面。5、注意:是使用@Html.Raw(ViewData["tree"].ToString())的方式渲染出来的树。

@{
ViewBag.Title = "ZTreeList";
Layout = "~/Areas/houtai/Views/Shared/_JS.cshtml";
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ZTree权限分配(田鑫)</title>
</head>
<body>
<link href="@Url.Content("~/zTree/css/zTreeStyle/zTreeStyle.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/zTree/js/jquery.ztree.core-3.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/zTree/js/jquery.ztree.excheck-3.1.js")" type="text/javascript"></script>
<script language="javascript">
$(function () {
$("#Canel").click(function () {
window.parent.afterSetRole();
});
$("#submit").click(function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = zTree.getCheckedNodes(true);
if (nodes.length == ) {
alert("请至少选择一项");
return false;
}
var Fid="";
for (var i = ; i < nodes.length; i++) {
Fid += nodes[i].id+",";
}
$.ajax({
type: 'post',
url: "@Url.Action("SetPrivilige","Privilige")",
data: "UID=@ViewData["uid"]&LimitID="+Fid,
success: function (data) {
if (data=="Yes") {
alert("分配权限成功!");
window.parent.afterSetRole();
}
},
error: function (error) {
alert("失败");
window.parent.afterSetRole();
}
})
});
});
</script> <input type="button" value="保存权限" id="submit" />&nbsp;&nbsp;<input type="button" value="返 回" id="Canel"" />
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
@Html.Raw(ViewData["tree"].ToString())
</body>
</html>

View部分

(9)、点击“保存权限”按钮,弹出“分配权限成功”,点击“确定“,关闭页面,导向”用户管理“的页面。

(10)、导向”用户管理“页面!

三、总结:

如果对您有一些帮助的话,请您继续关注这个系列的内容吧,下面的“推荐”,也可以让更多的朋友来了解。

“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第五篇(用户管理之“用户权限分配”)的更多相关文章

  1. “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇(图片新闻的添加以及带分页的静态页的生成)

    “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇(图片新闻的添加以及带分页的静态页的生成) 一.这篇文章主要是要实现:图片新闻的添加,无刷新图片的上传,以及添加新闻静 ...

  2. “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇(用户管理功能的实现)

    “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇(用户管理功能的实现) 一.前三篇的内容是否对您有帮助呢?如果有的话,请您继续关注这篇吧,这篇主要是实现”用户管理“的 ...

  3. “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第三篇(登录窗口的实现以及如何保存登录者的信息)

    一.前言: 1.再看这篇文章的时候,您是否已经完成前两篇介绍的文章里的功能了?(Tabs页的添加,Tabs页右键的关闭,主题的更换)                 2.今天来说说登录窗口吧,看截图: ...

  4. MVC+Nhibernate+jquery+easyui递归实现多级菜单

    1.新建访问的控制器动作返回视图,在视图中使用easyui的treegrid插件来得到后台得到的json数据显示多级菜单 public ActionResult Menu() { return Vie ...

  5. 完成一个MVC+Nhibernate+Jquery-EasyUI信息发布系统

    一.最近学习了Jquery-EasyUI框架,结合之前用过的MVC3+Nhibernate做一个信息发布系统,对工作一年半的自己做一个总结吧!(也正好 供初学者学习!) 二.先上截图(系统简介),让大 ...

  6. “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构、登录窗口、以及主界面)

    “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...

  7. 年底小回顾(MVC+NHibernate+Jquery+JqueryUI——网站)

    1.附:利用MVC+NHibernate+Jquery+JqueryUI这些技术可以做出一个比较好的前台+后台网站.下面是本人对这些技术的笔记,作为私人年底小结吧.呵呵 好久没写文章了,感觉下不了笔吐 ...

  8. “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构、登录窗口、以及主界面)

    一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增删改查的地步.测试好之后再来看这篇文章,我的主框架相对来说简答一点,重点还是实现系统的功能,以及对Jquery-Eas ...

  9. “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第一篇

    一.第一篇内容中必须得简单的介绍一下MVC(在大学时用的是WebForm,拖控件感觉很爽,但是工作后,技术总监让一定要放弃这种 想法!) 1.MVC是什么?:(1) ASP.NET MVC是微软官方提 ...

随机推荐

  1. POJ 2536 之 Gopher II(二分图最大匹配)

    Gopher II Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 6675   Accepted: 2732 Descrip ...

  2. 【JavaScript学习整理】DOM对象(location history screen navigator)

    DOM: 描述网页各个组成部分之间的关系. parentNode: 父节点 childNode: 子节点 firstChild: 第一个子节点 lastChild: 最后一个子节点 nextSibli ...

  3. eclipse从Git获取项目更新

    1.项目上右键 ——> Team ——> pull   如果报错:   解决方法:   依次打开:Window ——> Preferences ——> Team ——> ...

  4. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  5. 聊聊js跨域

    推荐先读一下这篇文章: https://segmentfault.com/a/1190000012469713http://www.dailichun.com/2017/03/22/ajaxCross ...

  6. Cookie是以文本文件保存在客户端的,所以说cookie对象从本质而言是 字符串,所以取值时用字符串,或其数组

  7. cocos2dx & cocostudio 实现模态对话框

    用cocos2dx实现模态对话框 http://www.cnblogs.com/mrblue/(转自于) ui部分使用了cocoStudio,注意这里没有实现怎么屏蔽其他的输入事件,其他的文档已经太多 ...

  8. P1731 生日蛋糕

    题目背景 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层 生日蛋糕,每层都是一个圆柱体. 设从下往上数第i(1<=i<=M)层蛋糕是半径为Ri, 高度为Hi的圆柱 ...

  9. 洛谷P4721 【模板】分治 FFT(生成函数+多项式求逆)

    传送门 我是用多项式求逆做的因为分治FFT看不懂…… upd:分治FFT的看这里 话说这个万恶的生成函数到底是什么东西…… 我们令$F(x)=\sum_{i=0}^\infty f_ix^i,G(x) ...

  10. debian服务查询

    1.查询 用root身份执行service --status-all查看所有服务的状态 "+" started "-" stopped "?" ...