extjs4 grid 新增、删除、修改

来源:互联网 发布:红牛 副作用 知乎 编辑:程序博客网 时间:2024/05/17 01:31

extjs4 grid 新增、删除、修改

extjsstringfunctionheaderbutton数据库

删除与修改的操作,分两块进行。页面删除与后台删除。因此在页面上进行删除或修改后成功后,后台只传递一个SUCCESS标记,若后台同步成功,则在页面的store中执行删除或者修改。减少网络中的数据传输。

但是这样有一个bug,就是当用户新增了幻影数据,并且与真实数据一起修改填写提交后,后台已经写入数据库。然后此时再删除之前添加的幻影数据,会导致id(代表一条记录的主键,本文代码中是userId)传递不到后台,导致无法查询删除。解决方案是当后台处理成功后,前台重新加载页面,但是这样网络负担就加重了。使之前的优势丧失



[javascript] view plaincopyprint?
  1. Ext.onReady(function() {  
  2.     Ext.define('User', {  
  3.                 extend : 'Ext.data.Model',  
  4.                 fields : [{  
  5.                             name : 'userId',  
  6.                             type : 'int',  
  7.                             useNull : true//这样数字如果值为空则不会自动转成0,则提交时注意后台bean类中的属性int要用对象类型,否则解析出错  
  8.                         }, {  
  9.                             name : 'loginName',  
  10.                             type : 'string'  
  11.                         }, {  
  12.                             name : 'password',  
  13.                             type : 'string'  
  14.                         }, {  
  15.                             name : 'remark',  
  16.                             type : 'string'  
  17.                         }, {  
  18.                             name : 'roleId',  
  19.                             type : 'float',  
  20.                             useNull : true  
  21.                         }, {  
  22.                             name : 'rightId',  
  23.                             type : 'float',  
  24.                             useNull : true  
  25.                         }, {  
  26.                             name : 'platformNo',  
  27.                             type : 'string'  
  28.                         }, {  
  29.                             name : 'groupId',  
  30.                             type : 'float',  
  31.                             useNull : true  
  32.                         }, {  
  33.                             name : 'net',  
  34.                             type : 'string'  
  35.                         }, {  
  36.                             name : 'email',  
  37.                             type : 'string'  
  38.                         }, {  
  39.                             name : 'linkman',  
  40.                             type : 'string'  
  41.                         }, {  
  42.                             name : 'tel',  
  43.                             type : 'string'  
  44.                         }, {  
  45.                             name : 'fax',  
  46.                             type : 'string'  
  47.                         }, {  
  48.                             name : 'address',  
  49.                             type : 'string'  
  50.                         }],  
  51.                 idProperty : 'userId'// 极为重要的配置。关系到表格修改数据的获取  
  52.             });  
  53.   
  54.     var store = new Ext.data.Store({  
  55.                 model : 'User',  
  56.                 pageSize : 3,  
  57.                 proxy : {  
  58.                     type : 'ajax',  
  59.                     url : 'baseUsers.action',  
  60.                     reader : {  
  61.                         type : 'json',  
  62.                         root : 'pageBean.list',  
  63.                         totalProperty : 'pageBean.total'  
  64.                     }  
  65.                 },  
  66.                 autoLoad : false  
  67.             });  
  68.     var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {  
  69.                 clicksToEdit : 2  
  70.             });  
  71.     var grid = Ext.create('Ext.grid.Panel', {  
  72.         tbar : [ {  
  73.                     xtype : 'button',  
  74.                     text : '新增',  
  75.                     handler : add  
  76.                 },{  
  77.                     xtype : 'button',  
  78.                     text : '提交修改',  
  79.                     handler : alter  
  80.                 }, {  
  81.                     xtype : 'button',  
  82.                     text : '删除',  
  83.                     handler : otherDelete  
  84.                 }],  
  85.         title : 'All Products',  
  86.         store : store,  
  87.         columnLines : true,  
  88.         selModel : Ext.create('Ext.selection.CheckboxModel'),  
  89.         columns : [{  
  90.                     header : 'userId',  
  91.                     dataIndex : 'userId',  
  92.                     hidden:true  
  93.                 }, {  
  94.                     header : 'loginName',  
  95.                     dataIndex : 'loginName',  
  96.                     editor : {  
  97.                         allowBlank : false  
  98.                     }  
  99.                 }, {  
  100.                     header : 'password',  
  101.                     dataIndex : 'password',  
  102.                     editor : {  
  103.                         allowBlank : false  
  104.                     }  
  105.                 }, {  
  106.                     header : 'remark',  
  107.                     dataIndex : 'remark',  
  108.                     editor : {  
  109.                         allowBlank : false  
  110.                     }  
  111.                 }, {  
  112.                     header : 'roleId',  
  113.                     dataIndex : 'roleId',  
  114.                     editor : {  
  115.                         allowBlank : false  
  116.                     }  
  117.                 }, {  
  118.                     header : 'rightId',  
  119.                     dataIndex : 'rightId',  
  120.                     editor : {  
  121.                         allowBlank : false  
  122.                     }  
  123.                 }, {  
  124.                     header : 'platformNo',  
  125.                     dataIndex : 'platformNo',  
  126.                     editor : {  
  127.                         allowBlank : false  
  128.                     }  
  129.                 }, {  
  130.                     header : 'groupId',  
  131.                     dataIndex : 'groupId',  
  132.                     editor : {  
  133.                         allowBlank : false  
  134.                     }  
  135.                 }, {  
  136.                     header : 'net',  
  137.                     dataIndex : 'net',  
  138.                     editor : {  
  139.                         allowBlank : false  
  140.                     }  
  141.                 }, {  
  142.                     header : 'email',  
  143.                     dataIndex : 'email',  
  144.                     editor : {  
  145.                         allowBlank : false  
  146.                     }  
  147.                 }, {  
  148.                     header : 'linkman',  
  149.                     dataIndex : 'linkman',  
  150.                     editor : {  
  151.                         allowBlank : false  
  152.                     }  
  153.                 }, {  
  154.                     header : 'tel',  
  155.                     dataIndex : 'tel',  
  156.                     editor : {  
  157.                         allowBlank : false  
  158.                     }  
  159.                 }, {  
  160.                     header : 'fax',  
  161.                     dataIndex : 'fax',  
  162.                     editor : {  
  163.                         allowBlank : false  
  164.                     }  
  165.                 }, {  
  166.                     header : 'address',  
  167.                     dataIndex : 'address',  
  168.                     editor : {  
  169.                         allowBlank : false  
  170.                     }  
  171.                 }],  
  172.   
  173.         forceFit : true,  
  174.         dockedItems : [{  
  175.                     xtype : 'pagingtoolbar',  
  176.                     store : store, // same store GridPanel is  
  177.                     // using  
  178.                     dock : 'bottom',  
  179.                     displayInfo : true  
  180.                 }],  
  181.         renderTo : 'userMngDiv',  
  182.         plugins : [cellEditing]  
  183.             // autoRender:true  
  184.         });  
  185.     store.loadPage(1);  
  186.     var p = parent.Ext.getCmp('contentTabs');  
  187.     // alert(p);  
  188.     function alter() {  
  189.         var records = store.getUpdatedRecords();// 获取修改的行的数据,无法获取幻影数据  
  190.         var phantoms=store.getNewRecords( ) ;//获得幻影行  
  191.         records=records.concat(phantoms);//将幻影数据与真实数据合并  
  192.         if (records.length == 0) {  
  193.             Ext.MessageBox.show({  
  194.                 title : "提示",  
  195.                 msg : "没有任何数据被修改过!"  
  196.                     // icon: Ext.MessageBox.INFO  
  197.                 });  
  198.             return;  
  199.         } else {  
  200.             Ext.Msg.confirm("请确认""是否真的要修改数据?"function(button, text) {  
  201.                 if (button == "yes") {  
  202.                     var data = [];  
  203.                     // alert(records);  
  204.                     Ext.Array.each(records, function(record) {  
  205.                         data.push(record.data);  
  206.                             // record.commit();// 向store提交修改数据,页面效果  
  207.                         });  
  208.   
  209.                     Ext.Ajax.request({  
  210.                         url : 'alterUsers.action',  
  211.                         params : {  
  212.                             alterUsers : Ext.encode(data)  
  213.                         },  
  214.                         method : 'POST',  
  215.                         timeout : 2000,  
  216.   
  217.                         success : function(response, opts) {  
  218.                             var success = Ext.decode(response.responseText).success;  
  219.                             // 当后台数据同步成功时  
  220.                             if (success) {  
  221.                                 Ext.Array.each(records, function(record) {  
  222.                                             // data.push(record.data);  
  223.                                             record.commit();// 向store提交修改数据,页面效果  
  224.                                         });  
  225.                             } else {  
  226.                                 Ext.MessageBox.show({  
  227.                                     title : "提示",  
  228.                                     msg : "数据修改失败!"  
  229.                                         // icon: Ext.MessageBox.INFO  
  230.                                     });  
  231.                             }  
  232.                         }  
  233.                     });  
  234.                 }  
  235.             });  
  236.   
  237.         }  
  238.   
  239.     }  
  240.     // 传递对象删除  
  241. //  function deleteUsers() {  
  242. //      var data = grid.getSelectionModel().getSelection();  
  243. //      // alert(data);  
  244. //      if (data.length == 0) {  
  245. //          Ext.MessageBox.show({  
  246. //              title : "提示",  
  247. //              msg : "请先选择您要操作的行!"  
  248. //                  // icon: Ext.MessageBox.INFO  
  249. //              });  
  250. //          return;  
  251. //      } else {  
  252. //          Ext.Msg.confirm("请确认", "是否真的要删除数据?", function(button, text) {  
  253. //              if (button == "yes") {  
  254. //                  var ids = [];  
  255. //                  Ext.Array.each(data, function(record) {  
  256. //                              ids.push(record.data);  
  257. //                          });  
  258. //                  Ext.Ajax.request({  
  259. //                      url : 'deleteUsers.action',  
  260. //                      params : {  
  261. //                          deleteUsers : Ext.encode(ids)  
  262. //                      },  
  263. //                      method : 'POST',  
  264. //                      // timeout : 2000,//默认30秒  
  265. //                      success : function(response, opts) {  
  266. //                          var success = Ext.decode(response.responseText).success;  
  267. //                          // 当后台数据同步成功时  
  268. //                          if (success) {  
  269. //                              Ext.Array.each(data, function(record) {  
  270. //                                          store.remove(record);// 页面效果  
  271. //                                      });  
  272. //                          } else {  
  273. //                              Ext.MessageBox.show({  
  274. //                                  title : "提示",  
  275. //                                  msg : "数据删除失败!"  
  276. //                                      // icon: Ext.MessageBox.INFO  
  277. //                                  });  
  278. //                          }  
  279. //  
  280. //                      }  
  281. //                  });  
  282. //              }  
  283. //          });  
  284. //   
  285. //      }  
  286. //  }   
  287.     // 编码ID删除  
  288.     function otherDelete() {  
  289.   
  290.         var data = grid.getSelectionModel().getSelection();  
  291.         // alert(data);  
  292.         if (data.length == 0) {  
  293.             Ext.MessageBox.show({  
  294.                 title : "提示",  
  295.                 msg : "请先选择您要操作的行!"  
  296.                     // icon: Ext.MessageBox.INFO  
  297.                 });  
  298.             return;  
  299.         } else {  
  300.             Ext.Msg.confirm("请确认""是否真的要删除数据?"function(button, text) {  
  301.                 if (button == "yes") {  
  302.                     var ids = [];  
  303.                     Ext.Array.each(data, function(record) {  
  304.                                 var userId=record.get('userId');  
  305.                                 //如果删除的是幻影数据,则id就不传递到后台了,直接在前台删除即可  
  306.                                 if(userId){  
  307.                                     ids.push(userId);  
  308.                                 }  
  309.                                   
  310.                             });  
  311.   
  312.                     Ext.Ajax.request({  
  313.                         url : 'deleteUsers.action',  
  314.                         params : {  
  315.                             deleteIds : ids.join(',')  
  316.                         },  
  317.                         method : 'POST',  
  318.                         // timeout : 2000,//默认30秒  
  319.                         success : function(response, opts) {  
  320.   
  321.                             // store.loadPage(1);  
  322.   
  323.                             var success = Ext.decode(response.responseText).success;  
  324.                             // 当后台数据同步成功时  
  325.                             if (success) {  
  326.                                 Ext.Array.each(data, function(record) {  
  327.                                             store.remove(record);// 页面效果  
  328.                                         });  
  329.                             } else {  
  330.                                 Ext.MessageBox.show({  
  331.                                     title : "提示",  
  332.                                     msg : "数据删除失败!"  
  333.                                         // icon: Ext.MessageBox.INFO  
  334.                                     });  
  335.                             }  
  336.   
  337.                         }  
  338.                     });  
  339.                 }  
  340.             });  
  341.   
  342.         }  
  343.   
  344.     }  
  345.     function add(){  
  346.         store.insert(0,new User());  
  347.     }  
  348. });  


[java] view plaincopyprint?
  1. package wk.len.actions.system;  
  2. import java.util.ArrayList;  
  3. import java.util.List;  
  4.   
  5. import net.sf.json.JSONArray;  
  6. import net.sf.json.JSONObject;  
  7.   
  8.   
  9. import wk.len.beans.PageBean;  
  10. import wk.len.po.BaseUsers;  
  11.   
  12.   
  13. import com.opensymphony.xwork2.ActionSupport;  
  14.   
  15. public class UsersAction extends ActionSupport {  
  16.     private PageBean pageBean;  
  17.     private int start;  
  18.     private int limit;  
  19.     private String alterUsers;  
  20.     private String deleteIds;  
  21.     private boolean success;  
  22.       
  23.     public String usersInfo() throws Exception {  
  24.         int end = start + limit;  
  25.         if(end>86)  
  26.             end=86;  
  27.         List<BaseUsers> list = new ArrayList<BaseUsers>();  
  28.         for (int i = start; i <end; i++) {  
  29.             BaseUsers p=new BaseUsers();  
  30.             p.setUserId(i);  
  31.         list.add(p);  
  32.         }  
  33.         int totalProperty=86;  
  34.         pageBean=new PageBean(list,totalProperty);   
  35.         success=true;//若没有,grid会取不到数据。或者干脆就不要有success这个标记,这样grid默认就能取出数据了  
  36.         return SUCCESS;  
  37.     }  
  38.       
  39.     public String deleteUsers(){  
  40.   
  41.            
  42. //        JSONArray array = JSONArray.fromObject(deleteUsers);   
  43. //        List<BaseUsers> obj = new ArrayList<BaseUsers>();   
  44. //        for(int i = 0; i < array.size(); i++){   
  45. //        JSONObject jsonObject = array.getJSONObject(i);   
  46. //        obj.add((BaseUsers) JSONObject.toBean(jsonObject, BaseUsers.class));   
  47. //        }   
  48.           System.out.println(deleteIds);  
  49.           String[]Ids=deleteIds.split(",");//传递到数据库的参数  
  50.           System.out.println(Ids[0]);  
  51.          // System.out.println(obj.get(0).getEmail());  
  52.           success=true;//需要后台数据库修改成功后传递该值  
  53.           return SUCCESS;  
  54.     }  
  55.     public String alterUsers(){  
  56.           JSONArray array = JSONArray.fromObject(alterUsers);   
  57.           List<BaseUsers> alertUsers = new ArrayList<BaseUsers>(); //传递到数据库修改的参数  
  58.           for(int i = 0; i < array.size(); i++){   
  59.           JSONObject jsonObject = array.getJSONObject(i);   
  60.           alertUsers.add((BaseUsers) JSONObject.toBean(jsonObject, BaseUsers.class));   
  61.           }  
  62.          // System.out.println(alertUsers);  
  63.           success=true;//需要后台数据库修改成功后传递该值  
  64.           return SUCCESS;  
  65.     }  
  66.     public PageBean getPageBean() {  
  67.         return pageBean;  
  68.     }  
  69.   
  70.     public void setPageBean(PageBean pageBean) {  
  71.         this.pageBean = pageBean;  
  72.     }  
  73.   
  74.     public int getStart() {  
  75.         return start;  
  76.     }  
  77.   
  78.     public void setStart(int start) {  
  79.         this.start = start;  
  80.     }  
  81.   
  82.     public int getLimit() {  
  83.         return limit;  
  84.     }  
  85.   
  86.     public void setLimit(int limit) {  
  87.         this.limit = limit;  
  88.     }  
  89.   
  90.   
  91.   
  92.     public String getAlterUsers() {  
  93.         return alterUsers;  
  94.     }  
  95.   
  96.     public void setAlterUsers(String alterUsers) {  
  97.         this.alterUsers = alterUsers;  
  98.     }  
  99.   
  100.     public boolean isSuccess() {  
  101.         return success;  
  102.     }  
  103.   
  104.     public void setSuccess(boolean success) {  
  105.         this.success = success;  
  106.     }  
  107.   
  108.     public String getDeleteIds() {  
  109.         return deleteIds;  
  110.     }  
  111.   
  112.     public void setDeleteIds(String deleteIds) {  
  113.         this.deleteIds = deleteIds;  
  114.     }  
  115.   
  116.   
  117.   
  118. }  

struts2配置

[html] view plaincopyprint?
  1. <struts>  
  2.     <package name="system" extends="json-default" namespace="/">  
  3.         <action name="baseUsers" class="wk.len.actions.system.UsersAction" method="usersInfo">  
  4.             <result name="success" type="json">  
  5.                   
  6.             </result>  
  7.         </action>  
  8.         <action name="deleteUsers" class="wk.len.actions.system.UsersAction" method="deleteUsers">  
  9.             <result name="success" type="json">  
  10.                 <param name="includeProperties">success</param>  
  11.             </result>  
  12.         </action>  
  13.         <action name="alterUsers" class="wk.len.actions.system.UsersAction" method="alterUsers">  
  14.             <result name="success" type="json">  
  15.                 <param name="includeProperties">success</param>  
  16.             </result>  
  17.         </action>  
  18.     </package>  
  19. </struts>      
原创粉丝点击