在jqGrid中解决内联编辑后无法将数据提交到服务器的问题

在使用jqGrid时,在对单元格进行内联编辑后,无法将数据提交到服务器进行保存。尽管已经尝试了多种配置并查阅了文档,但仍无法解决问题。jqGrid似乎正在调用指定的url,但是服务器端没有收到任何数据。同样奇怪的是,根据我的理解,如果jqGrid配置中没有指定editurl和cellurl,则该调用应该使用编辑和保存参数中指定的url,但这似乎不是这种情况。当我从配置中删除editurl和cellurl时,保存会出错并显示“未指定url”。

2、解决方案:

经过分析和问题定位,我们找到了以下解决方案:

  1. 避免同时使用单元格编辑和内联编辑:
    无法在一个网格中同时结合使用单元格编辑和内联编辑。在使用内联编辑之前,需要移除cellEdit: true选项。

  2. 修复onSelectRow和saveRow之间的冲突:
    带有saveRow的onSelectRow代码不会执行,因为前一行包含restoreRow,导致先丢弃了编辑结果然后再尝试保存它。

  3. 确保mtype选项一致:
    确保在editParams和saveparameters中都指定了mtype : "POST"选项,以确保数据提交的方式为POST。

  4. 检查UserAdj函数:
    UserAdj函数使用$(‘#rowed1’).jqGrid(‘getCell’, sel_id, ‘_id’)获取数据,但网格中没有名为_id的列,导致问题出现。

  5. 考虑使用其他选项:
    建议使用gridview: true选项以提高网格的性能,并考虑使用autoencode: true选项以防止输入数据被解释为html。

  6. 使用jQuery(this)代替jQuery(‘#rowed1’):
    在所有jqGrid的回调函数内部,建议使用jQuery(this)代替jQuery(‘#rowed1’),以确保代码与网格实例相关联。

  7. 初始化变量lastSel:
    需要定义变量lastSel,以记录当前选中的行,以便在其他操作(如保存、取消编辑)中使用。

  8. 代码示例:
    以下代码示例展示了如何正确使用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中内联编辑后无法将数据提交到服务器的问题。

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值