最近學習easyui的datagrid資料表格，對資料表格的增刪改做一個筆記
檢視如下

要求：可進行多行的編輯修改，當點選儲存時一起儲存，可進行批量刪除，新增時當有選擇的行時，在該行下邊新增，當沒有選擇時，在首行新增，取消編輯時，所有沒儲存的資料回滾至修改前資料，
jsp端程式碼：

 var arr='';
  var jsonarr='';
  var jsonstr='';
function adddata(types){

    var datagrid;//定義全域性變數
    var editRow=undefined;//定義全域性變數：當前編輯的行

    datagrid = $('#dataDict'
 
).datagrid({//
        url:'${ctx}/xtwh/datadict!list.action?types='+types, //請求的資料來源
        pagination:true, 
        pageSize:15,
        pageList:[15,30,45,60],
        fit:true,
        fitColumn:true,
        rownumbers:true,
        striped:true,
        nowap:true,
        border:false,
        columns:[[
        {field:'id'
 
,title:'id',width:20,align:'center',sortable:true,checkbox:true},
                     {field:'code',title:'編號',width:100,align:'center',sortable:true ,
                         editor: { type: 'validatebox', options: { required: true}}
                     },
                     {field:'name',title:'名稱'
 
,width:100,align:'center',sortable:true,
                         editor: { type: 'validatebox', options: { required: true} }
                     },
                     {field:'signs',title:'符號',width:100,align:'center',sortable:true,
                         editor: { type: 'validatebox', options: { required: true} } 
                     },
                     {field:'status',title:'狀態',width:20,align:'center',sortable:true,hidden:true}
                      ]],
        queryParams:{action:'query'},
        //新增工具欄，
         toolbar:[{ text: '新增', iconCls: 'icon-add', handler: function () {//新增列表的操作按鈕新增，修改，刪除等
            //新增時先判斷是否有開啟編輯的行，如果有則把開戶編輯的那行結束編輯
            if (editRow != undefined) {
                datagrid.datagrid("endEdit", editRow);
            }
            //新增時如果沒有正在編輯的行，則在datagrid的第一行插入一行
            if (editRow == undefined) {
                datagrid.datagrid("insertRow", {
                    index: 0, // index start with 0
                    row: {
                        types:'考勤',
                        status:'1',

                    }
                });
                //將新插入的那一行開戶編輯狀態
                datagrid.datagrid("beginEdit", 0);
                //給當前編輯的行賦值
                editRow = 0;
                //選中編輯行，獲得焦點。。。
                datagrid.datagrid('selectRow',editRow).target.focus();
            }

        }
        }, '-',
         { text: '刪除', iconCls: 'icon-remove', handler: function () {
             //刪除時先獲取選擇行
             var rows = datagrid.datagrid("getSelections");
             //選擇要刪除的行
             if (rows.length > 0) {
                 $.messager.confirm("提示", "你確定要刪除本行資料嗎?", function (r) {
                         if (r) {
                             arr=datagrid.datagrid('getSelections');
                             for(var i=0;i<arr.length;i++){
                                 arr[i].status='0';//將該行資料的狀態改為0，

                             }



                             save(arr);
                         }
                     });

             } else {
                 $.messager.alert("提示", "請選擇要刪除的行", "error");
             }
         }
         }, '-',
         { text: '修改', iconCls: 'icon-edit', handler: function () {
             //修改時要獲取選擇到的行
             var rows = datagrid.datagrid("getSelections");
             //如果只選擇了一行則可以進行修改，否則不操作
             if (rows.length > 1){
                 alert("請選擇單行進行修改！");
             }else if (rows.length == 1) {
                 //修改之前先關閉已經開啟的編輯行，當呼叫endEdit該方法時會觸發onAfterEdit事件
                 if (editRow != undefined) {
                     datagrid.datagrid("endEdit", editRow);
                 }
                 //當無編輯行時
                 if (editRow == undefined) {
                     //獲取到當前選擇行的下標
                     var index = datagrid.datagrid("getRowIndex", rows[0]);
                     //開啟編輯
                     datagrid.datagrid("beginEdit", index);
                     //把當前開啟編輯的行賦值給全域性變數editRow
                     editRow = index;

                     //當開啟了當前選擇行的編輯狀態之後，
                     //應該取消當前列表的所有選擇行，要不然雙擊之後無法再選擇其他行進行編輯
                     datagrid.datagrid("unselectAll");
                 }
             }
         }
         }, '-',
         { text: '儲存', iconCls: 'icon-save', handler: function () {

             //儲存時結束當前編輯的行，自動觸發onAfterEdit事件如果要與後臺互動可將資料通過Ajax提交後臺
             datagrid.datagrid("endEdit", editRow);
                      save(arr);

         }
         }, '-',
         { text: '取消編輯', iconCls: 'icon-redo', handler: function () {
             //取消當前編輯行把當前編輯行罷undefined回滾改變的資料,取消選擇的行
             editRow = undefined;
             datagrid.datagrid("rejectChanges");
             datagrid.datagrid("unselectAll");
         }
         }, '-'], 
        onAfterEdit: function (rowIndex,rowData,changes) {//endEdit該方法觸發此事件
            editRow = undefined
             arr=datagrid.datagrid('getChanges');

            /* 
             */
            //abc(rowData);
            //console.info(rowData);//rowData剛結束編輯的哪一行資料,返回的是一個物件

        },
        onDblClickRow: function (rowIndex, rowData) {
            //雙擊開啟編輯行
            if (editRow != undefined) {

                datagrid.datagrid("endEdit", editRow);
              }
            if (editRow == undefined) {

                datagrid.datagrid("beginEdit", rowIndex);
                editRow = rowIndex;

            }
        }
    })




}

function save(arr){//刪除，新增，修改  後進行儲存操作
    jsonarr=arr;
    //拼json字串
    /* var jsonstr='[';
    for(var i=0;i<arr.length;i++){
        jsonstr+='{';
        jsonstr+='id:';
        jsonstr+=arr[i].id;
        jsonstr+=',code:';
        jsonstr+=arr[i].code;
        jsonstr+=',name:';
        jsonstr+=arr[i].name;
        jsonstr+=',signs:';
        jsonstr+=arr[i].signs;
        jsonstr+=',types:';
        jsonstr+=arr[i].types;
        jsonstr+=',status:';
        jsonstr+=arr[i].status;
        jsonstr+='}';
        if(i<arr.length-1){
            jsonstr+=',';
        }
    }
    jsonstr+=']'; */

    $.ajax({
        url:'${ctx}/xtwh/datadict!save.action',
        type:'post',
        /* data:{'jsonstr':jsonstr}, */
        data:{'jsonstr':JSON.stringify(jsonarr)//將陣列轉換成json字串
            },
        dataType: "text", 
        success:function(data){
            alert(data);

            $('#dataDict').datagrid('reload');
        }
     }); 

}

至於在後臺如何獲取json字串，請參考http://blog.csdn.net/qq_34131878/article/details/52994952
其實當自己真正做過一次後，發現數據表格的行編輯其實挺簡單的，可憐的我在這上邊耗費了無數心血啊！！！！，在這裡作為初學者把自己關於datagrid的一些心得分享給大家，如果有不對的地方，請多多指教，希望對大家有一些幫助！