Ext DataGrid 增删改查例子

自己做的一個Ext例子，基于Struts1的，Struts2和Strut1的差別還是很大的，這裡隻展示下Struts1的。

Ext.onReady(function(){

Ext.QuickTips.init(); //顯示提示資訊

var store = new Ext.data.JsonStore({

autoDestroy: true,

autoLoad:true,

url: 'work.do?method=dataQuery',

totalProperty: 'results',

root:'rows',

fields:["workId","areaCode","workStartTime","workEndTime","deptCode","empNo","createTime","effectiveTime"]

});

var sm = new Ext.grid.CheckboxSelectionModel();

var colM=new Ext.grid.ColumnModel([

sm,

{header: "序号", width: 50, sortable: true, dataIndex: 'workId'},

{header: "區部代碼", width: 100, sortable: true, dataIndex: 'areaCode'},

{header: "上班時間", width: 100, sortable: true, dataIndex: 'workStartTime'},

{header: "下班時間", width: 100, sortable: true, dataIndex: 'workEndTime'},

{header: "配置網點", width: 100, sortable: true, dataIndex: 'deptCode'},

{header: "配置人", width: 100, sortable: true, dataIndex: 'empNo'},

{header: "配置時間", width: 150, sortable: true, dataIndex: 'createTime',renderer:CreateRender},

{header: "生效日期", width: 150, sortable: true, dataIndex: 'effectiveTime',renderer:EffectiveRender }

]);

function CreateRender(value){

if(value instanceof Date){

return new Date(value).format("Y-m-d");

}else{

return Ext.util.Format.substr(value,0,19);

}

}

function EffectiveRender(value){

if(value instanceof Date){

return new Date(value).format("Y-m-d");

}else{

return Ext.util.Format.substr(value,0,10);

}

}

var tbars = [{

text:'添加',

tooltip:'添加記錄',

handler:function(){

postForm.getForm().reset();

postWindow.show();

}

},

{xtype:'tbseparator'},

{

text:'删除',

tooltip:'删除選中的記錄',

handler:function(){

var _record = sm.getSelected();

if(_record){

Ext.Msg.confirm("是否要删除？","是否要删除這些被選擇的資料？",

function(btn){

if(btn == "yes"){

var ss = sm.getSelections();

var delUrl = "work.do?method=delete&";

var ids="";

for(var i=0; i<ss.length; i++){

ids=ids+ss[i].data.workId+",";

}

delUrl = delUrl + "ids="+ids;

Ext.Ajax.request({

url:delUrl,

success:function(){

Ext.Msg.alert("删除資訊成功","您已經成功删除資訊！");

store.reload();

},

failure:function(){

Ext.Msg.alert('錯誤','伺服器出現錯誤請稍後再試！');

}

});

}

}

);

}else{

Ext.Msg.alert('删除操作','您必須選擇一行資料以便删除！');

}

}

},

{xtype:'tbseparator'},

{

text:'修改',

handler:function(){

postForm.getForm().reset();

var rows = Ext.getCmp("gridView").getSelectionModel().getSelections();

if(rows.length!=1){

Ext.Msg.alert("","請你選擇一行資料進行操作！");

return;

}

postWindow.show();

postForm.getForm().findField('workId').setValue(rows[0].get('workId'));

postForm.getForm().findField('areaCode').setValue(rows[0].get('areaCode'));

postForm.getForm().findField('workStartTime').setValue(rows[0].get('workStartTime'));

postForm.getForm().findField('workEndTime').setValue(rows[0].get('workEndTime'));

postForm.getForm().findField('deptCode').setValue(rows[0].get('deptCode'));

postForm.getForm().findField('empNo').setValue(rows[0].get('empNo'));

var effective=Ext.util.Format.substr(rows[0].get('effectiveTime'),0,10);

postForm.getForm().findField('effectiveTime').setValue(effective);

}

}

];

var bar=new Ext.PagingToolbar({

pageSize: 20,

store: store,

displayInfo: true,

displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',

emptyMsg: "沒有記錄"

});

var grid = new Ext.grid.GridPanel({

id:'gridView',

store: store,

cm:colM,

title:'上班時間資訊清單',

renderTo:"hello",

tbar:tbars,

bbar:bar,

sm: sm,

layout: 'fit',

height:650

});

//建立表單的視窗

var postForm = new Ext.form.FormPanel({

frame : true ,

defaultType : 'textfield' ,

buttonAlign : 'center' ,

labelAlign : 'right' ,

labelWidth : 70 ,

width :300,

items: [

{

xtype:"hidden",

name:"workId"

},

{

fieldLabel:"區部代碼",

name:"areaCode"

},

{

fieldLabel:"上班時間",

name:"workStartTime"

},

{

fieldLabel:"下班時間",

name:"workEndTime"

},

{

fieldLabel:"配置網點",

name:"deptCode"

},

{

fieldLabel:"配置人",

name:"empNo"

},

{

xtype: "datefield",

format:'Y-m-d',

fieldLabel:"生效日期",

width: 120,

height:10,

name:"effectiveTime"

}

],

buttons: [{

xtype:'button',

text: '儲存',

handler:function(){

Ext.MessageBox.show({

msg: '正在儲存，請稍等...',

progressText: 'Saving...',

wait:true,

waitConfig: {interval:200},

icon:'download'

});

postForm.form.doAction('submit',{

url:"work.do?method=add",

method:'post',

success:function(form,action){

Ext.MessageBox.hide();

Ext.Msg.alert('恭喜','儲存目标成功');

store.reload();

postWindow.hide();

},

failure:function(){

Ext.Msg.alert('錯誤','伺服器出現錯誤請稍後再試！');

}

});

}

},

{

text: '取消',

handler:function(){

postWindow.hide();

}

}]

});

//将表單放到一個視窗中，并顯示

var postWindow = new Ext.Window({

title: "人員資訊表單",

width: 300,

height:260,

collapsible:true,

maximizable:true,

layout: 'form',

plain:true,

modal:true,

closeAction: 'hide',

items: postForm

});

});

//背景java代碼

//查詢清單

public ActionForward dataQuery(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response)

throws Exception {

try{

List<WorkTimeConfig> workList=workTimeConfigService.listAll();

String json = "{results:"+workList.size()+",rows:[";

for(WorkTimeConfig config:workList){

json += "{workId:" + config.getWorkId()+ ",areaCode:'"+config.getAreaCode()+ "',workStartTime:'" + config.getWorkStartTime()+ "'," + "workEndTime:'"+config.getWorkEndTime()+"',deptCode:'"+config.getDeptCode()+"',empNo:'"+config.getEmpNo()+"',createTime:'"+config.getCreateTime()+"',effectiveTime:'"+config.getEffectiveTime()+"'},";

}

json=json.substring(0,json.length()-1);

json += "]}";

PrintWriter pw = response.getWriter();

pw.write(json);

}catch(Exception ce){

ce.printStackTrace();

}

return null;

}

//新增方法(不想使用ActionForm，字段比較少，是以就用最傳統的方式)

public ActionForward add(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws Exception {

String workId=request.getParameter("workId");

if(null!=workId&&!"".equals(workId)){

WorkTimeConfig workConfig=new WorkTimeConfig();

workConfig.setWorkId(Long.parseLong(workId));

workConfig.setAreaCode(request.getParameter("areaCode"));

workConfig.setWorkStartTime(request.getParameter("workStartTime"));

workConfig.setWorkEndTime(request.getParameter("workEndTime"));

java.text.SimpleDateFormat df=new java.text.SimpleDateFormat("yyyy-MM-dd");

workConfig.setEffectiveTime(df.parse(request.getParameter("effectiveTime")));

workTimeConfigService.UpdateWorkTime(workConfig);

}else{

WorkTimeConfig workConfig=new WorkTimeConfig();

workConfig.setAreaCode(request.getParameter("areaCode"));

workConfig.setWorkStartTime(request.getParameter("workStartTime"));

workConfig.setWorkEndTime(request.getParameter("workEndTime"));

workConfig.setDeptCode("001");

workConfig.setEmpNo("admin");

java.text.SimpleDateFormat df=new java.text.SimpleDateFormat("yyyy-MM-dd");

workConfig.setEffectiveTime(df.parse(request.getParameter("effectiveTime")));

workTimeConfigService.addWorkTime(workConfig);

}

PrintWriter pw = response.getWriter();

pw.write("{success:true}");

return null;

}

//删除方法

public ActionForward delete(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response)

throws Exception {

String id=request.getParameter("ids");

String [] ids=id.split(",");

for(int i=0;i<ids.length;i++){

workTimeConfigService.deleteWorkTime(Long.parseLong(ids[i]));

}

PrintWriter pw = response.getWriter();

pw.write("{success:true}");

return null;

}