用户角色权限管理系统—–java web 脚手架搭建(一)

项目地址

JavaEEScaffold
用户名：admin
密码：1111

项目介绍

• 在开发中经常会遇到需要设计不同用户的权限，为了方便使用，这个通用java web开发的框架就诞生了。本项目参考了开涛的blog中介绍的一些技术，如shiro，es项目。
• 该项目实现了对用户的管理，角色管理，资源(权限)管理，以及对用户进行分配角色，对角色分配资源(权限)。
• 采用shiro来做权限验证，采用Druid来做数据库的监控
• 基本框架spring+springmvc+spring-jpa，几乎用的都是spring。
• 前端还是使用的jsp页面

项目预览

• 用户管理界面
  
• 上传用户
  
• 角色管理界面
  
• 绑定资源
  
• 资源管理界面
  

技术选型

• 容器框架:spring
• mvc:spring mvc
• 持久层:spring data jpa+hibernate jpa
• 数据库:mysql
• 数据库连接池、监控:druid
• 安全框架:shiro
• 前端:bootstrap，ZTree，Jquery，主题采用adminLTE
• json框架：fastjson
• 数据校验框架：jquery-validate
• 日志系统：门面slf4j,实现log4j
• 代码构建工具：gradle
• 版本控制：git
• excel解析:jxl

功能设计

• 实现用户角色权限管理(基于资源(权限)的角色管理)✔
• 系统监控日志 druid的监控功能,github上有文档 ✔
• 根据用户拥有的资源动态生成侧边栏（即资源(权限),只使用单层目录）✔
• java mail

  权限管理系统中的根据用户角色动态生成用户权限菜单树

 

源码地址 https://github.com/dabai-cai/thesis

       暑假在工作室学习了基于RBAC的权限管理系统，学的比较浅显，记录下方便以后学习可以看。

        一、首先讲讲我对RBAC的理解

             关系：用户->角色->权限。

             可以看到角色是在中间的，所以说是基于角色的。

             1.1说说用户和角色的关系

             首先假设我们每个人都有一个CSDN账号，那么现在我们就都是CSDN网站的用户了是吧，用户有了，接下来解决关系链中的角色问题：我们都知道VIP概念是吧，我们注册了CSDN账号，就是拥有普通用户身份（角色），这个时候我们要去下载CSDN网站上面的资源（代码），可能就要积分了，因为你只是普通用户，然后你感觉不爽麻烦，充钱买了CSDN会员，这个时候下载就免积分了（爽），那CSDN是怎么判断你是会员的呢（if(user.equals(“会员”)）,开玩笑的。

              问个问题，冲了会员后你有几个身份？（身份=角色）

              答案是两个：普通用户+会员用户，也就是说普通用户可以做的东西（比如写博客）你也能做，会员可以做的你也有权利（比如免积分下载资源）,说了这么多只是想说明用户可以拥有多个角色。 

 

             1.2说说角色和权限的关系

              上面说到你现在是会员了（牛批牛批），会员就可以为所欲为了嘛，我们冲过微博会员什么的就知道，冲了会员就应该让别人知道老子是会员（不然冲来干嘛，肯定要装一下逼啊，不然人生多无趣），好了会员可以换皮肤，让你头像发出金色光芒（24K），免积分下载这么多功能，这是普通会员没有的（他们只能写博客），所以一个角色（这里是会员，当然普通用户也是一个角色）拥有了多个权限。

             1.3把用户和权限对应起来

             你是会员，CSDN是怎么知道的呢，总不能是设置level=0(普通），level=1(会员），if(level==0)if(level==1)这样来吧，这样系统大点就累死你，显然行不通，我们回到RBAC,用户->角色->权限,这个关系链上面来，合理的做法是我们会给用户分配多个不同的角色，在这里比如冲会员，就是分一个会员的角色给你了嘛（你牛批），然后每个角色都拥有不同的权限，我们拥有了角色，就可以拥有角色下面的权限，比如你会员嘛，那你就有换皮肤、免积分下载的权限了嘛，原理就是用户登录了，通过检索出用户拥有的角色（你是普通用户和会员），再通过这些角色检索出角色拥有的权限（普通用户：写博客；会员：换皮肤，下载免积分），这样就得到了用户拥有的权限（写博客，换皮肤，下载免积分），也是RBAC的基本原理，基于角色的。

      二、取出用户权限菜单树

      上面讲到用户->角色->权限，其实我们作为管理员，要想在后台动态分配菜单给用户，还需要一个叫资源的东西，Resource，不管你怎么叫，这个资源也是我们用户可以看到的菜单，也就是可以点的链接，这个菜单是管理员分配给我们的，我们看下实现图

                        

        

         右边两个箭头就是所谓的分配菜单，管理员分配给你了这个菜单（权限）,你登录之后才能看得到对应的菜单，不然你一点权限都没有，也就看不到功能菜单了，也就是左边箭头的菜单。我们作为开发者，也就是后台的超级管理员，为了方便我们操作，也就是和上图一样，打个勾就是给角色分配权限了（前端用户看到的菜单），我们就需要

Resource（资源）,也就是图中的一条条菜单选项。

         那么问题来了，上图中右边的都是权限（资源），既是分配权限，又是分配资源，

我们就要把权限和资源关联起来，可以使用关联表或者外键，这样我们就可以通过资源，看到所谓的权限了，所以资源是为了让我们方便实现，操作权限。

 

        为了加深理解我们再看看资源的设计

        

       如图，我们可以看到每个小资源对应每个URL

       问题来了，权限和资源的关系呢，回答前我想问下，什么是权限呢

       举个栗子，就是比如你进入一个界面，里面有几个按钮，添加，删除，更改，查询

       这些按钮就是你的权限了，可是这些按钮都在一个页面上面（对应某个URL），

       所以很明确了，一个资源对应多个权限，资源只是方便我们实现了操作，可以说权限和缥缈虚无，我们看不到，那么就用资源（一个个菜单链接）来代替，使用户可以看到操作.

      

      一个资源对应多个权限，我们看下图

      

 

       可以看到，一个资源（菜单链接）对应多个权限。

 

      最后，整理思路，用户登录之后，我们检索用户拥有的角色，再根据角色检索出权限（这些我们可以用中间表来对应关系，方便检索），这个时候我们就检索出了用户的所有权限，是时候动态生成菜单树了，拥有了权限，还需要检索出对应的资源，同样我们可以用中间表或者外键实现。

     我贴一段生成资源树的代码。它的思路就是把资源树的节点全部检索出来，并且检索出每个节点的子节点，这样我们实现Resource.getSub就可以知道这个节点下面还有哪些菜单选项了，最后返回第二层的所有父节点给前端，我们就可以从上往下递归生成所有的菜单链接。

   后端代码

   

    /**
     * 生成用户的资源权限的树结构
     * @return
     * @throws Exception
     */
    public List getUserPermTree(User currentUser)throws Exception{
        log.info("===生成用户的资源权限的树结构===");
        List result = new ArrayList<>();
        //权限数据预处理
        Map> permMap = new HashMap<>(50);
        List roles=userMapper.getRoles(currentUser.getId());//获取用户所有角色
        List perms=new ArrayList<>();//获取用户所有权限
        for(Role role:roles){
            List temp=permissionMapper.listByRole(role.getId());
            perms.addAll(temp);
        }

        perms.forEach(p -> {
            if(!permMap.containsKey(p.getResid()))
                permMap.put(p.getResid(), new ArrayList<>());
            permMap.get(p.getResid()).add(p);
        });


        //资源数据处理
        Map resourceMap = new TreeMap<>();
        Set rids=new HashSet<>();
        for(Permission permission:perms){//根据权限获取资源id列表
            rids.add(permission.getResid());
        }
        CopyOnWriteArrayList resources=resourceMapper.listByids(rids);
        for(Resource resource:resources){
            getFRes(resource,resources);//寻找资源的父节点(菜单头)
        }


        resources.forEach(r -> {
            //将权限与资源关联起来
            if(permMap.containsKey(r.getId())){
                r.setPerms(permMap.get(r.getId()));
            }
            //清除缓存带来的影响
            r.getSub().clear();

            resourceMap.put(r.getId(), r);



            if(r.getPid() == null || r.getPid() == 1){
                result.add(r);
            }
        });

        //再一次循环构建资源的父子关系
        resources.forEach(r -> {
            if(r.getPid() != null  && resourceMap.containsKey(r.getPid())){
                Resource resource = resourceMap.get(r.getPid());
                resource.getSub().add(r);
            }
        });
        return result;
    }

    private void getFRes(Resource resource,List resources){
        if(resource.getPid()!=null||resource.getPid()!=1){
            Resource father=resourceMapper.selectByPrimaryKey(resource.getPid());
            if(father!=null&&!father.getName().equals("root")){
                if(!resources.contains(father)){
                    resources.add(father);
                }
                getFRes(father,resources);
            }else{
                return;
            }

        }else{
            return;
        }
    } getUserPermTree(User currentUser)throws Exception{
        log.info("===生成用户的资源权限的树结构===");
        List result = new ArrayList<>();
        //权限数据预处理
        Map> permMap = new HashMap<>(50);
        List roles=userMapper.getRoles(currentUser.getId());//获取用户所有角色
        List perms=new ArrayList<>();//获取用户所有权限
        for(Role role:roles){
            List temp=permissionMapper.listByRole(role.getId());
            perms.addAll(temp);
        }

        perms.forEach(p -> {
            if(!permMap.containsKey(p.getResid()))
                permMap.put(p.getResid(), new ArrayList<>());
            permMap.get(p.getResid()).add(p);
        });


        //资源数据处理
        Map resourceMap = new TreeMap<>();
        Set rids=new HashSet<>();
        for(Permission permission:perms){//根据权限获取资源id列表
            rids.add(permission.getResid());
        }
        CopyOnWriteArrayList resources=resourceMapper.listByids(rids);
        for(Resource resource:resources){
            getFRes(resource,resources);//寻找资源的父节点(菜单头)
        }


        resources.forEach(r -> {
            //将权限与资源关联起来
            if(permMap.containsKey(r.getId())){
                r.setPerms(permMap.get(r.getId()));
            }
            //清除缓存带来的影响
            r.getSub().clear();

            resourceMap.put(r.getId(), r);



            if(r.getPid() == null || r.getPid() == 1){
                result.add(r);
            }
        });

        //再一次循环构建资源的父子关系
        resources.forEach(r -> {
            if(r.getPid() != null  && resourceMap.containsKey(r.getPid())){
                Resource resource = resourceMap.get(r.getPid());
                resource.getSub().add(r);
            }
        });
        return result;
    }

    private void getFRes(Resource resource,List resources){
        if(resource.getPid()!=null||resource.getPid()!=1){
            Resource father=resourceMapper.selectByPrimaryKey(resource.getPid());
            if(father!=null&&!father.getName().equals("root")){
                if(!resources.contains(father)){
                    resources.add(father);
                }
                getFRes(father,resources);
            }else{
                return;
            }

        }else{
            return;
        }
    }

 

  前端代码（我这里用的是easyui前端框架）

 

 

${subMenu.name}

 

${subMenu.name}

•  
• ${sub.name}

 

 

  

       

 

该项目主要是完成用户权限系统的开发，该系统分为登陆、用户管理、角色管理和菜单管理4个模块。
分别在登陆模块实现了简单的登陆功能；用户管理模块实现了用户的增加、删除、修改、查看信息、用户角色分配等功能；角色管理模块实现了角色的新增、修改和删除，对应角色的权限查看，重新给各个角色分配功能等功能；菜单管理模块实现了菜单的增删改功能。
本项目结构上分为表现层、业务层和数据访问层。层次间的依赖关系自下到上。采用的技术有三层架构、Jquery 等。其中表现层采用easyui框架开发；业务层封装业务流程，为适应业务的变更，每一业务模块均有专门的接口及实现类，数据访问层封装数据，为适应数据的变更，每个模块均有专门的接口及实现类。

1、功能一

1.1、功能名称

系统登录功能

1.2、客户端界面及描述

登陆界面如图1所示。

图1登陆界面

登录按钮功能描述：

1. 判断用户名密码是否输入 是：继续，否：return；
2. 获取用户名密码，使用ajax提交服务器端C#进行验证，并返回验证结果；
3. 客户端通过ajax回调函数获取服务端的验证结果，成功：页面跳转Main.aspx； 否则提示登录失败信息。

1.3、客户端主要核心脚本

<script>

        $(function () {

            $('#btnOK').click(function () {

                var usercode = $('#usercode').val();

                var pwd = $('#pwd').val();

                $.ajax({

                    type: 'post',

                    url: "Login.aspx?action=login",

                    data: { usercode: usercode, pwd: pwd },

                    //contentType: 'application/json',

                    dataType: 'json',

                    success: function (data) {

                        if (data.isSuccessed) {

                            location.href = "Main.aspx";

                        }

                        else

                            alert(data.Message);

                    },

                    error: function (xmlReq, err, c) {

                        alert("error:" + err);

                    }

                });

            })

        })

    </script>

1.4、服务器端代码

private void CheckLogin()

    {

        string usercode = Request["usercode"];

        string pwd = Request["pwd"];

        SYSTEM.BLL.sysuser bll = new SYSTEM.BLL.sysuser();

        var user = bll.GetModel(usercode);

        if (user != null)

        {

            if (user.pwd == pwd)

            {

                Session["username"] =user.username.ToString();  //记录当前用户在session 里面

                WriteMessage(true, "登陆成功");

            }

            else

            {

                WriteMessage(false, "登陆失败");

            }

        }

        else

        {

            WriteMessage(false, "登陆失败");

        }

    }

2、功能二

2.1、功能名称

用户管理功能

2.2、客户端界面及描述

用户管理主界面如图2所示，增加用户如图3所示，修改用户如图4所示，用户角色分配如图5所示。

图2用户管理主界面

用户管理主界面描述：点击左边系统设置的用户管理按钮，进入主界面，查看所有用户信息。

图3新增用户

新增用户功能描述：点击右边界面的新增按钮，弹出新增数据界面，对用户进行增加操作。点击弹出窗口中的确定，即可增加成功；如果点击关闭，即可取消添加。

图4修改用户

修改用户功能描述：点击右边界面的修改按钮，弹出修改数据界面，对用户进行修改操作。点击弹出窗口中的确定，即可修改成功；如果点击关闭，即可取消修改。

图5用户角色分配

用户角色分配功能描述：点击右边界面的用户角色按钮，弹出角色数据界面，对用户进行角色分配操作。点击弹出窗口中的确定，即可完成角色分配；如果点击关闭，即可取消分配。

2.3、客户端主要核心脚本

2.3.1用户管理主界面

  function loaddata() {

                $("#dg").datagrid({

                    url: "userlist.aspx?action=select",//加载的URL  

                    isField: "usercode",

                    pagination: true,//显示分页  

                    pageSize: 5,//分页大小  

                    pageList: [5, 10, 15, 20],//每页的个数  

                    fit: true,//自动补全  

                    fitColumns: true,

                    toolbar: '#tb',

                    sortName: 'usercode',

                    queryParams: {},//condition(),

                    singleSelect: true,

                    //iconCls: "icon-save",//图标  

                    //title: "用户管理",

                    columns: [[      //每个列具体内容  

                              { field: 'usercode', title: '用户名', width: 100, sortable: true },

                              { field: 'username', title: '姓名', width: 100, sortable: true },

                              {

                                  field: 'pwd', title: '密码', width: 100,

                                  formatter: function (value, row, index) {

                                      return '******';

                                  }

                              },

                              { field: 'cmt', title: '备注' }

                    ]]

                })

            }

2.3.1增加用户

   $('#btnAdd').click(function () {

                $('#w').dialog({

                    title: '新增数据',

                    width: 400,

                    height: 200,

                    closed: false,

                    cache: false,

                    href: 'useredit.aspx',

                    modal: true,

                    buttons: [{

                        text: '确定',

                        iconCls: 'icon-ok',

                        handler: function () {

                            //数据保存代码                            

                            $('#ff').form('submit', {

                                url: "useredit.aspx?action=addrecord",    //表单提交地址 并带参数

                                onSubmit: function () {

                                    return $(this).form('validate');  //验证表单是否通过验证规则

                                },

                                success: function (returndata) {

                                    var obj = eval("(" + returndata + ")")

                                    if (obj.isSuccessed) {

                                        $('#dg').datagrid('reload');   //刷新数据表格datagrid

                                        $('#w').dialog('close');    //关闭弹出新增窗口

                                        $.messager.show({

                                            title: '提示',

                                            msg: obj.Message,

                                            timeout: 2000,

                                            showType: 'show'

                                        });

                                    }

                                    else {

                                        alert('保存失败！');

                                    }

                                }

                            });

                        }

                    }, {

                        text: '关闭',

                        iconCls: 'icon-delete',

                        handler: function () {

                            $('#w').dialog('close');                     //关闭弹出新增窗口

                        }

                    }]

                });

            });

2.3.1修改用户

  $('#btnEdit').click(function () {

                var row = $('#dg').datagrid('getSelected');

                if (row == null) {

                    $.messager.show({

                        title: '提示',

                        msg: '请选择您要编辑的数据.',

                        timeout: 2000,

                        showType: 'slide'

                    });

                    return;

                }

 

                $('#w').dialog({

                    title: '修改数据',

                    width: 400,

                    height: 200,

                    closed: false,

                    cache: false,

                    href: 'useredit.aspx?action=update&id=' + row.usercode,

                    modal: true,

                    buttons: [{

                        text: '确定',

                        iconCls: 'icon-ok',

                        handler: function () {

                            //数据保存代码                            

                            $('#ff').form('submit', {

                                url: "useredit.aspx?action=updaterecord&id=" + row.usercode,    //表单提交地址 并带参数

                                onSubmit: function () {

                                    return $(this).form('validate');  //验证表单是否通过验证规则

                                },

                                success: function (returndata) {

                                    var obj = eval("(" + returndata + ")")

                                    if (obj.isSuccessed) {

                                        $('#dg').datagrid('reload');   //刷新数据表格datagrid

                                        $('#w').dialog('close');    //关闭弹出新增窗口

                                        $.messager.show({

                                            title: '提示',

                                            msg: obj.Message,

                                            timeout: 2000,

                                            showType: 'show'

                                        });

                                    }

                                    else {

                                        alert('保存失败！');

                                    }

                                }

                            });

                        }

                    }, {

                        text: '关闭',

                        iconCls: 'icon-delete',

                        handler: function () {

                            $('#w').dialog('close');                     //关闭弹出新增窗口

                        }

                    }]

                });

            });

2.3.1删除用户

    $('#btnDel').click(function () {

                var row = $('#dg').datagrid('getSelected');

                if (row == null) {

                    $.messager.show({

                        title: '提示',

                        msg: '请选择您要删除的数据.',

                        timeout: 2000,

                        showType: 'slide'

                    });

                    return;

                }

                $.ajax({

                    url: 'useredit.aspx?action=delete&id=' + row.usercode,

                    success: function (data) {

                      

                        if (data.isSuccessed) {

                            $('#dg').datagrid('reload');   //刷新数据表格datagrid

 

                            $.messager.show({

                                title: '提示',

                                msg: data.Message,

                                timeout: 2000,

                                showType: 'show'

                            });

                        }

                        else {

                            alert('删除失败！');

                        }

                    }

 

                })

 

            });

2.3.1用户角色分配

  $('#btnrole').click(function () {

                var row = $('#dg').datagrid('getSelected');

                if (row == null) {

                    $.messager.show({

                        title: '提示',

                        msg: '请选择您要分配角色的用户.',

                        timeout: 2000,

                        showType: 'slide'

                    });

                    return;

                }

                $('#w').dialog({

                    title: '角色数据',

                    width: 400,

                    height: 200,

                    closed: false,

                    cache: false,

                    href: 'userrolelist.aspx?action=choose&id=' + row.usercode,

                    modal: true,

                    buttons: [{

                        text: '确定',

                        iconCls: 'icon-ok',

                        handler: function () {

                            var rolerow = $('#dgrole').datagrid('getSelected');

 

                            $.ajax({

                                type: "GET",

                                url: "userrolelist.aspx?action=save",                                    data: { usercode: row.usercode, roleid: rolerow.roleid },

                                                              success: function (returndata) {

                                    var obj = eval("(" + returndata + ")");

                                    if (obj.isSuccessed) {

                                        $('#w').dialog('close');

                                    }

                                    else { }

                                }

                            });

                        }

                    }, {

                        text: '关闭',

                        iconCls: 'icon-delete',

                        handler: function () {

                            $('#w').dialog('close');                     //关闭弹出新增窗口

                        }

                    }]

                });

            });

2.4、服务器端代码

  private void GetList()

    {

            int pageindex = int.Parse(Request.Form["page"]);

            int pagesize = int.Parse(Request.Form["rows"]);

            string sort = Request.Form["sort"];

            string order = Request.Form["order"];

            string value = Request.Form["value"];

            SYSTEM.BLL.sysuser bll = new SYSTEM.BLL.sysuser();

            DataTable dt = new DataTable();

            ResultData data = new ResultData();

            string strOrder = "";

            if(!string.IsNullOrEmpty(sort))

            {

                strOrder = sort + " " + order;

            }

            string strWhere = "";

            if (!string.IsNullOrEmpty(value))

            {

                strWhere = string.Format(" usercode like '%{0}%' or username like '%{0}%'", value);

            }

            data.total = bll.GetRecordCount(strWhere);

            data.rows = bll.GetListByPage(strWhere, strOrder, (pageindex - 1) * pagesize + 1, pageindex * pagesize).Tables[0];

            WriteData(Newtonsoft.Json.JsonConvert.SerializeObject(data));

        }      

 private void Save()

    {     

        model.usercode = Request.Form["usercode"];

        model.username = Request.Form["username"];

        model.cmt = Request.Form["cmt"];

        model.pwd = Request.Form["pwd"];

        if (blluser.Add(model))

        {

            WriteMessage(true, "添加成功");

        }

        else

        {

            WriteMessage(false, "添加失败");

        }      

    }

    private void GetOne()

    {

        SYSTEM.Model.sysuser model = blluser.GetModel(Request["id"].ToString());

 

        WriteData(Newtonsoft.Json.JsonConvert.SerializeObject(model));       

    }

    private void Update()

    {

        //新建对象

        SYSTEM.Model.sysuser model = blluser.GetModel(Request["id"].ToString());       

        model.username = Request.Form["username"].ToString();

        model.cmt = Request.Form["cmt"].ToString();

        if (blluser.Update(model))

        {

            WriteMessage(true, "修改成功！");   //响应，向前端传送数据

        }

        else

        {

            WriteMessage(false, "修改失败！");

        }       

    }

    private void Delete()

    {

        if (blluser.Delete(Request["id"].ToString()))

        {

            WriteMessage(true, "删除成功！");   //响应，向前端传送数据

        }

        else

        {

            WriteMessage(false, "删除失败！");

        }

    }

3、功能三

3.1、功能名称

角色管理功能

3.2、客户端界面及描述

角色权限查看如图6所示，角色权限保存如图7所示。

图6角色权限查看

角色权限查看功能描述：点击查看，即可查看各个角色的对应权限。

图7角色权限保存

角色权限保存功能描述：先选择一个角色，再在功能中选择功能，点击保存。再点击查看，即可添加角色对应的功能。

3.3、客户端主要核心脚本

 function loadtreedata() {

            $('#tg').treegrid({

                title: '系统功能列表',

                fit: true,

                animate: true,//是否用动画效果

                collapsible: false,//是否可折叠

                //pagination: true,//分页控件

                rownumbers: true,//行号

                //fitColumns: true,

                url: 'rolelist.aspx?action=menuselect',

                method: 'get',

                toolbar: '#menutb',

                idField: 'id',//根据那个字段判断树节点关系

                treeField: 'funname',//根据那个列展现树

                showFooter: false,//是否使用页脚

                sortName: 'funid',//默认排序字段,后台通过参数名“sort”获取

 

                singleSelect: false,

                //sortOrder: 'desc',//默认排序规则，后台通过参数名“order”获取

                columns: [[

                    { title: '', field: 'funid', hidden: true },

                    { title: '功能', field: 'funname', width: 220, sortable: true },

                    { title: '地址', field: 'url', width: 150, sortable: true },

                    { title: '图标', field: 'icno', width: 80 },

                    { title: '备注', field: 'cmt', width: 100, sortable: true }

 

                ]],

                onBeforeExpand: function (node) {

                },

                onLoadSuccess: function () {

                },

                onClickRow: function (node) {

                    //点击行触发

                },

                onClickCell: function (rowIndex, field, value) {//点击表格触发

                }

            });

        }

 

 function loaddata() {

            $("#dg").datagrid({

                url: "rolelist.aspx?action=select",//加载的URL  

                isField: "roleid",

                pagination: true,//显示分页  

                pageSize: 5,//分页大小  

                pageList: [5, 10, 15, 20],//每页的个数  

                fit: true,//自动补全  

                fitColumns: true,

                toolbar: '#tb',

                sortName: 'roleid',

                queryParams: {},//condition(),

                singleSelect: true,

                //iconCls: "icon-save",//图标  

                //title: "用户管理",

                columns: [[      //每个列具体内容  

                          { field: 'roleid', title: '', hidden: true },

                          { field: 'rolename', title: '角色名称', width: 200, sortable: true },

 

                          { field: 'cmt', title: '备注', width: 500 },

                          {

                              field: 'right', title: '权限',

                              formatter: function (value, row, index) {

                                  return '<a href="#" οnclick="ShowMenu(' + row.roleid + ')">查看</a>';

                              }

                          },

                ]]

            })

        }

  $('#btnSaveMenu').on('click', function () {

                var row = $('#dg').datagrid('getSelected');

                if (row == null) {

                    $.messager.show({

                        title: '提示',

                        msg: '请选择你要分配功能的角色.',

                        timeout: 2000,

                        showType: 'slide'

                    });

                    return;

                }

 

                var newfunids = [];

                var rows = $('#tg').treegrid('getSelections');

                for (i = 0 ; i < rows.length; i++) {

                    newfunids.push(rows[i].id);

                }

 

                $.ajax({

                    url: 'rolelist.aspx?action=savemenu&id=' + row.roleid,

                    type: 'post',

                    data: JSON.stringify(newfunids),

                    success: function (data) {

                        var obj = eval("(" + data + ")")

                        if (obj.isSuccessed) {

                            $('#tg').datagrid('reload');   //刷新数据表格datagrid

 

                            $.messager.show({

                                title: '提示',

                                msg: obj.Message,

                                timeout: 2000,

                                showType: 'show'

                            });

                        }

                        else {

                            alert('保存失败！');

                        }

                    }

 

                })

 

            });

3.4、服务器端代码

  private void SaveMenu()

        {

            SYSTEM.BLL.sysrolefun bll = new SYSTEM.BLL.sysrolefun();

            string id = Request["id"].ToString();

            foreach(var m in  bll.GetModelList(string.Format(" roleid = {0}", id)))

            {

                bll.Delete(m.id);

            }

 

            string[] strarr = HttpUtility.UrlDecode(Request.Form.ToString()).Replace("]", "").Replace("[", "").Split(',');

 

            foreach(var funid in strarr)

            {

                var mm = new SYSTEM.Model.sysrolefun();

                mm.funid = decimal.Parse(funid);

                mm.roleid = decimal.Parse(id);

                bll.Add(mm);

            }

 

            WriteMessage(true, "OK！");

 

           

        }

4、功能四

4.1、功能名称

菜单管理功能

4.2、客户端界面及描述

菜单管理主界面如图8所示，新增菜单如图9所示，修改菜单如图10所示。

 

图8菜单管理主界面

菜单管理主界面描述：点击左边的菜单管理按钮，打开如上图所示的界面。对菜单的相关信息进行管理。

图9增加菜单

增加菜单功能描述：点击页面的新增按钮，弹出新增数据界面，对需要的菜单进行添加。点击确定，即可完成添加；点击关闭，添加取消。

图10修改菜单

修改菜单功能描述：点击页面的修改按钮，弹出修改数据界面，对需要的菜单进行修改。点击确定，即可完成修改；点击关闭，修改取消。

4.3、客户端主要核心脚本

function loaddata() {

            $('#tg').treegrid({

                title: '',

                fit: true,

                animate: true,//是否用动画效果

                collapsible: false,//是否可折叠

                //pagination: true,//分页控件

                rownumbers: true,//行号

                //fitColumns: true,

                url: 'menulist.aspx?action=select',

                method: 'get',

                toolbar: '#tb',

                idField: 'id',//根据那个字段判断树节点关系

                treeField: 'funname',//根据那个列展现树

                showFooter: false,//是否使用页脚

                sortName: 'funid',//默认排序字段,后台通过参数名“sort”获取

                //sortOrder: 'desc',//默认排序规则，后台通过参数名“order”获取

                columns: [[

                    { title: '功能', field: 'funname', width: 220, sortable: true },

                    { title: '地址', field: 'url', width: 150, sortable: true },

                    { title: '图标', field: 'icno', width: 80 },

                    { title: '备注', field: 'cmt', width: 100, sortable: true }

 

                ]],

                onBeforeExpand: function (node) {

                },

                onLoadSuccess: function () {

                },

                onClickRow: function (node) {

                    //点击行触发

                },

                onClickCell: function (rowIndex, field, value) {//点击表格触发

                }

            });

        }

<script>

        //获取当前窗口的操作类型

        var action = '<% =action%>';

        var id = '<% =id%>';

        $(function () {

            loadform();  //如果是编辑进入，需要加载编辑数据

            $('#pid').combobox({

                url:'menuedit.aspx?action=combobox',

                valueField:'funid',

                textField:'funname'

            });

            //$('#cc').combotree({

            //    url: 'get_data.php',

            //    required: true

            //});

        })

 

        function loadform() {

            if (action == 'update') {

                $.ajax({

                    url: 'menuedit.aspx?action=getrecord&id=' + id,

                    success: function (data) {

                        data = eval('(' + data + ')');

                        $('#ff').form('load', data);

                    }

 

                })

            }

        }

    </script>

 

4.4、服务器端代码

  private void GetTreeList()

        {

            SYSTEM.BLL.sysfunction bll = new SYSTEM.BLL.sysfunction();

            DataTable dt = new DataTable();

            ResultData data = new ResultData();

          

 

            data.total = bll.GetRecordCount("");

            data.rows = bll.GetTreeList("").Tables[0];

            WriteData(Newtonsoft.Json.JsonConvert.SerializeObject(data));

        }