学习easyUI 扩展的Editable DataGrid组件

目的：今天想玩玩easyUI 的数据表格，开始的时候添加、修改都通过弹出一个弹出框来解决。不过在玩的时候又想在表格上直接添加或者编辑一行数据。

过程：直接查找easyUI的api , api中有很多DataGrid的demo，其中有cell editing 和 row editing，不过在使用单元格编辑的过程中，我在想如果我们需要添加一行的数据，且这一行的数据是使用唯一索引组的，就是a列,b列c列 三列组成一个唯一索引的数据格式，那么使用单元格添加业务上比较难实现。此时就需要使用行编辑，在表格中整行添加，这种做法比较容易实现。

           开始的时候我去找Row Editing in DataGrid，发现demo比较简单，我需要双击启动编辑，按一个增加按钮就添加一个新行，按保存也能够保存，还能够取消编辑，编辑如果错误时候可以提示。demo里面都没有介绍，这时我就去找Extension里面的扩展组件，找到了

Editable DataGrid

这个扩展组件，此时我们就来玩玩这个鬼东西。

1、下载这个包，包里面有一个jquery.edatagrid.js文件，主要就是导入这个文件。当然还有jquery,easyUi的基础的包，这是必须的。

2、包加载到我们的jsp后，就开始编写代码了，我这里主要使用的是js创建数据表格的方法。

列属性，editor 这个属性就是标志需要更改哪一个单元格，有text,textbox,numberbox,numberspinner,combobox,combotree,combogrid,datebox,datetimebox,timespinner,datetimespinner,textarea,checkbox,validatebox.
options: object 这么多的类型。

<span class="pln"></span><span class="atn">editor</span><span class="pun">：</span><span class="atv">{type:validatebox,options:{required:true}}</span>

加了这个属性后再加几个按钮，方法里加一句

$('#table').edatagrid('addRow');   //对应添加一行的方法

$('#table').edatagrid('saveRow'); //对应保存数据的方法

$('#table').edatagrid('cancelRow');//对应取消编辑的方法

$('#table').edatagrid('destroyRow')"//对应删除的方法。

有了这几个按钮，我们的工作就基本完成了，点击一下按钮，就可以看到效果了。

这时，我们就有疑问了，那我怎么更新后台的数据了，这里有四个url属性了。

        saveUrl : $.pageRoot + '/sys/sys_SysRight_testUpdateJSON.action',
       updateUrl : $.pageRoot + '/sys/sys_SysRight_testUpdateJSON.action',
       destroyUrl : $.pageRoot + '/sys/sys_SysRight_testDeleteJSON.action',

      url : $.pageRoot + '/sys/sys_SysRight_testListJSON.action',

做到这里，基本的功能都走完，不过在玩的过程中仍然有问题，如果后台出错，怎么提示给用户昵？

这个问题很好解决，表格里面可以设置一个事件onError。

onError index,rowFires when the server errors occur.The server should return a row with 'isError' property set to true to indicate some errors occur.

Code examples:

//server side codeecho json_encode(array('isError' => true,'msg' => 'error message.'));

//client side code$('#dg').edatagrid({onError: function(index,row){alert(row.msg);}});

我们可以看到，只要我们在后台返回了一个json数据，数据格式是{"isError":true,"msg":"提示语句！！"}这样就行了，也就是说，创建一个Map,

Map<String, Object> onErrorMap = new HashMap<String, Object>();

onErrorMap.put("isError", true);

onErrorMap.put("msg","提示语句！！");

ctx.put("json", ObjectUtils.toJsonString(onErrorMap));

//ObjectUtils.toJsonString(Object obj);这是我自己一个将对象转化为json的一个方法

//这个方法使用了Gson的jar包，需要上网下载。

public static String toJsonString(Object obj) {
        GsonBuilder builder = new GsonBuilder();
        builder.setDateFormat("yyyy-MM-dd HH:mm:ss");

        Gson gson = builder.create();

        String target = gson.toJson(obj);
        return target;

    }

完成后台的代码，在试一下异常添加，就会发现有提示出来了。不过也有一个问题，在数据编辑成功，鼠标双击其他行，自动保存，会弹出undefined弹出框。

我们的onError写成这样就可以了。当然要做其它业务逻辑也可以在这里写。

onError : function(index, row) {
                   if (row.msg == undefined)
                          alert("操作成功！！");
                   else
                        alert(row.msg);
              },

到了这一步，就可以使用功能了，不过在玩的过程中，我还发现一个不是很好的现象，就是我们编辑一行，保存，数据校验不过，然后取消编辑，编辑数据是不会刷新回来的。

我的做法是，不使用$('#table').edatagrid('cancelRow');这个方法，而是自己重新reload整个表格，这样看起来更加的友好。

因为我的表格由复选框，所以我要清楚之前选的复选框

function reloadTable() {
    $("#rightTable").datagrid("uncheckAll");// 此两行排除页面删除的记忆功能的bug
    $("#rightTable").datagrid("unselectAll");
    $("#rightTable").datagrid("reload");
}

好了，这个行编辑就完成了。

缺陷：如果我们一行中有一些单元格不用编辑的，我们点击这些不用编辑的单元格，也会出现编辑一行的状态，就不是很友好。