此文章是基于
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='/images/loading.gif' data-original="viewModel/sys/user.js"></script> <script src='/images/loading.gif' data-original="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 > </span>[设置机构]</a>'; html += '<a href="javascript:;" onclick=\'setRole(' + dataStr + ')\' ><span > </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 >用户名</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}" >{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'); }; } });};View Code
三. 效果图
1. 访问：http://localhost:8090/ims/sys/user.do，用户管理界面
2. 点击 设置机构
3. 点击 设置角色
原标题：基于easyUI实现权限管理系统（四）——用户管理
关键词：
我知道了 