在使用jqGrid时,在对单元格进行内联编辑后,无法将数据提交到服务器进行保存。尽管已经尝试了多种配置并查阅了文档,但仍无法解决问题。jqGrid似乎正在调用指定的url,但是服务器端没有收到任何数据。同样奇怪的是,根据我的理解,如果jqGrid配置中没有指定editurl和cellurl,则该调用应该使用编辑和保存参数中指定的url,但这似乎不是这种情况。当我从配置中删除editurl和cellurl时,保存会出错并显示“未指定url”。
2、解决方案:
经过分析和问题定位,我们找到了以下解决方案:
-
避免同时使用单元格编辑和内联编辑:
无法在一个网格中同时结合使用单元格编辑和内联编辑。在使用内联编辑之前,需要移除cellEdit: true选项。 -
修复onSelectRow和saveRow之间的冲突:
带有saveRow的onSelectRow代码不会执行,因为前一行包含restoreRow,导致先丢弃了编辑结果然后再尝试保存它。 -
确保mtype选项一致:
确保在editParams和saveparameters中都指定了mtype : "POST"选项,以确保数据提交的方式为POST。 -
检查UserAdj函数:
UserAdj函数使用$(‘#rowed1’).jqGrid(‘getCell’, sel_id, ‘_id’)获取数据,但网格中没有名为_id的列,导致问题出现。 -
考虑使用其他选项:
建议使用gridview: true选项以提高网格的性能,并考虑使用autoencode: true选项以防止输入数据被解释为html。 -
使用jQuery(this)代替jQuery(‘#rowed1’):
在所有jqGrid的回调函数内部,建议使用jQuery(this)代替jQuery(‘#rowed1’),以确保代码与网格实例相关联。 -
初始化变量lastSel:
需要定义变量lastSel,以记录当前选中的行,以便在其他操作(如保存、取消编辑)中使用。 -
代码示例:
以下代码示例展示了如何正确使用jqGrid的内联编辑功能:
jQuery("#rowed1").jqGrid({
url: base_url + 'get/101/items',
datatype: "json",
jsonReader: {
root: function (obj) { return obj.items; },
id: 'id',
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.items.length; },
},
loadonce: true,
colNames:['Vendor', 'Name', 'Price', 'Last Cost', 'Qty OH', 'Qty OO', 'Wks Selling', 'Str Velocity', 'Fleet Velocity', 'Reccomended Buy', 'User Adjustment'],
colModel:[
{name: 'vendor_name'},
{name: 'name'},
{name: 'price'},
{name: 'cost'},
{name: 'qty_OH', sorttype:'int'},
{name: 'qty_OO', sorttype:'int'},
{name: 'str_wks_selling', sorttype:'int'},
{name: 'velocity', sorttype:'int'},
{name: 'flt_five_wk_vel', sorttype: 'int'},
{name: 'rec_buy', sorttype: 'int'},
{name: 'user_adj_order', editable: true}
],
onSelectRow: function(id){
if(id && id!==lastSel){
jQuery(this).restoreRow(lastSel);
jQuery(this).jqGrid('saveRow', lastsel, saveparameters);
lastSel=id;
}
},
ondblClickRow: function(id) {
jQuery(this).jqGrid('editRow', id, true, editParams);
},
rowNum:10,
rowList:[10,20,30],
pager: '#prowed1',
sortname: 'name',
viewrecords: true,
sortorder: "desc",
autowidth: true,
height: '100%',
editurl: '/submit/adjustments',
cellurl: '/submit/adjustments'
});
通过以上解决方案,就可以解决jqGrid中内联编辑后无法将数据提交到服务器的问题。