|
锁定老帖子 主题：JSP+Ext实现CURD, 更简洁明了
精华帖 (1) :: 良好帖 (2) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-05-04
学习Ext有三天了, 参考《Ext2.0入门与精通》和官方的examples照猫画虎搞了个 员工管理'系统' 和 员工签到'系统' 希望大家一起学习, 由于学艺不精, 若有不足之处还请各位批评指正, 谢谢大家
/*
* MemberManage.js
* @author zuoming99
*/
Ext.onReady(function(){
Ext.QuickTips.init();
var fm = Ext.form;
var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});
var cm = new Ext.grid.ColumnModel([
sm,{
header:'ID',
dataIndex:'id',
width:40
},{
header: "姓名",
dataIndex: 'name',
editor: new fm.TextField({
allowBlank: false
})
},{
header:'性别',
dataIndex:'sex',
width:60,
align:'center',
renderer:function(v){
return '<img src="images/'+v+'.png"/>'+(v=='m'?'男':'女');
},
editor:new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'sexSelect',
lazyRender:true,
readOnly:true,
listClass: 'x-combo-list-small'
})
},{
header:'年龄',
dataIndex:'age',
width:50,
align:'right',
renderer:function(v){
var code = '<span style="color:';
if(v<=25){
code += '#008000';
}else if(v>25 && v<=30){
code += '#CC6600';
}else if(v>30){
code += '#804000';
}
return code+';">'+v+'</span>';
},
editor: new fm.NumberField({
allowBlank:false,
allowNegative: false,
allowDecimals: false,
maxValue:60,
minValue:18
})
},{
header: "生日",
dataIndex: 'birth',
renderer: function(v){
return v ? v.dateFormat('Y年m月d日') : '';
},
editor: new fm.DateField({
format: 'Y-m-d',
minValue: '1800-01-01',
readOnly:true,
disabledDays: [0, 6],
disabledDaysText: '请不要选择周末'
})
}
]);
cm.defaultSortable = true;
var Member = Ext.data.Record.create([
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'sex'},
{name: 'age',type:'int'},
{name: 'birth', type: 'date', dateFormat: 'Y-m-d'}
]);
var store = new Ext.data.JsonStore({
url:'./member_manage.jsp',
baseParams:{command:'query'},
totalProperty:'count',
root:'members',
fields:Member,
pruneModifiedRecords:true,
sortInfo: {field: "id", direction: "ASC"} //设置默认排序规则, EditorGridPanel在新增加一行却未保存时如果点击header排序会出现'行142字符6983,modified为空或不是对象'
});
//表单窗体
var memberAddWindow;
var grid = new Ext.grid.EditorGridPanel({
store: store,
cm: cm,
renderTo: 'member_grid',
resizeable:true,
width:640,
height:480,
title:'员工管理',
frame:true,
clicksToEdit:1,
sm:sm,
iconCls:'icon-grid',
loadMask: true,
stripeRows:true,
tbar:[
{// 添加按钮
text:'添加',
iconCls:'user_add',
handler:function(){
var m = new Member({
name:'新员工',
sex:'m',
age:'20',
birth:new Date().clearTime()
});
grid.stopEditing();
store.insert(0, m);
grid.startEditing(0, 2);
store.getAt(0).dirty=true; // 设置该行记录为脏数据(默认为非脏数据),否则在保存时将无法判断该行是否已修改
}
},'-',{
id:'newWindowButton',
text:'新面板中添加',
iconCls:'user_add',
handler:function(){
showMemerAddWindow(); //显示表单所在窗体
}
},'-',{//删除按钮
id:'btnDelete',
text:'删除',
iconCls:'user_delete',
handler:function(){
var sm = grid.getSelectionModel();
var selected = sm.getSelections();
var ids = [];
for(var i=0;i<selected.length;i+=1){
var member = selected[i].data;
if(member.id) {
ids.push(member.id); //如果有ID属性,则表示该行数据是被修改过的,所以需要访问数据库进行删除
}else{
//如果没有ID属性,则表示该行数据是新添加的未保存的数据,所以不需要访问数据库进行删除该行
store.remove(store.getAt(i));
}
}
if(ids.join('')=='') return;
Ext.Msg.confirm('信息','确定要删除所选项吗?',function(btn){
if(btn=='yes'){
//发送删除请求
Ext.lib.Ajax.request(
'POST',
'./member_manage.jsp',{
success:function(request){
var message = request.responseText;
Ext.Msg.alert('信息',message);
store.reload();
},failure:function(){
Ext.Msg.alert('错误','删除时出现未知错误.');
}
},
'command=delete&ids='+ids
);
}
});
}
},'-',{//保存按钮
text:'保存',
iconCls:'save',
handler:function(){
var json = [];
for(i=0,cnt=store.getCount();i<cnt;i+=1){
var record = store.getAt(i);
if(record.dirty) // 得到所有修改过的数据
json.push(record.data);
}
if(json.length==0){
Ext.Msg.alert('信息','没有对数据进行任何更改');
return;
}
//发送保存请求
Ext.lib.Ajax.request(
'POST',
'./member_manage.jsp',{
success:function(request){
var message = request.responseText;
Ext.Msg.alert('信息',message);
store.reload();
//grid.getView().refresh();
},
failure:function(){
Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
}
},
'command=save&members='+encodeURIComponent(Ext.encode(json))
);
}
},'-'],
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg: "没有记录"
})
});
store.load({params:{start:0,limit:10}});
/**
* 以下是表单 __________________________________________________
* */
//姓名字段
var nameField = new Ext.form.TextField({
fieldLabel:'姓名',
name:'memberName',
allowBlank:false,
anchor:'90%'
});
//性别字段
var sexField = new Ext.form.ComboBox({
fieldLabel:'性别',
name:'sex',
allowBlank:false,
mode: 'local',
readOnly:true,
triggerAction:'all',
anchor:'90%',
store:new Ext.data.SimpleStore({
fields:['value','text'],
data:[
['m','男'],
['f','女']
]
}),
valueField: 'value',
displayField: 'text'
});
//年龄字段
var ageField = new Ext.form.NumberField({
fieldLabel:'年龄',
name:'age',
allowBlank:false,
allowNegative:false,
allowDesimals:false,
maxValue:80,
minValue:18,
anchor:'90%'
});
//生日字段
var birthField = new Ext.form.DateField({
fieldLabel:'出生日期',
name:'birth',
format:'Y-m-d',
readOnly:true,
anchor:'90%'
});
//表单对象
var memberForm = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: '添加新员工信息',
width: 300,
url:'./member_manage.jsp?command=insert',
items: [{
layout:'column',// 该FormPanel的layout布局模式为列模式(column),包含2列
items:[
{//第一列
columnWidth:0.5,
layout: 'form',
items: [nameField,sexField]
},{//第二列
columnWidth:0.5,
layout: 'form',
items: [ageField,birthField]
}]
}],
buttons:[{
text:'提交',
handler:function(){
if(memberForm.getForm().isValid())
memberForm.getForm().submit({
waitMsg:'保存中,请稍后...',
success:function(){
memberForm.getForm().reset();
memberAddWindow.hide();
store.reload();
}
});
}
},{
text:'取消',
handler:function(){
memberForm.getForm().reset();
memberAddWindow.hide();
}
}]
});
//窗体对象
function showMemerAddWindow(){
if(!memberAddWindow){
memberAddWindow = new Ext.Window({
el:'window_win',
layout:'fit',
width:300,
height:200,
closable:true,
closeAction:'hide',
plain:true,
items: [memberForm]
});
}
memberAddWindow.show(Ext.get('newWindowButton'));
}
});
/**
*
* SignManage.js
* @author zuoming99
*
* */
Ext.onReady(function(){
//初始化鼠标提示
Ext.QuickTips.init();
//Record
var Sign = Ext.data.Record.create([
//{name:'id',type:'int'},
{name:'signDate',type:'date',dateFormat:'Y-m-d'}, //数据读取模式为 2008-1-1
{name:'signTime',type:'string'},
{name:'cname',type:'string'}
]);
var today = new Date().dateFormat('Y-m-d');
var week = ['天','一','二','三','四','五','六'];
function getWeek(ymd){ //得到星期几,参数格式2008-01-01
ymd = ymd.split('-');
var date = new Date();
date.setFullYear(eval(ymd[0]));
date.setMonth(eval(ymd[1])-1);
date.setDate(eval(ymd[2]));
return '星期'+week[date.getDay()];
}
//数据储备器
var signStore = new Ext.data.JsonStore({
url:'./sign_control.jsp',
baseParams:{startDate:today,endDate:today,command:'query'},
//totalProperty:'count',
root:'records',
fields:Sign,
sortInfo:{field:'signTime',direction:'ASC'}
});
//全选Checkbox
var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});
//列模型
var columnModel = new Ext.grid.ColumnModel([
sm,
new Ext.grid.RowNumberer(),{
header:'姓名',
dataIndex:'cname',
width:100
},{
header:'签到时间',
dataIndex:'signTime',
width:80,
renderer:function(v){
if(v<='09:00')
return '<span class="green">'+v+'</span>';
else
return '<span class="red">'+v+'</span>';
}
},{
header:'工作日',
dataIndex:'signDate',
width:80,
renderer:function(v){
//显示模式为2008-01-01
return v ? v.dateFormat('Y-m-d') : '';
}
},{
header:'星期',
dataIndex:'signDate',
width:80,
renderer:function(v){
v = v.dateFormat('Y-m-d')
return getWeek(v);
}
}
]);
columnModel.defaultSortable=true;
//进行签到
function doSign(){
var signTime = new Date().toString().substr(10,5);
Ext.Ajax.request({
url:'./sign_control.jsp?command=sign&signTime='+signTime,
success:function(request){
var userInfo = eval('('+request.responseText.trim()+')');
if(userInfo.success===true){
signStore.reload();
btnSign.disable();
}
},
failure:function(){
Ext.Msg.alert('错误','无法链接服务器.');
}
});
}
//查询-开始日期
var sdField = new Ext.form.DateField({
id:'startDate',
name:'startDate',
format:'Y-m-d',
minValue:'2008-02-01',
maxValue:'2009-12-31',
allowBlank:false,
value:today
});
//查询-结束日期
var edField = new Ext.form.DateField({
id:'endDate',
name:'endDate',
format:'Y-m-d',
minValue:'2008-02-01',
maxValue:'2009-12-31',
allowBlank:false,
value:today
});
//查询按钮
var btnSearch = new Ext.Button({
text:'查询',
iconCls:'icon-search',
handler:function(){
if(sdField.isValid() && edField.isValid()){
signStore.baseParams.startDate=sdField.getValue().dateFormat('Y-m-d');
signStore.baseParams.endDate=edField.getValue().dateFormat('Y-m-d');
}
signStore.load();
}
});
//登录按钮
var btnLogon = new Ext.Button({
id:'btnLogon',
text:'登录',
iconCls:'icon-logon',
handler:function(){
logonWin.show('btnLogon');
}
});
//签到按钮
var btnSign = new Ext.Button({
id:'btnSign',
text:'签到',
iconCls:'icon-sign',
handler:doSign
});
//修改密码按钮
var btnChangePwd = new Ext.Button({
id:'btnChangePwd',
text:'修改密码',
iconCls:'icon-logon',
handler:function(){
changePwdWin.show('btnChangePwd');
}
});
//退出按钮
var btnLogout = new Ext.Button({
id:'btnLogout',
text:'退出',
iconCls:'icon-logout',
handler:function(){
Ext.Ajax.request({
url:'./sign_control.jsp?command=logout',
success:function(){
btnLogon.enable();
btnLogout.disable();
btnSign.disable();
btnChangePwd.disable();
},
failure:function(){
Ext.Msg.alert('错误','无法链接服务器.');
}
});
}
});
//导出按钮
var btnExport = new Ext.Button({
id:'btnExport',
text:'导出',
iconCls:'icon-export',
handler:function(){
if(sdField.isValid() && edField.isValid()){
var startDate=sdField.getValue().dateFormat('Y-m-d');
var endDate = edField.getValue().dateFormat('Y-m-d');
Ext.Ajax.request({
url:'./sign_control.jsp?command=query',
params:{ startDate:startDate, endDate:endDate },
success:function(response){
var json = eval('('+response.responseText.trim()+')');
var records = json.records;
var html = [
'<table border=1><tr><th>姓名</th><th>日期</th><th>时间</th><th>星期</th></tr>'
];
for(var i=0;i<records.length;i+=1){
var rc = records[i];
html.push('<tr><td>'+rc.cname+'</td><td>'+rc.signDate+'</td><td>'+rc.signTime+'</td><td>'+getWeek(rc.signDate)+'</td></tr>');
}
html.push('</table>');
html = html.join(''); //最后生成的HTML表格
tableToExcel(html);
//document.getElementById('debuger').innerHTML=html;
},
failure:function(response){
Ext.Msg.alert('信息',response.responseText.trim());
}
});
}
}
});
//创建Grid
var signGrid = new Ext.grid.GridPanel({
store:signStore,
cm:columnModel,
sm:sm,
renderTo:'sign_grid',
width:600,
height:440,
title:'员工签到信息管理系统',
frame:true,
iconCls:'icon-grid',
loadMask:true,
stripeRows:true,
tbar:[
'日期从',sdField,' 到 ',edField,' ',btnSearch,'-',
btnLogon,btnSign,btnChangePwd,btnLogout,btnExport
]
});
btnLogout.disable(); //退出按钮
btnSign.disable(); //签到按钮
btnChangePwd.disable(); //修改密码按钮
signStore.load();
//登录-用户名字段
var enameField = new Ext.form.TextField({
fieldLabel:'用户名',
id:'ename',
name:'ename',
allowBlank:false,
anchor:'100%'
});
//登录-密码字段
var pwdField = new Ext.form.TextField({
fieldLabel:'密码',
id:'pwd',
name:'pwd',
allowBlank:false,
inputType:'password',
anchor:'100%'
});
//登录表单
var logonForm = new Ext.form.FormPanel({
labelAlign:'right',
labelWidth:50,
frame:true,
//title:'用户登录',
url:'./sign_control.jsp?command=logon',
items:[ enameField ,pwdField ],
buttons:[{
text:'登录',
handler:function(){
var f = logonForm.getForm();
if(f.isValid()){
f.submit({
waitMsg:'登录中,请稍候...',
success:function(form, action){
if(action.result.logonOK===false){
Ext.Msg.alert('信息',action.result.msg);
return;
}
f.reset();
logonWin.hide();
btnLogon.disable();
btnLogout.enable();
btnChangePwd.enable();
if(action.result.signed===false){//如果已签到,则禁用签到按钮
btnSign.enable();
}
},
failure:function(){
Ext.Msg.alert('错误','无法链接服务器.');
}
});
}
}
},{
text:'取消',
handler:function(){
logonForm.getForm().reset();
logonWin.hide();
}
}]
});
//登录窗口
var logonWin = new Ext.Window({
title:'用户登录',
autoHeight:true,
width:300,
closeAction:'hide',
items:[logonForm]
});
//修改密码表单
var changePwdForm = new Ext.FormPanel({
labelAlign:'right',
labelWidth:70,
frame:true,
url:'./sign_control.jsp?command=changePwd',
items:[
new Ext.form.TextField({
id:'oldPassword',
name:'oldPassword',
fieldLabel:'原密码',
inputType:'password',
allowBlank:false,
anchor:'100%'
}),
new Ext.form.TextField({
id:'newPassword',
name:'newPassword',
fieldLabel:'新密码',
inputType:'password',
allowBlank:false,
anchor:'100%'
}),
new Ext.form.TextField({
id:'newPassword2',
name:'newPassword2',
fieldLabel:'重复密码',
inputType:'password',
allowBlank:false,
anchor:'100%'
})
],
buttons:[{
text:'提交',
handler:function(){
var f = changePwdForm.getForm();
if(!f.isValid()) return;
if(Ext.get('newPassword').getValue() != Ext.get('newPassword2').getValue()){
Ext.Msg.alert('信息','两次输入的密码不一致');
return;
}
f.submit({
waitMsg:'执行中,请稍候...',
success:function(form, action){
Ext.Msg.alert('信息',action.result.msg);
if(action.result.changeOK===false){ //如果失败的话
return;
}
f.reset();
changePwdWin.hide();
},
failure:function(){
Ext.Msg.alert('错误','无法链接服务器.');
}
});
}
},{
text:'取消',
handler:function(){
changePwdForm.getForm().reset();
changePwdWin.hide();
}
}]
});
//修改密码窗口
var changePwdWin = new Ext.Window({
title:'修改密码',
autoHeight:true,
width:300,
closeAction:'hide',
items:[changePwdForm]
});
});
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2008-05-05
很基础 最好加一个layout,左边是树，右边通过tab展开
|
| 返回顶楼 | |
|
发表时间：2008-05-05
三四百行JS代码，读起来有些难以消受。
|
| 返回顶楼 | |
|
发表时间：2008-05-10
谢谢，可以直接运行吗？
|
| 返回顶楼 | |
|
发表时间：2008-05-12
这么多代码糅合在一起的话，读起来确实很费劲，如果是让别人来维护肯定是一种折磨哦
为什么不把那些组件扩展封装呢 比如说 一个LoginForm ，你可以把它扩展成你自己的LoginForm.js啊，需要用的时候，直接new一个就行了啊 |
| 返回顶楼 | |
|
发表时间：2008-05-13
用RESTful架构风格来做CRUD更加简单（目前正在用python/django作为后台）。
|
| 返回顶楼 | |
|
发表时间：2008-05-16
{
text: '删除',
handler: function(){
var sm = grid.getSelectionModel();
var selected = sm.getSelections();
var ids = [];
for(var i=0;i<selected.length;i++){
var member = selected[i].data;
alert(selected[i].data.Author);
if(member.id) {
ids.push(member.id); //如果有ID属性,则表示该行数据是被修改过的,所以需要访问数据库进行删除
}else{
//如果没有ID属性,则表示该行数据是新添加的未保存的数据,所以不需要访问数据库进行删除该行
store.remove(selected[i]);
}
}
store.remove(selected[i]); (楼主这个地方错了!不是store.remove(store.getAt(i)) ); |
| 返回顶楼 | |
|
发表时间：2008-05-17
错误处理不是很好哦，应该在这方面加强一下
|
| 返回顶楼 | |
|
发表时间：2008-05-19
呵呵 谢谢大家批评指正,我也只是刚摸到Ext,对很多东西还都不了解.
我们的项目经理觉得Ext的EditorGridPanel比较感兴趣,想让我拿过来用用,不过后来因为客户端机器比较陈旧的原因还是作罢了 |
| 返回顶楼 | |
|
发表时间：2008-05-19
关于store.remove(store.getAt(i)) )
store.getAt(i) 和 selected[i] 返回的对象应该是一样的 |
| 返回顶楼 | |
