EasyUI中的dataGrid的行內(nèi)編輯

$(function () {
    var datagrid; //定義全局變量datagrid
    var editRow = undefined; //定義全局變量：當(dāng)前編輯的行
    datagrid = TskupluAddPacket.datagrid({
        url: ThinkPHP['MODULE'] + '/Tskuplu/getPacketList', //請(qǐng)求的數(shù)據(jù)源
        iconCls: 'icon-save', //圖標(biāo)
        pagination: true, //顯示分頁(yè)
        pageSize: 15, //頁(yè)大小
        pageList: [15, 30, 45, 60], //頁(yè)大小下拉選項(xiàng)此項(xiàng)各value是pageSize的倍數(shù)
        fit: true, //datagrid自適應(yīng)寬度
        fitColumn: false, //列自適應(yīng)寬度
        striped: true, //行背景交換
        nowap: true, //列內(nèi)容多時(shí)自動(dòng)折至第二行
        border: false,
        idField: 'packetid', //主鍵
        sortName : 'packetid',                                  //排序字段
        sortOrder : 'desc',                  //排序方式
        columns: [[//顯示的列
            {field: 'packetid', title: 'ID', width: 100, sortable: true, checkbox: true },
            { field: 'packunit', title: '包裝單位', width: 100, sortable: true,
                editor: { type: 'validatebox', options: { required: true} }
            },
            { field: 'packqty', title: '包裝細(xì)數(shù)', width: 100,
                editor: { type: 'validatebox', options: { required: true} }
            },
            { field: 'packspec', title: '包裝規(guī)格', width: 100,
                editor: { type: 'validatebox', options: { required: true} }
            }
        ]],
        queryParams: { 
          pluid: $('#addpluid').val()
        }, //查詢參數(shù)
        toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按鈕添加，修改，刪除等
            //添加時(shí)如果沒(méi)有正在編輯的行，則在datagrid的第一行插入一行
            if (editRow == undefined) {                     
                datagrid.datagrid("insertRow", {
                    index: 0, // index start with 0
                    row: {}
                });          
                //將新插入的那一行開(kāi)戶編輯狀態(tài)
                datagrid.datagrid("beginEdit", 0);
                //給當(dāng)前編輯的行賦值
                editRow = 0;
            }
        }
        }, '-',
        { text: '刪除', iconCls: 'icon-remove', 
          handler: function () {
             //刪除時(shí)先獲取選擇行
             var rows = datagrid.datagrid("getSelections");
             //選擇要?jiǎng)h除的行
             if (rows.length > 0) {
                $.messager.confirm("提示", "你確定要?jiǎng)h除嗎?", function (r) {
                  if (r) {
                    var ids = [];
                    for (var i = 0; i < rows.length; i++) {
                      ids.push(rows[i].packetid);
                    }
                    //將選擇到的行存入數(shù)組并用,分隔轉(zhuǎn)換成字符串，
                    //本例只是前臺(tái)操作沒(méi)有與數(shù)據(jù)庫(kù)進(jìn)行交互所以此處只是彈出要傳入后臺(tái)的id
                    //alert(ids.join(','));
                    $.ajax({
                      url : ThinkPHP['MODULE'] + '/Tskuplu/deletePacket',
                      type : 'POST',
                      data : {
                        ids : ids.join(',')
                      },
                      beforeSend : function (){
                        $.messager.progress({
                          text : '正在處理中...'
                        });  
                      },
                      success : function (data){
                        $.messager.progress('close');
                        if (data >0){
                          datagrid.datagrid('reload');
                          $.messager.show({
                            title : '操作提醒',
                            msg  : data + '條數(shù)據(jù)被成功刪除！'
                          })
                        } else if( data == -999 ) {
                          $.messager.alert('刪除失敗', '對(duì)不起，您沒(méi)有權(quán)限！', 'warning');
                        } else {
                          $.messager.alert('刪除失敗', '沒(méi)有刪除任何數(shù)據(jù)！', 'warning');
                        }
                      }
                    });                  
                  }
                });
             } else {
                $.messager.alert("提示", "請(qǐng)選擇要?jiǎng)h除的行", "error");
             } 
          }
        }, '-',
        { text: '修改', iconCls: 'icon-edit', 
          handler: function () {
            //修改時(shí)要獲取選擇到的行
            var rows = datagrid.datagrid("getSelections");
            //如果只選擇了一行則可以進(jìn)行修改，否則不操作
            if (rows.length == 1) {
              //當(dāng)無(wú)編輯行時(shí)
              if (editRow == undefined) {
                //獲取到當(dāng)前選擇行的下標(biāo)
                var index = datagrid.datagrid("getRowIndex", rows[0]);
                //開(kāi)啟編輯
                datagrid.datagrid("beginEdit", index);
                //把當(dāng)前開(kāi)啟編輯的行賦值給全局變量editRow
                editRow = index;
                //當(dāng)開(kāi)啟了當(dāng)前選擇行的編輯狀態(tài)之后，
                //應(yīng)該取消當(dāng)前列表的所有選擇行，要不然雙擊之后無(wú)法再選擇其他行進(jìn)行編輯
                datagrid.datagrid("unselectAll");
              }
            }
          }
        }, '-',
        { text: '保存', iconCls: 'icon-save', 
          handler: function () {
             //保存時(shí)結(jié)束當(dāng)前編輯的行，自動(dòng)觸發(fā)onAfterEdit事件如果要與后臺(tái)交互可將數(shù)據(jù)通過(guò)Ajax提交后臺(tái)
             datagrid.datagrid("endEdit", editRow); 
             editRow = undefined;
          }
        }, '-',
        { text: '取消編輯', iconCls: 'icon-redo', 
          handler: function () {
             //取消當(dāng)前編輯行把當(dāng)前編輯行罷undefined回滾改變的數(shù)據(jù),取消選擇的行
             editRow = undefined;
             datagrid.datagrid("rejectChanges");
             datagrid.datagrid("unselectAll");
          }
        }, '-'],
        onAfterEdit: function (rowIndex, rowData, changes) {
          //endEdit該方法觸發(fā)此事件           
          //var row = datagrid.datagrid("getData").rows[rowIndex]; //獲取某一行的值 
          var inserted = datagrid.datagrid('getChanges','inserted');
          var updated = datagrid.datagrid('getChanges','updated');
          if(inserted.length < 1 && updated.length <1){
            editRow = undefined;
            datagrid.datagrid('unselectAll');
            return;
          }
          var url = '';
          if(inserted.length>0){
            url=ThinkPHP['MODULE'] + '/Tskuplu/addPacket';
          }
          if(updated.length>0){
            url=ThinkPHP['MODULE'] + '/Tskuplu/updatePacket';
          }
          $.ajax({
            url : url,
            type : 'POST',
            data : {
              'pluid': $('#addpluid').val(),
              'packetid':rowData.packetid,
              'packunit':rowData.packunit,
              'packqty' :rowData.packqty,
              'packspec':rowData.packspec
            },
            beforeSend : function (){
              $.messager.progress({
                text : '正在處理中...'
              })
            },
            success : function (data){
              $.messager.progress('close');
              if (data > 0){ 
                datagrid.datagrid("acceptChanges"); 
                $.messager.show({
                  title : '操作提示',
                  msg : '添加成功'
                });      
                editRow = undefined;
                datagrid.datagrid("reload"); 
                $('#addcheck').val(1);
              } else if (data == -999) {
                $.messager.alert('添加失敗', '抱歉！您沒(méi)有權(quán)限！', 'warning');
              } else {
                datagrid.datagrid("beginEdit",editRow); 
                $.messager.alert('警告操作', '未知錯(cuò)誤！請(qǐng)重新刷新后提交！', 'warning');
              }
              datagrid.datagrid("unselectAll"); 
            }
          });
          //////////////////                         
        },
        onDblClickRow: function (rowIndex, rowData) {
        //雙擊開(kāi)啟編輯行
          if (editRow == undefined) {
              datagrid.datagrid("beginEdit", rowIndex);
              editRow = rowIndex;
          }
        }
    });   
  });