Datagrid直接编辑保存“设计缺陷”
作者:网络转载 发布时间:[ 2015/7/15 9:24:01 ] 推荐标签:软件测试管理
当今使用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');
}
});
相关推荐
更新发布
功能测试和接口测试的区别
2023/3/23 14:23:39如何写好测试用例文档
2023/3/22 16:17:39常用的选择回归测试的方式有哪些?
2022/6/14 16:14:27测试流程中需要重点把关几个过程?
2021/10/18 15:37:44性能测试的七种方法
2021/9/17 15:19:29全链路压测优化思路
2021/9/14 15:42:25性能测试流程浅谈
2021/5/28 17:25:47常见的APP性能测试指标
2021/5/8 17:01:11