欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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 struts1 json