Ext DataGrid 增删改查例子
程序员文章站
2022-04-08 18:52:08
...
自己做的一个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;
}
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;
}
上一篇: 兄弟,握好你手里的抢吧
推荐阅读
-
EasyUI DataGrid结合ThinkPHP实现增删改查操作初学者_html/css_WEB-ITnose
-
EasyUI DataGrid结合ThinkPHP实现增删改查操作初学者_html/css_WEB-ITnose
-
node+express+mysql增删改查小例子
-
ThinkPHP学习札记(八)一个用户增删改查的小例子
-
EasyUI DataGrid结合ThinkPHP实现增删改查操作———菜鸟
-
一个在ASP.NET中利用服务器控件GridView实现数据增删改查的例子_html/css_WEB-ITnose
-
ThinkPHP学习札记(八)一个用户增删改查的小例子
-
Spring MVC+SimpleJdbcDaoSupport增删改查小例子
-
一个在ASP.NET中利用服务器控件GridView实现数据增删改查的例子_html/css_WEB-ITnose
-
Ext DataGrid 增删改查例子