Datagrid直接编辑保存“设计缺陷”
当今使用easyUI的datagrid组件的时候，碰到了一些问题，记录下来以便下次高速解决。 需求是在一张表单里会关联有一个列表，能够增删查改 曾经没用easyUI的时候，这个增和改的页面我通常是用一个dialog来做。保存之后再ajax传到列表里通过hidden来进行提交。 当然如今我也能够这么做，可是我想换种方式，由于easyUI的datagrid提供了直接在datagrid上编辑的功能（Row Editing in DataGrid）。 照着官网上的demo试了一下。也是editor的应用。编辑倒是没问题，保存也OK 可是保存的时候是直接把value转换成text来保存的。这么一来的话，value的信息消失了。 比方说是一个combobox。那么保存完仅仅有text的信息了。 那在保存完之前总是能获取到value的。试了一下，第一想法是想从editor生成的input下手得到数据，毕竟用form来提交是熟悉的方式啊，可是发现editor都没有指定name的地方（或许是我不知道），所以不好得到数据。既然不行，那么还是通过datagrid的getSelected方法来得到当前选中行（这里要先停止当前的编辑（endEdit）之后才干拿到填的数据）。 var row = $('#dispatches_details').datagrid('getSelected'); 这里得到的row是一个json，且里面的combobox得到的都是value 到了这步。假设外层没有关联表单（也新建一条保存）的情况下，那么直接把row发到后台能够保存了，之后显示仅仅须要text而不须要value的信息，这或许是datagrid设计的初衷吧。可是它可能没有考虑到稍复杂的关联表单的情况。比方我们这里的业务，保存到数据库肯定是在外层表单提交的时候一起保存的，所以这个row的数据我们要临时先记录下来。 怎么记录呢？在js里可能仅仅有array这样的保存一串数据的数据类型了吧。于是创建了一个array（rows）来保存row 问题又来了，那么js中的array怎么传到后台呢？这也是困扰了我一个下午的问题。 我先是直接用{”rows”:rows}这种格式postserver。抓了HTTP请求。实际上发的请求参数是这种{rows[0][a]， rows[0][b]，......rows[1][a]， rows[1][b].......}当中a、b是row中的字段名 看到这样的情况果断还非常开心啊，以为Spring能够自己主动绑定?数了。百度了一下于是跑到server 写下一行代码： public void saveDispatches(@RequestParam("rows[]") Ddetails ddetails[]) 满心以为能够直接接到数据了。结果发现接不到。又试了 public void saveDispatches(@RequestParam("rows[][]") Object ddetails[][])都不行 后直接request.getParameter(“rows[0][a]”)这样倒是有了，尼玛啊，这样接?数还不得接到死啊。 只是这样的方式我也仅仅是试试而已。js的array直接传递到后台肯定会有问题。 再一想，列表中的每一条记录好都给一个name。然后value是这条row（json类型）。比方说类似row1:””， row2:””， row3:”” 想了一下认为还是不可行。由于?数的数量不确定，后台没有一个好的方法来接?数 后来从form传数据得到灵感，能够用同样的名字，然后用分隔符分开，后台能够得到一个数组。可是这样事实上后台得到的是json的数据，没办法直接绑定?数到实体了。 可是这里另一个问题。我发现json在作为array的一个元素的时候，HTTP请求过去的时候，不会自己转换成字符串，而是会以rows[a]，row[b] 这样的形式发送 这并非我们想要的，于是先要把json转换成string类型： $.extend({ toStr:function(json){ var str = ""; $.each(json， function(k，v){ str += "，" + k + ':"' + v + '"'; }); str = "{" + str.substring(1) + "}"; return str; } }) 接下来表单提交的时候。能够这么传数据： $("#dispatches_form").form('submit'， { url:'repairs/saveDispatches'， onSubmit: function(param){ param.ddetails = jsonArr.join('@'); }， success:function(data){ $.messager.progress('close'); $("#repairsPaper").dialog('close'); } });
