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