80.用户管理 Extjs 页面
1
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>角色</title>
<script type="text/javascript">
var userInfoPanel = new UserInfoPanel();
var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1];
juage(tabId,"user",userInfoPanel,"userDiv");
</script> </head>
<body>
<div id="userDiv" ></div>
</body>
</html>
2.
/**
* @author sux
* @desc 用户信息
*/
UserInfoPanel = Ext.extend(Ext.grid.EditorGridPanel,{
id: 'userInfoPanelId',
constructor: function(){
Ext.QuickTips.init();
userStore = new Ext.data.JsonStore({
url: 'user_list.action',
root: 'root',
totalProperty: 'totalProperty',
fields: ['userId','role',
'employee','userName','userRemark',{name: 'userDate', mapping: 'userDate.time', dateFormat : 'time', type: 'date' }]
});
var rowNumber = new Ext.grid.RowNumberer(); //序列号
var checkbox = new Ext.grid.CheckboxSelectionModel(); //{默认是多选singleSelect: false}
deptInfoGridPanel.superclass.constructor.call(this,{
width: Ext.getCmp('mainTab').getActiveTab().getInnerWidth(),
height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(),
/**表格高度自适应 document.body.clientHeight浏览器页面高度 start**/
monitorResize: true,
doLayout: function() {
this.setWidth(document.body.clientWidth-205);
this.setHeight(document.body.clientHeight-140);
Ext.grid.GridPanel.prototype.doLayout.call(this);
} ,
viewConfig: {
forceFit: true,
columnsText : "显示/隐藏列",
sortAscText : "正序排列",
sortDescText : "倒序排列"
},
sm: checkbox,
store: userStore,
columns: [
rowNumber, checkbox,
{
header: '用户编号',
dataIndex: 'userId',
align: 'center'
},{
header: '用户名',
dataIndex: 'userName',
align: 'center'
},{
header: '员工名',
dataIndex: 'employee',
align: 'center',
renderer: function(v){
return v.empName;
}
},{
header: '角色',
dataIndex: 'role',
align: 'center',
renderer: function(v){
return v.roleName;
}
},{
header: '创建日期',
dataIndex: 'userDate',
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
align: 'center'
},{
header: '备注',
dataIndex: 'userRemark',
align: 'center'
}],
tbar: new Ext.Toolbar({
style: 'padding: 5px;',
id: 'userToolbar',
items: ['条目:',{
xtype: 'combo',
width: 80,
triggerAction: 'all',
editable: false,
mode: 'local',
store: new Ext.data.SimpleStore({
fields: ['name','value'],
data: [[" "," "],["userName","用户名"],["empName","员工名"]]
}),
id: 'user_condition',
displayField: 'value',
valueField: 'name'
},'内容:',{
id: 'user_conditionValue',
xtype: 'textfield',
width: 100
},{
text: '查询',
tooltip: '查询用户',
iconCls: 'search',
id: 'user_query',
handler: queryUserFn
},{
text: '删除',
tooltip: '删除用户',
id: 'user_delete',
iconCls: 'delete',
handler: delUserFn
},{
text: '添加',
tooltip: '添加用户',
id: 'user_add',
iconCls: 'add',
handler: userAddFn
},{
text: '修改',
id: 'user_update',
iconCls: 'update',
tooltip: '修改用户',
handler: userUpdateFn
}]
}),
bbar: new PagingToolbar(userStore, 20)
});
this.getStore().load({
params: {
start: 0,
limit: 20
}
});
}
}); delUserFn = function(){
gridDel('userInfoPanelId','userId', 'user_delete.action');
}; queryUserFn = function(){
var condition = Ext.getCmp('user_condition').getValue();
var conditionValue = Ext.getCmp("user_conditionValue").getValue();
Ext.getCmp("userInfoPanelId").getStore().reload({
params: {
condition: condition,
conditionValue : conditionValue,
start: 0,
limit: 20
}
})
};
userAddFn = function(){
var userAddWin = new UserAddWin("用户添加");
userAddWin.show();
};
userUpdateFn = function(){
var userUpdateWin = new UserUpdateWin("用户修改");
var selectionModel = Ext.getCmp('userInfoPanelId').getSelectionModel();
var record = selectionModel.getSelections();
if(record.length != 1){
Ext.Msg.alert('提示','请选择一个');
return;
}
var userId = record[0].get('userId');
Ext.getCmp('userUpdateFormId').getForm().load({
url: 'user_intoUpdate.action',
params: {
userId: userId
}
});
userUpdateWin.show();
};
3.
Ext.namespace("hrmsys.user.add");
UserAddWin = Ext.extend(Ext.Window,{
id: 'userAddWinId',
addForm: null,
constructor: function(title){
var addForm = new UserAddForm();
UserAddWin.superclass.constructor.call(this,{
title: title,
width: 400,
modal: true,
height: 370,
resizable: false,
collapsible: true,
colsable: true,
layout: 'form',
items: [addForm]
})
}
})
UserAddForm = Ext.extend(Ext.form.FormPanel,{
id: 'userAddFormId',
constructor: function(){
Ext.form.Field.prototype.msgTarget = 'side';
Ext.QuickTips.init();
UserAddWin.superclass.constructor.call(this, {
labelWidth: 80,
padding: '20 0 0 50',
labelAlign: 'right',
border: false,
frame: true,
items: [{
xtype: 'textfield',
width: 150,
fieldLabel: '员工工号',
id: 'userEmpId',
name: 'user.employee.empId',
allowBlank: false,
msgTarget: 'side',
blankText: '不能为空',
emptyText: '不能为空',
listeners: {'blur': user_blurFn}
},{
xtype: 'textfield',
fieldLabel: '员工名',
width: 150,
id: 'userEmpName',
readOnly: true
},{
xtype: 'textfield',
fieldLabel: '用户名',
allowBlank: false,
msgTarget: 'side',
blankText: '不能为空',
width: 150,
id: 'userUserName',
name: 'user.userName'
},{
xtype: 'combo',
allowBlank: false,
msgTarget: 'side',
blankText: '不能为空',
fieldLabel: '角色',
store: new Ext.data.JsonStore({
url: 'role_listAll.action',
fields: ['roleId','roleName']
}),
triggerAction:"all",
editable: false,
width: 150,
displayField: 'roleName',
valueField: 'roleId',
hiddenName: 'user.role.roleId'
},{
xtype: 'textarea',
fieldLabel: '备注',
width: 150,
height: 150,
name: 'user.userRemark'
}],
buttonAlign: 'center',
buttons: [{
text: '保存',
handler: function(){
if(!Ext.getCmp('userAddFormId').getForm().isValid()){
return;
}
Ext.getCmp('userAddFormId').getForm().submit({
url: 'user_save.action',
method: 'post',
waitMsg: '正在保存数据...',
waitTitle: '提示',
scope: this,
success: saveUserSuccess,
failure: save_failure
})
}
},{
text: '取消',
handler: function(){
Ext.getCmp('userAddFormId').getForm().reset();
}
}]
})
}
});
saveUserSuccess = function(form, action){
Ext.Msg.confirm('提示', action.result.msg, function(button, text){
if(button == "yes"){
form.reset();
Ext.getCmp('userAddWinId').destroy();
Ext.getCmp('userInfoPanelId').getStore().reload();//刷新部门显示列表
}
});
};
user_blurFn = function(value){
var empId = value.getRawValue();
Ext.Ajax.request({
url: 'emp_isExist.action',
method: 'post',
params: {
empId: empId
},
success: user_isExistSuccessFn,
failure: save_failure
})
};
user_isExistSuccessFn = function(response, options){
if(response.responseText != ""){
Ext.get('userEmpName').dom.value = response.responseText;
Ext.get('userUserName').dom.value = response.responseText;
}else{
Ext.getCmp('userEmpId').markInvalid('此工号不存在');
}
};
4.
Ext.namespace("hrmsys.user.update");
UserUpdateWin = Ext.extend(Ext.Window,{
id: 'userUpdateWinId',
addForm: null,
constructor: function(title){
var updateForm = new UserUpdateForm();
UserUpdateWin.superclass.constructor.call(this,{
title: title,
width: 400,
modal: true,
height: 350,
collapsible: true,
colsable: true,
layout: 'form',
items: [updateForm]
})
}
})
UserUpdateForm = Ext.extend(Ext.form.FormPanel,{
id: 'userUpdateFormId',
constructor: function(){
Ext.form.Field.prototype.msgTarget = 'side';
Ext.QuickTips.init();
//加载后台数据，进行转换
var reader = new Ext.data.JsonReader({},[{
name: 'user.userId' , mapping: 'userId'
},{
name: 'user.employee.empId', mapping: 'employee', convert: function(v){return v.empId;}
},{
name: 'user.employee.empName', mapping: 'employee', convert: function(v){return v.empName;}
},{
name: 'user.role.roleId', mapping: 'role', convert: function(v){ return v.roleId;}
},{
name: 'user.userName', mapping: 'userName'
},{
name: 'user.userRemark', mapping: 'userRemark'
}]);
UserUpdateForm.superclass.constructor.call(this, {
labelWidth: 80,
padding: '20 0 0 50',
labelAlign: 'right',
border: false,
frame: true,
reader: reader,
items: [{
xtype: 'textfield',
width: 150,
fieldLabel: '员工工号',
id: 'empId',
readOnly: true,
name: 'user.employee.empId'
},{
xtype: 'textfield',
fieldLabel: '员工名',
width: 150,
id: 'empName',
name: 'user.employee.empName',
readOnly: true
},{
xtype: 'textfield',
fieldLabel: '用户名',
width: 150,
readOnly: true,
id: 'updateUserName',
name: 'user.userName'
},{
xtype: 'combo',
fieldLabel: '角色',
store: new Ext.data.JsonStore({
url: 'role_listAll.action',
autoLoad: true,
fields: ['roleId','roleName']
}),
triggerAction:"all",
editable: false,
width: 150,
displayField: 'roleName',
valueField: 'roleId',
hiddenName: 'user.role.roleId'
},{
xtype: 'textarea',
fieldLabel: '备注',
width: 150,
height: 150,
name: 'user.userRemark'
},{
xtype: 'hidden',
name: 'user.userId'
}],
buttonAlign: 'center',
buttons: [{
text: '保存',
handler: function(){
if(!Ext.getCmp('userUpdateFormId').getForm().isValid()){
return;
}
Ext.getCmp('userUpdateFormId').getForm().submit({
url: 'user_updateRole.action',
method: 'post',
waitMsg: '正在保存数据...',
waitTitle: '提示',
scope: this,
success: updateUserSuccess,
failure: save_failure
})
}
},{
text: '关闭',
handler: function(){
Ext.getCmp('userUpdateWinId').destroy();
}
}]
})
}
});
updateUserSuccess = function(form, action){
Ext.Msg.confirm('提示', action.result.msg, function(button, text){
if(button == "yes"){
form.reset();
Ext.getCmp('userUpdateWinId').destroy();
Ext.getCmp('userInfoPanelId').getStore().reload();//刷新部门显示列表
}
});
};
80.用户管理 Extjs 页面的更多相关文章
- 70.资金管理-福利表管理 Extjs 页面
1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8&quo ...
- 69.资金管理-税率表管理extjs 页面
1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8&quo ...
- 82.角色管理Extjs 页面
1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8&quo ...
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第五篇（用户管理之“用户权限分配”）
一.在做权限分配之前,首先先了解“ZTree”这个插件,我的这个系统没有用Jquery-EasyUI的Tree.用的是”ZTree“朋友们可以试试,也很强大.点击下载ZTree插件. 1. ...
- 【php增删改查实例】第二十节 - 把用户管理页面集成到main.php中
把这个代码: <a href="javascript:openTab('用户管理','user/userManage.html ','icon-roleManage')" c ...
- EasyUI+MVC+EF简单用户管理Demo（问题及解决）
写在前面 iframe-src EntityFramework版本 connectionStrings View.Action.页面跳转 EasyUI中DataGrid绑定 新增.修改和删除数据 效果 ...
- 【php增删改查实例】第十四节 - 用户管理模块（起步）
从这一节开始,开始着手开发部门管理模块. 之后的内容就在此基础上进行增加. 1.用户查询 在目录中建立一个user文件夹,作为我们用户管理的模块. 打开这个文件,新建一个userManage.html ...
- 老男孩Day18作业：后台用户管理
一.作业需求: 1.用户组的增删改查 2.用户增删该查 - 添加必须是对话框 - 删除必须是对话框 - 修改,必须显示默认值 3.比较好看的页面 二.博客地址:https://www.cnblogs. ...
- 【JeeSite】用户管理
组织机构使用ztree插件,加载数据时使用数据权限过滤(只能访问登录用户的单位及其下属单位), 点击部门加载相应用户. <!-- 数据范围过滤 --> BaseService.data ...
随机推荐
- vm装xp安装成功后进入不了系统
1.如果是用虚拟光驱,你肯定步骤是先新建的虚拟机,再安装的虚拟光驱,所以会出现这样的问题.(请先安装虚拟光驱,再新建虚拟机,再用虚拟光驱加载镜像文件,问题解决)2.如果是直接使用的镜像,那么在GHOS ...
- dubbo之延迟连接及粘滞链接接
延迟连接 延迟连接用于减少长连接数.当有调用发起时,再创建长连接.1 <dubbo:protocol name="dubbo" lazy="true" / ...
- Linux内核源码特殊用法
崇拜并且转载的: http://ilinuxkernel.com/files/5/Linux_Kernel_Source_Code.htm Linux内核源码特殊用法 1 前言 Linux内核源码主要 ...
- Git ——Tool
Git: 何为Git: Git 是一个可以实时记录文件变化.维护文件的安全的一个仓库! Git仓库是由** Linux 系统之父 Linus Torvalds ** 创建的一个开源 的软件!Githu ...
- 消除input框的默认样式
input, button, select, textarea { outline: none; -webkit-appearance: none; border-radius: 0; } outli ...
- CentOS与FreeBSD环境下安装filebeat
业务服务器CentOS与FreeBSD共存(痛苦囧...) CentOS rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch ...
- hadoop-磁盘出现坏盘，如何能在线换盘
涉及到磁盘存储路径的配置文件参数有: hdfs-site.xml <name>dfs.datanode.data.dir</name> yarn-site.xml <na ...
- noip模拟赛 可耻
题目描述 给定一个长度为偶数的排列 p,你每次可以选取 p 排列中相邻的两个元素,假如分别是 x 和 y,那 么把 x 和 y 加入一个序列 q 的末尾,并将 x 和 y 从排列 p 中删除.重复上述 ...
- noip模拟赛 Massacre at Béziers
题目背景 下发压缩包链接: https://pan.baidu.com/s/1geC4ooz 密码: 3vpt 所有的一切———所有的一切都被染成了红与黑. 翻卷的红莲烈焰舔舐着大地,释放出异抽的黑烟 ...
- [Poj3261] [Bzoj1717] [后缀数组论文例题，USACO 2006 December Gold] Milk Patterns [后缀数组可重叠的k次最长重复子串]
和上一题(POJ1743,上一篇博客)相似,只是二分的判断条件是:是否存在一段后缀的个数不小于k #include <iostream> #include <algorithm> ...