基於easyUI實現許可權管理系統（四）——用戶管理

此文章是基於 EasyUI+Knockout實現經典表單的查看、編輯一. 準備工作 1. 點擊此下載相關文件，並把文件放到 ims 工程對應的文件夾下二. 相關文件介紹 1. user.jsp：用戶管理界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

此文章是基於

　　　　EasyUI+Knockout實現經典表單的查看、編輯

一. 準備工作

　　1. 點擊此下載相關文件，並把文件放到 ims 工程對應的文件夾下

二. 相關文件介紹

　　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>

View Code

　　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,