基于easyUI实现权限管理系统（四）—

一. 相关文件介绍

　　1. user.jsp：用户管理界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>

 <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>用户管理</title>

    <%@ include file="/common/head.jsp"%>

    <style type="text/css">

        div#navigation{background:white}

        div#wrapper{float:right;width:100%;margin-left:-185px}

        div#content{margin-left:185px}

        div#navigation{float:left;width:180px}

        .datagrid-cell a{color:black;}

        .datagrid-cell a:hover{color:red;}

    </style>

 </head>

 <body>

     <div id="container">

        <div id="wrapper">

            <div id="content">

                <div class="toolbar">

                    <a href="#" plain="true" class="easyui-linkbutton" icon="icon-arrow_refresh" title="刷新" data-bind="click:refreshClick">刷新</a>

                    <a href="#" plain="true" class="easyui-linkbutton" icon="icon-add" title="新增" data-bind="click:addClick">新增</a>

                    <a href="#" plain="true" class="easyui-linkbutton" icon="icon-edit" data-bind="click:editClick" title="编辑">编辑</a>

                    <a href="#" plain="true" class="easyui-linkbutton" icon="icon-cross" title="删除" data-bind="click:deleteClick">删除</a>

                    <a href="#" plain="true" class="easyui-linkbutton" icon="icon-save" data-bind="click:saveClick" title="保存">保存</a>

                    <a href="#" plain="true" class="easyui-linkbutton" icon="icon-key" data-bind="click:passwordClick" title="重置密码">重置密码</a>

                </div>

                <table id="gridlist" data-bind="datagrid:grid">

                     <thead>

                        <tr>

                            <th field="id"  hidden="true"></th>

                            <th field="userCode"            sortable="true" align="left"    width="70"  editor="{type:'validatebox',options:{required:true}}"  >用户编码   </th>

                            <th field="userName"            sortable="true" align="left"    width="80"  editor="{type:'validatebox',options:{required:true}}"  >用户名称     </th>

                            <th field="emailAddr"            sortable="true" align="left"    width="80"  editor="{type:'validatebox',options:{required:true}}"  >邮箱地址     </th>

                            <th field="phoneNum"            sortable="true" align="left"    width="80"  editor="{type:'validatebox',options:{required:true}}"  >联系号码     </th>

                            <th field="description"         sortable="true" align="left"    width="180" editor="text"  >描述说明   </th>

                            <th field="isEnable"            sortable="true" align="center"    width="70" formatter="com.formatCheckbox"  editor="{type:'checkbox',options:{on:1,off:0}}">是否启用   </th>

                            <th field="loginCount"          sortable="true" align="right"    width="60" >登陆次数       </th>

                            <th field="lastLoginDate"       sortable="true" align="center"    width="120" formatter="com.formatTime"  >最后登陆时间   </th>

                            <th field="permit" align="center"    width="270" formatter="formatterButton"> 操作     </th>

                        </tr>

                    </thead>

                </table>

            </div>

        </div>

        <div id="navigation">

            <div title="组织机构" style="width: 180px;" class="easyui-panel" data-options="title: '组织机构', iconCls: 'icon-org', height: $(window).height() - 4 ">

                <ul data-bind="easyuiTree:tree"></ul>

            </div>

        </div>

    </div>

    <script type="text/html" id="setorganize-template">

        <div style="margin:5px;">

            <div style="border-bottom:1px solid #CCC; margin-bottom:5px;">

                <span id="role_name" class="icon32 icon-user-edit32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:userName">刘会胜</span>

            </div>

            <div> 所属机构：</div>

            <div class="listview" style="height:315px;overflow:auto;"></div>

        </div>

        <div style="text-align:center;">

            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>

            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a>

        </div>

    </script>

    <script type="text/html" id="setrole-template">

        <style type="text/css">

            .listview{ margin:0 !important;}

            .listview li{width:100px !important;background-color:skyblue !important;float:left;margin:3px;}

        </style>

        <div style="margin:5px;height:370px;overflow:auto;"  >

            <div style="border-bottom:1px solid #CCC; margin-bottom:5px;">

                <span class="icon32 icon-user-edit32" style="padding-left:48px;font-weight:bold; font-size:14px;color:#666;" data-bind="text:userName">刘会胜</span>

            </div>

            <div> 拥有角色(请点击勾选)：</div>

            <div class="metrouicss">

                <ul class="listview"></ul>

            </div>

        </div>

        <div style="text-align:center;">

            <a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" data-bind="click:confirmClick" href="javascript:void(0)"  >确定</a>

            <a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" data-bind="click:cancelClick" href="javascript:void(0)">取消</a>

        </div>

    </script>

    <%@ include file="/common/foot.jsp"%>

    <script src="viewModel/sys/user.js"></script>

    <script src="viewModel/sys/organizeTreeGraph.js"></script>

    <script type="text/javascript">

           using(['validatebox','messager','dialog']);

        ko.bindingViewModel(new viewModel());

        var formatterButton = function (value, row) {

            var dataStr = JSON.stringify({id:row.id,userName:row.userName,_isnew:row._isnew});

            var html = '<a href="javascript:;" onclick=\'setOrganize(' + dataStr + ')\'><span class="icon icon-org">&nbsp;</span>[设置机构]</a>';

            html += '<a href="javascript:;" onclick=\'setRole(' + dataStr + ')\' style="margin-left:10px"><span class="icon icon-group">&nbsp;</span>[设置角色]</a>';

            return html;

        };

    </script>

 </body>

</html>

　　2. user.js：实现用户管理功能、列表，设置机构、设置角色功能

function viewModel() {

    var self = this;

    this.refreshClick=function(){

        window.location.reload();

    };

    this.addClick=function(){

        self.gridEdit.addnew({});

    };

    this.editClick=function(){

        var row = self.grid.datagrid('getSelected');

        var index = self.grid.datagrid('getRowIndex',row);

        self.gridEdit.begin(index,row);

    };

    this.deleteClick=function(){

        self.gridEdit.deleterow();

    };

    this.saveClick = function () {

        self.gridEdit.ended();

        var post = {};

        post.list = self.gridEdit.getChanges(['id', 'userCode', 'userName', 'emailAddr', 'phoneNum', 'materialCode', 'description', 'isEnable']);

        if (self.gridEdit.ended() && post.list._changed) {

            com.ajax({

                url: rootPath+'/sys/user!edit.do',

                data: ko.toJSON(post),

                success: function (d) {

                    com.message('success', '保存成功！');

                    self.gridEdit.accept();

                }

            });

        }

    };

    this.passwordClick = function () {

        var row = self.grid.datagrid('getSelected');

        if (!row) return com.message('warning', '请先选择一个用户！');

        com.message('confirm', '确定要把选中用户的密码重置为<span style="color:red">用户名</span>吗？', function (b) {

            if (b) {

                com.ajax({

                    type: 'POST',

                    url: rootPath+'/sys/user!postResetPassword.do?userId=' + row.id,

                    success: function () {

                        com.message('success', '密码已重置成功！');

                    }

                });

            }

        });

    };

    this.grid = {

        size: { w: 189, h: 40 },

        url: rootPath+'/sys/user!list.do',

        queryParams: ko.observable(),

        pagination: true,

        customLoad: false

    };

    this.gridEdit = new com.editGridViewModel(this.grid);

    this.grid.onDblClickRow = self.gridEdit.begin;

    this.grid.onClickRow = self.gridEdit.ended;

    this.grid.OnAfterCreateEditor =function(editors,row){

        if (row._isnew == undefined )

            com.readOnlyHandler('input')(editors.userCode.target,true);

    };

    this.tree = {

        method:'GET',

        url:rootPath+'/sys/organize!get.do',

        loadFilter:function(d){

            var filter = utils.filterProperties(d,['id','organizeName as text','parentId as pid']);

            return utils.toTreeData(filter,'id','pid','children');

        },

        onSelect:function(node){

            self.grid.queryParams({organizeId:node.id});

        }

    };

}

var setOrganize = function (row) {

    if (row._isnew)

        return com.message('warning', '请先保存再设置机构！');

    com.dialog({

        title: "设置机构",

        width: 600,

        height: 450,

        html:"#setorganize-template",

        viewModel:function(w){

            var that = this;

            this.userName = ko.observable(row.userName);

            this.graph = ko.observable();

            com.ajax({

                type: 'GET',

                url: rootPath+'/sys/organize!getOrganizeWithUserCheck.do?userId=' + row.id,

                success: function (d) {

                    var ul = w.find(".listview");

                    var treeData = utils.toTreeData(d, "id", "parentId", "children");

                    var tb = renderTreeGraph(treeData)[0].outerHTML;

                    ul.append(tb);

                    ul.find(".td-node").each(function () {

                        var checked = $(this).data("node").checked;

                        $(this).prepend(com.formatCheckbox(checked)).css({ "background-color": "#f6f6ff", "color": checked=='0' ? "" : "#FF0000" });

                    }).click(function () {

                        var $this = $(this), checked = $this.find("img").attr("value");

                        var img2 = $(com.formatCheckbox(checked=='true'?'0':'1'));

                        $this.find("img").attr("src", img2.attr("src")).attr("value", img2.attr("value"));

                        $this.css({ "background-color": "#f6f6ff", "color": checked=='true' ? "" : "#FF0000" });

                    });

                }

            });

            this.confirmClick = function () {

                var organizes = [];

                w.find("img[value=true]").each(function () {

                    organizes.push({organizeId:$(this).parent().data("node").id});

                });

                com.ajax({

                    url: rootPath+'/sys/user!editUserOrganizes.do?userId=' + row.id,

                    data: ko.toJSON(organizes),

                    success: function (d) {

                        that.cancelClick();

                        com.message('success', '保存成功！');

                    }

                });

            };

            this.cancelClick = function () {

                w.dialog('close');

            };

        }

    });

};

var setRole = function (row) {

    if (row._isnew)

        return com.message('warning', '请先保存再设置角色！');

    com.dialog({

        title: "设置角色",

        width: 600,

        height: 450,

        html: "#setrole-template",

        viewModel: function (w) {

            var thisRole = this;

            this.userName = ko.observable(row.userName);

            com.loadCss(rootPath+'/content/css/metro/css/modern.css', parent.document);

            com.ajax({

                type: 'GET',

                url: rootPath+'/sys/role!getRoleWithUserCheck.do?userId=' + row.id,

                success: function (d) {

                    var ul = w.find(".listview");

                    for (var i in d)

                        ul.append(utils.formatString('<li role="{0}" class="{2}">{1}</li>',d[i].id,d[i].roleName,d[i].checked=='1'?'selected':''));

                    ul.find("li").click(function () {

                        if ($(this).hasClass('selected'))

                            $(this).removeClass('selected');

                        else

                            $(this).addClass('selected');

                    });

                }

            });

            this.confirmClick = function () {

                var roles = [];

                w.find("li.selected").each(function () {

                    roles.push({ roleId: $(this).attr('role') });

                });

                com.ajax({

                    url: rootPath+'/sys/user!editUserRoles.do?userId=' + row.id,

                    data: ko.toJSON(roles),

                    success: function (d) {

                        thisRole.cancelClick();

                        com.message('success', '保存成功！');

                    }

                });

            };

            this.cancelClick = function () {

                w.dialog('close');

            };

        }

    });

};

二. 效果图

　　1. 访问：http://localhost:8080/ims/sys/user.do，用户管理界面

　　2. 点击设置机构

　　3. 点击设置角色

基于easyUI实现权限管理系统（四）——用户管理的更多相关文章

基于easyUI实现权限管理系统（三）——角色管理
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑一. 相关文件介绍 1. role.jsp:角色管理界面 <!DOCTYPE html PUBLIC "-//W3 ...
基于easyUI实现权限管理系统（二）——菜单导航
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑一. 相关文件介绍 1. menu.jsp:菜单导航主界面 <!DOCTYPE html PUBLIC "-//W ...
基于easyUI实现权限管理系统（一）一—组织结构树图形
此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑一. 相关文件介绍 1. organize.jsp:组织结构树的主界面 <!DOCTYPE html PUBLIC &quo ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（27）-权限管理系统-分配用户给角色
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(27)-权限管理系统-分配用户给角色分配用户给角色,跟分配角色给用户操作是基本一致的. 打开模块维护,展 ...
[转]Spring3 MVC + jQuery easyUI 做的ajax版本用户管理
原文地址:http://www.iteye.com/topic/1081739 上周写了篇基于spring3.0.5 mvc 简单用户管理实例 ( http://www.iteye.com/topic ...
ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——菜单模块的实现（二）
ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计(一) 菜单和模块是在同一个表中,采用的是树形结构,模块菜单表结构如下代码: USE [Permis ...
项目：rbac 基于角色的权限管理系统；
- 简单示意流程图 - RBAC分析: - 基于角色的权限管理: - 权限等于用户可以访问的URL: - 通过限制URL来限制权限: - RBAC表结构组成: from django.db impor ...
基于操作系统原理的Linux 的用户管理
一.实验目的 1．掌握为root用户修改密码的方法. 2．掌握创建新用户的方法. 3．掌握用户组的管理方法. 4．掌握为用户授权的方法. 二.实验内容 1．Linux的用户管理 (1)创建新用户创建新 ...
ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计（一）
快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助先上图一个用户可以有多个角色,一个用户可以属于多个部门,这些都可以控制到权限,有时特殊要求,同样的部门和角 ...

随机推荐

STR[#6]
photo 小明在旅游的路上看到了一条美丽的河,河上有许多船只,有的船只向左航行,有的船只向右航行.小明希望拍下这一美丽的风景,并且把尽可能多的船只都完整地拍到一张照片中. 小明位于河的边上,并且可以 ...
mysql数据的导入导出
2017-12-15 一. mysqldump工具基本用法,不适用于大数据备份 1. 备份所有数据库: mysqldump -u root -p --all-databases > ...
循环神经网络中BFTT的公式推导
一.变量定义此文是我学习BFTT算法的笔记,参考了雷明<机器学习与应用>中的BFTT算法推导,将该本书若干个推导串联起来,下列所有公式都是结合书和资料,手动在PPT上码的,很费时间,但是 ...
数据结构65：快速排序算法（QSort，快排）
上节介绍了如何使用起泡排序的思想对无序表中的记录按照一定的规则进行排序,本节再介绍一种排序算法——快速排序算法(Quick Sort). C语言中自带函数库中就有快速排序——qsort函数 ,包含在 ...
使用Mondrian Virtual OLAP Cube 实现星座模型并在saiku展现分析
1.什么是星座模型? 2.哪些地方可以用到星座模型? 3.Mondrian怎么构建星座模型,构建过程又涉及到哪些理论概念. 答1:这里描述了维度模型常用的星型.雪花.星座模型,简而言之就是多事实表模 ...
rest-assured之Schema validation(包括JSON Schema validation及Xml Schema validation)
rest-assured从2.1.0版本开始支持 Schema 验证,包括JSON Schema validation及Xml Schema validation.我们之前断言响应体都是一个一个字段 ...
JAVA编译结果中有****$1.class的
java编译后的文件名字带有$接数字的就是匿名内部类的编译结果,接名字的就是内部类的编译结果例如:TestFrame$1.class是匿名内部类的编译结果,TestFrame$MyJob.class ...
在使用Vue搭建前端服务器时，路由出现#号的解决办法
路由模式解析这里要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置.如果有进行过服务器开发或者对http协议有所了解就会知道 ...
V1-bug Alpha阶段项目展示
V1-bug Alpha阶段项目展示团队成员简介 Name Summary Sefie wxmwy V1-bug制造公司资深工程师精通各种抱大腿方式团队吉祥物 182 面面俱到流派一丝不苟 Powe ...
DB link的迁移
我们在做某些Schema的迁移的时候,由于用到Public的db link,然而由于不知道db link中目标端账号的密码,因此无法在新环境重新创建DB link. 本次实验的思路是将视图dba_db ...

基于easyUI实现权限管理系统（四）——用户管理

基于easyUI实现权限管理系统（四）——用户管理的更多相关文章

随机推荐

热门专题