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 ...
随机推荐
- N的阶乘末尾有多少个零？
在创联ifLab的招新问答卷上看到这么一题 核心问题是: 求N!(N的阶乘)的末尾有多少个零? 由于在N特别大的时候强行算出N!是不可能的,所以肯定要另找方法解决了. 首先,为什么末尾会有0?因为2* ...
- [系统]no such partition
电脑系统是win8.1+ubuntu14.2,为了卸载ubuntu,安装CentOS,于是在win8.1下把ubuntu的分区给删除了,重启,出现no such partition grub resc ...
- Idea 创建maven web项目（手工创建）
参考链接:https://www.cnblogs.com/justuntil/p/7511787.html 话不多说,直接上图: 1.创建maven项目 创建项目完成,项目结构如下: 2.项目部署配置 ...
- cvpr2016论文
http://openaccess.thecvf.com/ICCV2017.py http://openaccess.thecvf.com/CVPR2017.py http://www.cv-foun ...
- js 简单小知识
1. javascript的typeof返回哪些数据类型: string, boolean, number, undefined, function, object 2. split() join() ...
- BZOJ 3572 [HNOI2014]世界树 (虚树+DP)
题面:BZOJ传送门 洛谷传送门 题目大意:略 细节贼多的虚树$DP$ 先考虑只有一次询问的情况 一个节点$x$可能被它子树内的一个到x距离最小的特殊点管辖,还可能被管辖fa[x]的特殊点管辖 跑两次 ...
- Python 输出带颜色的文字方法
输出文字带颜色 书写格式,和相关说明如下: #格式: 设置颜色: \033[显示方式;前景色;背景色m \033[0m 方法: 字体色 背景色 颜色 -------------------- ...
- 用 console.time()和 console.timeEnd() 测试你的 javascript 代码执行效率
无意中学习到了一种测试 javascript 代码执行效率的一种方法,就记下来便于以后使用,用到了console对象中的 time 和 timeEnd 方法 . console.time('m ...
- Spring Boot学习总结（4）——使用Springloaded进行热部署
我在开发的时候,总是会及时对自己的程序进行测试,总是频繁的重启web server,容器不烦我们都觉得烦了. dependencys目录下增加: <dependency> <grou ...
- 在Centos安装oracle_11gR2进度68%"Error in invoking target mkldflags ntcontab.o nnfgt.o of makefile..”
http://www.xwood.net/_site_domain_/_root/5870/5874/t_c265367.html