Extjs学习总结之EditGridPanel可编辑表格

来源：互联网发布：107火箭炮知乎编辑：程序博客网时间：2024/06/01 17:41
Ext.onReady(function(){      /*      * EditorGridPanel的工作过程      * 1、用户点击单元格      * 2、单元格按照预设的组件显示单元格的内容并处于编辑状态      * 3、离开单元格的编辑状态      * 4、更新编辑后的内容，出现三角号表示已经被修改过      * 5、程序内部变化：将记录设置为脏读数据状态，并将修改后的记录存放在Record类型的数组modified中。      */                  //准备数据      var data = [          {id:1,date:new Date(),name:"吕鹏",address:"中华人民共和国",bank:"中国光大银行",isFast:true},          {id:2,date:new Date(),name:"张三",address:"中华人民共和国",bank:"中国农业银行",isFast:false},          {id:3,date:new Date(),name:"李四",address:"中华人民共和国",bank:"中国商业银行",isFast:false},          {id:4,date:new Date(),name:"王五",address:"中华人民共和国",bank:"中国招商银行",isFast:false}      ];      //Proxy      var proxy = new Ext.data.MemoryProxy(data);      //描述数据结构      var Order = Ext.data.Record.create(          [              {name:"ID",type:"int",mapping:"id"},//编号              {name:"DATE",type:"date",mapping:"date"},//日期              {name:"NAME",type:"string",mapping:"name"},//姓名              {name:"ADDRESS",type:"string",mapping:"address"},//地址              {name:"BANK",type:"string",mapping:"bank"},//银行              {name:"ISFAST",type:"boolean",mapping:"isFast"}//银行          ]      );      //Reader      var reader = new Ext.data.JsonReader({},Order);      //Store  列模型中的dataIndex必须和Human结构中的name属性保持一致      var store = new Ext.data.Store({          proxy:proxy,          reader:reader,          autoLoad:true,          pruneModifiedRecords:true      });            //交易银行      var banks = [          ["中国光大银行","中国光大银行"],          ["中国农业银行","中国农业银行"],          ["中国商业银行","中国商业银行"],          ["中国招商银行","中国招商银行"]      ]            //列模型      var cm = new Ext.grid.ColumnModel([          {header:"订单编号",dataIndex:"ID",width:60,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false}))},          {header:"下单日期",dataIndex:"DATE",width:140,renderer:new Ext.util.Format.dateRenderer("Y-m-d"),editor:new Ext.grid.GridEditor(new Ext.form.DateField({              format:"Y-m-d"          }))},          {header:"收货人姓名",dataIndex:"NAME",width:120,editor:new Ext.grid.GridEditor(new Ext.form.TextField())},          {header:"收货人地址",dataIndex:"ADDRESS",editor:new Ext.grid.GridEditor(new Ext.form.TextField())},          {header:"交易银行",dataIndex:"BANK",width:120,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({              store:new Ext.data.SimpleStore({                  fields:["value","text"],                  data:banks              }),              displayField:"text",              valueField:"value",              mode:"local",              triggerAction:"all",              readOnly:true,              emptyText:"请选择银行"                        }))},          {header:"快递",dataIndex:"ISFAST",width:70,renderer:function(v){return v?"快递":"非快递"},editor:new Ext.grid.GridEditor(new Ext.form.Checkbox())}      ]);      //EditorGridPanel定义      var grid = new Ext.grid.EditorGridPanel({          store:store,          cm:cm,          autoExpandColumn:"ADDRESS",          width:800,          autoHeight:true,          renderTo:"a",          autoEncode:true, //提交时是否自动转码          tbar:[{              text:"添加一行",              cls:"x-btn-text-icon",              handler:function(){                  var initValue = {                          ID:"",                          DATE:new Date(),                          NAME:"",                          ADDRESS:"",                          BANK:"",                          ISFAST:false                      };                                        var order = new Order(initValue);                  grid.stopEditing();                  grid.getStore().add(order);                                    //设置脏数据                  order.dirty = true;                  //只要一个字段值被修改了，该行的所有值都设置为脏读标记                  order.modified = initValue;                  if(grid.getStore().modified.indexOf(order) == -1){                      grid.getStore().modified.push(order);                  }              }                        },{              text:"删除一行",              cls:"x-btn-text-icon",              handler:function(){                  var sm = grid.getSelectionModel();                  if(sm.hasSelection()){                      Ext.Msg.confirm("提示","真的要删除选中的行吗？",function(btn){                          if(btn == "yes"){                              var cellIndex = sm.getSelectedCell();//获取被选择的单元格的行和列索引                              var record = grid.getStore().getAt(cellIndex[0]);                              grid.getStore().remove(record);                          }                      });                  }else{                      Ext.Msg.alert("错误","请先选择删除的行，谢谢");                  }              }          },"-",{              text:"保存",  //          icon:"",              cls:"x-btn-text-icon",              handler:function(){                  var store = grid.getStore();                  //得到修改过的Recored的集合                  var modified = store.modified.slice(0);                  //将数据放到另外一个数组中                  var jsonArray = [];                  Ext.each(modified,function(m){                      //alert(m.data.ADDRESS);//读取当前被修改的记录的地址                      //m.data中保存的是当前Recored的所有字段的值json，不包含结构信息                      jsonArray.push(m.data);                  });                                    var r = checkBlank(modified);                  if(!r){                      return;                  }else{                      //通过ajax请求将修改的记录发送到服务器最终影响数据库                      Ext.Ajax.request({                          method:"post",//最好不要用get请求                          url:"../../../editGridServlet",                          success:function(response,config){                              var json = Ext.util.JSON.decode(response.responseText);                              //grid.getStore().reload();                              Ext.Msg.alert("提交成功",json.msg);                          },                          params:{data:Ext.util.JSON.encode(jsonArray)}                                                });                  }              }          }]      });      //删除一行时，同步数据库      grid.getStore().on("remove",function(s,record,index){          var jsonArray = [record,data];//因为servlet只处理数组，所以先变成数组          if(record.data.ID != ""){              Ext.Ajax.request({                  method:"post",                  url:"../../../editGridServlet",                  params:{data:Ext.util.JSON.encode(jsonArray),action:"delete"},                  success:function(response,config){                      var msg = Ext.util.JSON.decode(response.responseText);                      //grid.getStore().reload();                      Ext.Msg.alert("",msg.msg);                  }              });          }      });            //验证是否输入的数据是有效的      var checkBlank = function(modified/*所有编辑过的和新增加的Record*/){          var result = true;          Ext.each(modified,function(record){              var keys = record.fields.keys;//获取Record的所有名称              Ext.each(keys,function(name){                  //根据名称获取相应的值                  var value = record.data[name];                  //找出指定名称所在的列索引                  var colIndex = cm.findColumnIndex(name);                  //var rowIndex = grid.getStore().indexOfId(record.id);                                    //根据行列索引找出组件编辑器                  var editor = cm.getCellEditor(colIndex).field;                  //验证是否合法                  var r = editor.validateValue(value);                  if(!r){                      Ext.MessageBox.alert("验证","对不起，您输入的数据非法");                      result = false;                      return;                  }                                });          });          return result;      }  });
其他参考：http://wenku.baidu.com/link?url=1xrZOvaqjlxzgRgsKtEt70QMsrvWIaD2Chk_lpCPFJtdnLRj1xT6YLod4i_G3ENd9yjtsZz0ruo5WVE3h9q8OGl4nazbhwzwp5uGw6MPGwW
0 0