Ext Grid实现增删改查的例子

  一：new Ext.grid.EditorGridPanel实现行内增删改查

var stationLineStore=new Ext.data.JsonStore({
        url:"../../../addByShowStationLine.do?lineCode="+myCjxx.lineCode, // 数据源
           fields:[ 'stationCode', 'stationName', 'stationNumcode','distance']
          });
var stationStore = new Ext.data.JsonStore({
        url:"../../../showStationByCjId.do?cjId="+myCjxx.cjId, // 数据源
        fields:['cjId','stationName','stationCode','distance','stationId']
   });
stationStore.load();
var stationCj = Ext.data.Record.create([
                                {name:"cjId",type:"string"},
                                {name:"stationName",type:"string"},
                                {name:"distance",type:"int"},
                                {name:"stationCode",type:"string"},
                                {name:"stationId",type:"string"}
                           ]);
//车站
var stationCm = new Ext.grid.ColumnModel(
         [
             new Ext.grid.RowNumberer(), {
              header : "",
              id:"stationId",
                 dataIndex: 'stationId',
     hidden : true,
               },
             {
                 header   : '车站名称',
                 width    : 60,
                 sortable : true,
                 dataIndex: 'stationName',
                 editor:new Ext.form.ComboBox({
               allowBlank: false,
               id:'stationLine',
               triggerAction:  'all',
               forceSelection: true,
               editable:       false,//只能选 不能输入
               displayField:   'stationName',
                        valueField:     'stationCode',
                        store:stationLineStore,
                        listeners:{
                         "select":function(com,record,index){
                        var currentGird = Ext.getCmp("grid1");
                        var num = currentGird.getSelectionModel().lastActive;//行号
                       
                       var curGridRe=stationStore.getAt(num);

                     
                       
                            curGridRe.set("stationCode",record.get('stationCode'));//设置
                            curGridRe.set("stationName",record.get('stationName'));//设置
                            curGridRe.set("distance",record.get('distance'));
                            curGridRe.set("stationNumcode",record.get('stationNumcode'));
                         

                         }
                        }
           }),
           renderer: function(value, cellmeta, record) {
           
            var index = stationLineStore.find(Ext.getCmp('stationLine').valueField,value);
            var tempRecord = stationLineStore.getAt(index);
          
            var displayText = "";
            if (record == null || tempRecord == null) {
               displayText = value;
            } else {
               displayText = tempRecord.get("stationName");
            }
            record.set("stationName",displayText);
           
            return displayText;
                  }// */
             },
             {
                 header   : '距离',
                 width    : 60,
                 sortable : true,
                 dataIndex: 'distance'
             }
         ]
     );
var stationGrid = new Ext.grid.EditorGridPanel({
        store: stationStore,
        id:'grid1',
        sm : sm,
  cm : stationCm,
        stripeRows: true,
        height: 100,
        clicksToEdit:2,
        autoWidth:true,
        autoScroll: true,
        title:"场景车站",
        viewConfig: {
            forceFit: true
        },
        tbar:[{ 
             text : '删除', 
             iconCls:'silk-delete', 
             handler : function(src) { 
      
              var rows = stationGrid.getSelectionModel().getSelections();//返回的是数组
              if(rows.length==0){
               Ext.MessageBox.alert("警告","最少选择一条信息，进行删除!");
              }else{
               Ext.MessageBox.confirm("提示框","您确定要删除选择的信息?",function(btn){
                if(btn=="yes"){
                 var json = new Array();
                 for(var i = 0, r; r = rows[i]; i++){
                  var js = {};
                 js.cjId = r.get('cjId');
                 js.stationId=r.get('stationId');
                 json.push(js);
                       }
              
                Ext.Ajax.request({
                    url:'../../../deleteStationCj.do',
                    params:{json:"["+_ToJSON(json)+"]"},
                    success:function(res,op){
                      var result = Ext.util.JSON.decode(res.responseText);
                      if(result.deletes==true){
                       Ext.MessageBox.alert("提示","删除成功");
                       stationStore.reload();
                      }else{
                       Ext.MessageBox.alert("提示","删除失败");
                       return;
                      }
                    },
                    failure:function(res,op){
                      var result = Ext.util.JSON.decode(res.responseText);
                       if(result.deletes==false){
                        Ext.MessageBox.alert("提示","可能存在主外键关系");
                        return;
                       }
                    }
                   });
                }
               });
               //对话框结束
              }
             
             }
          },{ 
                   text : '新增', 
                   iconCls:'silk-add', 
                   handler : function(btn, ev) {
            
                 var c= new stationCj({
                  cjId:myCjxx.cjId,
                 stationName:'',
                 stationId:0,
                 stationCode:"",
                  distance:0
                       });
                 var curenStoreCount=stationGrid.getStore().getCount();
                 stationGrid.stopEditing();
                 stationStore.insert(curenStoreCount,c);
                 stationGrid.getSelectionModel().selectRow(curenStoreCount);
                 stationGrid.startEditing(curenStoreCount,2);
                  }
                },
                { 
                    text : '保存', 
                    iconCls:'icon-save', 
                    handler : function(btn, ev) {
                     var rows = stationGrid.getSelectionModel().getSelections();//返回的是数组
                   if(rows.length==0||rows.length>1){
                   Ext.MessageBox.alert("警告","选择一条信息，进行保存!");
                   }else{
                    var selectRow= stationGrid.getSelectionModel().lastActive;
                      var r = stationGrid.getStore().getAt(selectRow);//获取当前选中行的record
                   
                   var json = {};
                   json.cjId=r.get('cjId');
                   json.stationName=r.get("stationName");
                   json.stationId=r.get('stationId');
                   json.lineCode = myCjxx.lineCode;
                  json.distance=r.get("distance");
                  json.stationCode=r.get("stationCode");
                     json.stationNumcode=r.get("stationNumcode");
                   if(json.stationId==0){//为0时时新增
                    json.lineName = myCjxx.lineName;
                   }
                   if( json.stationName==""){
                    Ext.MessageBox.alert("警告","信息不能为空!");
                    return;
                   }
                  
                   Ext.Ajax.request({
                      url:'../../../addOrUpdateStationCj.do',
                      params:{json:_ToJSON(json)},
                      success:function(res,op){
                        var result = Ext.util.JSON.decode(res.responseText);
                        if(result.success==true&&result.add==1){
                         Ext.MessageBox.alert("提示","添加成功");
                         stationStore.reload();
                        }else if(result.success==true&&result.add==2){
                         Ext.MessageBox.alert("提示","修改成功");
                         stationStore.reload();
                        }else{
                        
                           var isAdd="";
                                              if(json.stationId==0){
                                               stationGrid.store.removeAt(selectRow);//删除行
                                                isAdd="添加";
                                              }else{
                                               isAdd="修改";
                                               stationStore.reload();
                                              }     
                                              Ext.MessageBox.alert("提示","该信息已经存在"+isAdd+"失败");
                         return;
                        }
                      },
                      failure:function(res,op){
                        var result = Ext.util.JSON.decode(res.responseText);
                         if(result.success==false){
                          Ext.MessageBox.alert("提示","添加或修改失败");
                          if(json.stationId==0){
                           stationGrid.store.removeAt(selectRow);//删除行
                                              }else{
                                               stationStore.reload();
                                              }   
                          return;
                         }
                      }
                     });
                   
                   
                   }
             }
                  
          }
          ]
       
    });

二：new Ext.grid.GridPanel实现

  var zkxxProxy = new Ext.data.HttpProxy({
      api:{
       read:"../../../loadZhekouxinxiController.do?cjslId="+changjingSlId,
       create: '../../../updateZhekouxxController.do'   //添加和修改是同一个url
      }
     });
  var zkxxReader = new Ext.data.JsonReader({root:"zhekouXx"},
             [
              {name:'cjslId',type:'string'},
              {name: 'isZhekou',type:'string'},
                                                {name: 'isZhekouValue',type:'string'},
                                                {name: 'trainClassName',type:'string'},
                                                {name: 'trainClass',type:'string'},
                                                {name: 'seatTypeName',type:'string'},
                                                {name: 'seatType',type:'string'},
                                                {name: 'zhekouLv',type:'string'},
                                                {name: 'lieche',type:'string'},
                                                {name: 'liecheValue',type:'string'}
                                                 ]);
 
  var zkxxRecord = Ext.data.Record.create([{
   name:'cjslId',
   type:'string'
  },{
   name:'isZhekou',
   type:'string'
  },{
   name:'isZhekouValue',
   type:'string'
  },{
   name:'trainClassName',
   type:'string'
  },{
   name:'trainClass',
   type:'string'
  },{
   name:'seatTypeName',
   type:'string'
  },{
   name:'seatType',
   type:'string'
  },{
   name:'zhekouLv',
   type:'string'
  },{
   name:'lieche',
   type:'string'
  },{
   name:'liecheValue',
   type:'string'
  }]);
  // */
  var zkxxWriter = new Ext.data.JsonWriter({
   encode: true,
   writeAllFields: false
  });
  var zkxxDes = new Ext.data.GroupingStore({
   proxy: zkxxProxy,
         reader: zkxxReader,
         autoLoad:true,
         writer: zkxxWriter
     });
  // zkxxDes.load();
  var zkxxEdit = new Ext.ux.grid.RowEditor({
   saveText: '保存', 
   cancelText:'取消',
   listeners: {
          afteredit: function(){
     Ext.getCmp("youwuZhekouId").setDisabled(true);
     Ext.getCmp("liecheJibieId").setDisabled(true);
     Ext.getCmp("zuoweiZhongleiId").setDisabled(true);
     Ext.getCmp("zheKouFanweiId").setDisabled(true);
    },
    canceledit:function(){
     Ext.getCmp("youwuZhekouId").setDisabled(true);
      Ext.getCmp("liecheJibieId").setDisabled(true);
      Ext.getCmp("zuoweiZhongleiId").setDisabled(true);
      Ext.getCmp("zheKouFanweiId").setDisabled(true);
      var s = zkxxGrid.getSelectionModel().getSelections();
            for(var i = 0, r; r = s[i]; i++){
            if(r.data.zhekouLv==""&&r.data.trainClassName=="")
             zkxxDes.remove(r);
            }
    }
  }
    });
 
  var zhekouStore = new Ext.data.JsonStore({
            fields : ['isZhekou', 'isZhekouValue'],
            data   : [
                     
                {isZhekou : '有',   isZhekouValue: '1'},
                {isZhekou : '无',   isZhekouValue: '0'}
            ]
        })
 
  var liecheFanweiStore =  new Ext.data.JsonStore({
             fields : ['lieche', 'liecheValue'],
             data   : [
                 {lieche : '所有列车',   liecheValue: '0'},
                 {lieche : '部分列车',   liecheValue: '1'}
             ]
         })
 
  var zkxxCm = new Ext.grid.ColumnModel({
        defaults: {
            sortable: true      
        },
        columns: [
                {
                 dataIndex:"cjslId",
                 hidden:true
                },
                     {
             header: '有无折扣',
             dataIndex:'isZhekouValue',
             editor: new fm.ComboBox({
                 allowBlank: false,
                 id:'youwuZhekouId',
                 disabled:true,
                 mode:           'local',
                 triggerAction:  'all',
                 forceSelection: true,
                 editable:       false,
                 displayField:   'isZhekou',
                          valueField:     'isZhekouValue',
                          store:    zhekouStore     
             }),
             renderer: function(value, cellmeta, record) {
             var index = zhekouStore.find(Ext.getCmp('youwuZhekouId').valueField,value);
             var tempRecord = zhekouStore.getAt(index);
             var displayText = "";
             if (record == null || tempRecord == null) {
                displayText = value;
             } else {
                displayText = tempRecord.get("isZhekou");
             }
             record.set("isZhekou",displayText);
             return displayText;
                   }// */
                     },
               {
                 header: '列车级别',
                 dataIndex:'trainClass',
                 editor: new fm.ComboBox({
                  allowBlank: false,
                  id:'liecheJibieId',
                  disabled:true,
                  triggerAction:  'all',
                  forceSelection: true,
                  editable:       false,
                  displayField:   'trainClassName',
                           valueField:     'trainClass',
                           store:liecheLvStore
              }),
              renderer: function(value, cellmeta, record) {
              var index = liecheLvStore.find(Ext.getCmp('liecheJibieId').valueField,value);
              var tempRecord = liecheLvStore.getAt(index);
              var displayText = "";
              if (record == null || tempRecord == null) {
                 displayText = value;
              } else {
                 displayText = tempRecord.get("trainClassName");
              }
              record.set("trainClassName",displayText);
              return displayText;
                    }// */
                     },
               {
                 header: '座位种类',
                 dataIndex:'seatType',
                 editor: new fm.ComboBox({
                  allowBlank: false,
                  id:'zuoweiZhongleiId',
                  disabled:true,
                  triggerAction:  'all',
                  forceSelection: true,
                  editable:       false,
                  displayField:   'seatTypeName',
                           valueField:     'seatType',
                           store:zuoweiTypeStore
              }),
              renderer: function(value, cellmeta, record) {
              var index = zuoweiTypeStore.find(Ext.getCmp('zuoweiZhongleiId').valueField,value);
              var tempRecord = zuoweiTypeStore.getAt(index);
              var displayText = "";
              if (record == null || tempRecord == null) {
                 displayText = value;
              } else {
                 displayText = tempRecord.get("seatTypeName");
              }
              record.set("seatTypeName",displayText);
              return displayText;
                    }// */
                     },
                     {
                      header: '折扣等级',
                      dataIndex:'zhekouLv',
                      editor:new fm.TextField({
                      
                      })
                     },
                     {
              header: '折扣列车范围',
              dataIndex:'liecheValue',
              editor: new fm.ComboBox({
                  id:'zheKouFanweiId',
                  allowBlank: false,
                  disabled:true,
                  mode:           'local',
                  triggerAction:  'all',
                  forceSelection: true,
                  editable:       false,
                  displayField:   'lieche',
                           valueField:     'liecheValue',
                           store:  liecheFanweiStore      
              }),
              renderer: function(value, cellmeta, record) {
              var index = liecheFanweiStore.find(Ext.getCmp('zheKouFanweiId').valueField,value);
             
              var tempRecord = liecheFanweiStore.getAt(index);
              var displayText = "";
              if (record == null || tempRecord == null) {
                 displayText = value;
              } else {
                 displayText = tempRecord.get("lieche");
              }
              record.set("lieche",displayText);
              return displayText;
                    }// */
                      }
                     ]
 
  });

   var zkxxGrid = new Ext.grid.GridPanel({
          store: zkxxDes,
          cm: zkxxCm,
          plugins: [zkxxEdit],
          frame: true,
          height: 180,
          title: '折扣信息',
          tbar: [{
              text: '添加',
              iconCls: 'silk-add',
              handler: onAddZhekouInfo
          }, '-'
          , { text: '删除',
           iconCls: 'silk-delete',
           handler:onDeleteZhekouInfo },
          '-'],
          viewConfig: {
              forceFit: true
          }
        
   });
 
   function onAddZhekouInfo(btn, ev) {
    Ext.getCmp("youwuZhekouId").setDisabled(false);
    Ext.getCmp("liecheJibieId").setDisabled(false);
    Ext.getCmp("zuoweiZhongleiId").setDisabled(false);
    Ext.getCmp("zheKouFanweiId").setDisabled(false);
    var zk= new zkxxRecord({
     cjslId:changjingSlId,
     isZhekou:'',
     isZhekouValue:'',
     trainClassName:'',
     trainClass:'',
     seatTypeName:'',
     seatType:'',
     zhekouLv:'',
     liecheValue:''
          });
    zkxxEdit.stopEditing();
    zkxxDes.autoSave=false;
    zkxxDes.insert(0,zk);
    zkxxDes.autoSave=true;
    zkxxGrid.getView().refresh();
    zkxxGrid.getSelectionModel().selectRow(0);
    zkxxEdit.startEditing(0);
      }
   function onDeleteZhekouInfo(btn, ev) {
    zkxxEdit.stopEditing();
          var s = zkxxGrid.getSelectionModel().getSelections();
          for(var i = 0, r; r = s[i]; i++){
            $.post("../../../deleteZhekouxinxiController.do",{cjslId:r.data.cjslId,zuoweizhonglei:r.data.seatType,liechejibie:r.data.trainClass},function(result){
             if(result>0){
              Ext.Msg.alert('状态', '删除成功');
              zkxxDes.remove(r);
             }else{
              Ext.Msg.alert('状态', '删除失败请重试');
             }
            })
           }
      }
      // */