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

此文章是基于　　EasyUI+Knockout实现经典表单的查看、编辑

一. 相关文件介绍

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

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');
};
}
});
};

View Code
　　

二. 效果图

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



　　2. 点击 设置机构



　　3. 点击 设置角色