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 ...
随机推荐
- Address space layout randomization
Address space layout randomization (ASLR) is a computer security technique involved in preventing ex ...
- linux虚拟主机的三种方法
虚拟主机虚拟主机是将一台(或者一组)服务器的资源(系统资源.网络带宽.存储空间等)按照一定的比例分割成若干相对独立的“小主机”的技术.每一台这样的“小主机”在功能上都可以实现WWW.FTP.Mail等 ...
- Linux之iptables(三、命令--->单主机)
iptables命令规则格式: iptables [-t table] SUBCOMMAND chain [-m matchname[per-match-options]] -j targetname ...
- android 彩信附件添加删除
http://blog.csdn.net/yuzhu_guan2012/article/details/6679154
- jenkins简单持续构建
一.安装jenkins 二.将需要持续构建的java project打包成jar文件 1.选择导出需要运行的main方法所在java类
- extjs 4 chart 时间轴格式的处理
var dayStore = Ext.create('Ext.data.JsonStore', { fields: [{ name: 'name', type: 'date', dateFormat: ...
- 最大公约数和最小公倍数问题 2001年NOIP全国联赛普及组
题目描述 Description 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1.P,Q是正整 ...
- hdu_1038_Biker's Trip Odometer_201311021643
Biker's Trip Odometer Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Ot ...
- hdu_1013_Digital Roots_201310121652
Digital Roots Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Tot ...
- sql server使用杂记
SqlServer导出数据库 navcat for sql server中打开连接,打开数据库,右键--数据传输,常规选项卡--模式选择dbo,目标选择连接(选择你新建的库)或者文件(导出你要的sql ...