jqGrid 内联编辑未向服务器 POST 数据

1 投票
1 回答
1881 浏览
提问于 2025-04-29 10:10

到目前为止,我真的很喜欢使用jqGrid,但还是搞不明白在内联编辑后保存单元格时,如何把数据发送到服务器。我试了很多不同的配置,也看了很多文档,但还是没能解决这个问题。

jqGrid确实在调用我指定的url,但我在服务器那边看不到任何数据。

还有一点让我好奇的是,根据我的理解,如果在jqGrid的配置中没有指定url,那么调用应该会使用编辑和保存参数中指定的url,但似乎并不是这样。当我把editurl和cellurl从配置中去掉时,保存时就报错说“没有指定url”。

提前谢谢你们!

这是JS代码:

editParams = {
    "oneditfunc": null,
    "successfunc": null,
    "url": '/submit/adjustments',
    "extraparam": {
        UserAdj: function() {
            var sel_id = $('#rowed1').jqGrid('getGridParam', 'selrow');
            var value = $('#rowed1').jqGrid('getCell', sel_id, '_id');
            return 'test';
        },
        arg1 : 'test_it_out'
    },
    "aftersavefunc": null,
    "errorfunc": null,
    "afterrestorefunc": null,
}

saveparameters = {
    "successfunc" : null,
    "url" : 'submit/adjustments',
        "extraparam" : {
            UserAdj: function() {
            var sel_id = $('#rowed1').jqGrid('getGridParam', 'selrow');
            var value = $('#rowed1').jqGrid('getCell', sel_id, '_id');
            return 'test';
        }
        },
    "aftersavefunc" : null,
    "errorfunc": null,
    "afterrestorefunc" : null,
    "restoreAfterError" : true,
    "mtype" : "POST"
}

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('#rowed1').restoreRow(lastSel); 
            jQuery("#rowed1").jqGrid('saveRow', lastsel, saveparameters);
            lastSel=id; 
         }
       },
    ondblClickRow: function(id) {
        jQuery('#rowed1').jqGrid('editRow', id, true, editParams); 
    },
    rowNum:10,
    rowList:[10,20,30],
    pager: '#prowed1',
    sortname: 'name',
    viewrecords: true,
    sortorder: "desc",
    autowidth: true,
    height: '100%',
    'cellEdit': true,
    'cellSubmit': 'remote',
    editurl: '/submit/adjustments',
    cellurl: '/submit/adjustments'
});

还有控制器代码:

@app.route('/submit/adjustments', methods=['GET', 'POST'])
def submit_adjustments():
    print request.data
    print request.args
    return redirect(redirect_url())
暂无标签

1 个回答

4

在阅读过程中,我发现了一些错误:

  • 在一个网格中,不能同时使用单元格编辑和行内编辑。看起来你主要的问题在于使用了 cellEdit: true 这个选项。你需要去掉 cellEdit: true 这个选项,才能使用行内编辑。
  • 包含 onSelectRowsaveRow 的那一行永远不会生效,因为前面一行有 restoreRow。所以你先是放弃了编辑的结果,然后再尝试保存。
  • 你在 saveparameters 中指定了 mtype : "POST",但在 editParams 中没有。因为 saveRow 直接调用在你的代码中不生效,所以这个选项不会被使用。幸运的是,mtype : "POST" 是行内编辑的默认选项。不过,我建议你定义一个对象,把所有行内编辑的选项放在里面,并在你调用的所有方法中使用它(editRowsaveRowrestoreRow)。
  • 你定义的 UserAdj 函数看起来有点奇怪,因为它使用了 $('#rowed1').jqGrid('getCell', sel_id, '_id'),但这个网格中并没有名为 _id 的列。
  • 我建议你在所有的 jqGrid 中使用 gridview: true 选项。这可以提高网格的性能。
  • 考虑使用网格的 autoencode: true 选项。如果不使用它,输入的数据会被解释为不安全的内容。
  • 我建议你在所有 jqGrid 的回调中使用 jQuery(this),而不是 jQuery('#rowed1')
  • 你应该记得定义变量 lastSel

撰写回答