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 ...
随机推荐
- CentOS7将firewall切换为iptables防火墙
- tac
功能说明:反向显示文件内容. 参数选项: -b 在行前而非行尾加分隔标志. -r 将分隔标志视作正则表达式来解析. -s 使用指定字符串代替换行作为分隔标志. cat命令与tac命令的对比:
- PHP 之websocket实现聊天室功能
一.功能界面 具体的详细代码:https://github.com/yangsphp/websocket-master/tree/master 二.具体代码实现 1.前端代码如下 <!DOCTY ...
- linux mysql-workbench 创建与正式库表结构一样的表
先在本地创建数据库 字符集选择这个 创建数据库成功 创建与正式库一样的表 step1: 连接正式库,找到要生成的表,导出创建表的sql语句 step2: 找到本地数据库,选择表,在sql执行区域复制s ...
- demo__webpack
webpack 中使用的包更新非常频繁,使用方式可能很快就会改变,解决方式 看webapck文档 和 包的使用文档 看包的源码 其他... 环境 win10 + webstorm 2019.1.3 + ...
- https webservice通讯 参考网址 http://blog.csdn.net/small____fish/article/details/8214938
一.生成密钥库和证书可参考以下密钥生成脚本,根据实际情况做必要的修改,其中需要注意的是:服务端的密钥库参数“CN”必须与服务端的IP地址相同,否则会报错,客户端的任意. 1.生成服务器证书库keyto ...
- jQuery如何追加tr到table中 添加到头或者尾
jQuery 添加新内容有以下四个方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() ...
- 《hello-world》第八次团队作业：Alpha冲刺-Scrum Meeting 1
项目 内容 这个作业属于哪个课程 2016级计算机科学与工程学院软件工程(西北师范大学) 这个作业的要求在哪里 实验十二 团队作业8:软件测试与Alpha冲刺 团队名称 <hello--worl ...
- BNUOJ 1021 信息战（七）——情报传递
信息战(七)——情报传递 Time Limit: 3000ms Memory Limit: 262144KB 64-bit integer IO format: %lld Java clas ...
- 重庆OI2017 老 C 的任务
老 C 的任务 时间限制: 2 Sec 内存限制: 512 MB 题目描述 老 C 是个程序员. 最近老 C 从老板那里接到了一个任务——给城市中的手机基站写个管理系统.作为经验丰富的程序员,老 C ...