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 ...
随机推荐
- 初识关系型数据库（SQL）与非关系型数据库（NOSQL）
一.关系型数据库(SQL): Mysql,oracle 特点:数据和数据之间,表和字段之间,表和表之间是存在关系的 例如:部门表 001部分, 员工表 001 用户表,用户名.密码 分类表 和 商 ...
- HDU_1068_Girls and Boys_二分图匹配
Girls and Boys Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 2019 支付宝App支付 --- PHP
SDK下载:https://docs.open.alipay.com/54/106370/;联系客服:https://cschannel.alipay.com/newPortal.htm?scene= ...
- Django工程
一.Django工程创建 1.Django安装: pip3 install django 安装成功后,会在python的安装目录下“Scripts"中生成”django-admin.exe& ...
- Going Home HDU - 1533（最大费用最小流）
On a grid map there are n little men and n houses. In each unit time, every little man can move one ...
- hadoop-磁盘出现坏盘，如何能在线换盘
涉及到磁盘存储路径的配置文件参数有: hdfs-site.xml <name>dfs.datanode.data.dir</name> yarn-site.xml <na ...
- 【POJ 1860】Currency Exchange
[题目链接]:http://poj.org/problem?id=1860 [题意] 给你n种货币,m种货币之间的交换信息; 交换信息以 A,B,RA,CA,RB,CB的形式给出; 即A换B的话假设A ...
- Linux 下android环境的配置
Linux 下android环境的配置 1. JDK下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads- ...
- 中缀表达式转逆波兰式(后缀表达式）求值 C++ Stack
给一个包含小数的中缀表达式 求出它的值 首先转换为后缀表达式然后利用stack求出值 转换规则: 如果字符为'(' push else if 字符为 ')' 出栈运算符直到遇到‘(' else if ...
- N天学习一个linux命令之ps
ps命令 用途 显示系统进程信息 用法 ps [options] 常用选项 选项有三种风格,这里是指Unix风格 (Unix,BSD,GNU LONG OPTIONS) 简单刷选类 -A, -e 显示 ...