easyui-datagrid行数据增删改操作

最近学习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'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

    $.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的一些心得分享给大家，如果有不对的地方，请多多指教，希望对大家有一些帮助！