Question

我正在使用jqGrid和localArray数据。我从azure db获取此数组并将其绑定到网格。在操作每一行之后，我计划在DB中更新它。

我正在使用内联导航栏。点击“添加行”，“保存行”＆amp; “删除行”按钮我想调用我的自定义函数，然后想从该函数中保存/删除DB中的数据。

首先，我想知道我的设计是否正确且可扩展。

目前，我可以使用“aftersavefunc”参数点击保存按钮调用自定义功能。

其次，请让我知道我必须为“删除行”按钮设置哪个参数。我认为对于“添加行”，相同的参数可以正常工作，因为我们必须单击“保存行”按钮来保存行。

我的代码如下所示：

jQuery("#list4").jqGrid({
    datatype: "local",
    data: myData,
    height: "auto",
    colNames: ['RowNo', 'RouteId', 'Area'],
    colModel: [
        { name: 'id', index: 'id', width: 50, sortable: false },
        { name: 'RouteId', index: 'RouteId', width: 50, sortable: false },
        { name: 'Area', index: 'Area', width: 130, sortable: false, editable: true, editrules: { required: true} },
    ],
    multiselect: false,
    rownumbers: false,
    rowList: [10, 20, 30],
    pager: jQuery('#pager1'),
    viewrecords: true,
    caption: "Bus Schedule Data",
    editurl: "clientArray",
    restoreAfterSelect: false,
    loadonce: true
});
var rowid;
var inlineparams = {
    addParams: { useFormatter: false },
    editParams: {
        aftersavefunc: function (id) {
            var rowData = jQuery('#list4').jqGrid('getRowData', id);
            ScheduleTable.update({ id: 1, Area: rowData.Area.toString() });
        }
    },
    add: true,
    edit: true,
    save: true,
    cancel: true,
    del: true
};

jQuery("#list4").jqGrid('navGrid', "#pager1", { edit: false, save: false, add: false, cancel: false, del: false });
jQuery("#list4").jqGrid('inlineNav', "#pager1", inlineparams);
jQuery("#list4").jqGrid("saveRow", id, {
    keys: false,
    url: "clientArray"
});

Answer 1

inlineNav方法没有您使用的选项del（请参阅inlineparams）。您必须使用del: false的删除navGrid选项才能通过表单编辑实现删除按钮（请参阅delGridRow方法）。

我个人发现使用内联编辑将数据保存在aftersavefunc内的数据库中并不是最好的方法。使用此方法实现错误处理时会遇到问题，因为网格中的更改将首先首先保存在本地，然后您将尝试更新数据库中的数据。如果在保存期间出现某种错误（验证错误，并发错误等），则必须在网格中恢复以前的数据状态。因此，您必须保存以前的状态（例如，在oneditfunc回调内），然后在需要时恢复旧数据。

因此，我建议您从设计的角度将datatype: "local"和editurl: "clientArray"更改为基于Ajax的原始版本。

如果您使用建议jqGrid的标准方式，您可以按照Ajax与服务器通信。在后端可以返回错误描述的情况下，用户将能够修改当前编辑数据并尝试再次保存。您需要的只是实现一些服务器组件（ASP.NET Web API服务，ASP.NET WCF服务，ASP.NET MVC控制器，ASMX WebService，ASHX handler等）。所有技术（即使是最老的技术，如ASMX WebService和ASHX处理程序）也可以与Windows Azure一起使用。

如果您决定按照原始方式进行操作，则可以使用表单编辑实现删除。我最初描述了here如何在editurl: "clientArray"的情况下实现它的方式。在the answer中，我发布了完整的表单编辑操作可以与本地数据一起使用的方式。 Another answer包含与jqGrid的当前版本（4.4.1和4.4.4）一起使用的更新代码。我建议您使用the last answer中的delSettings。 onclickSubmit的{{1}}回调可以完成本地数据保存所需的一切。

您的代码的常见说明：

我觉得在一个网格中使用delSettings和id都很奇怪。可能根本不需要RouteId，如果id是key: true的附加属性，如果它是您案例中数据库的真正唯一RouteId，则可以添加id
您可以从所有列中删除index属性，因为您使用的值与name属性的值相同。
您可以从sortable: false删除width: 50（或sortable: false和colModel}，而不是使用cmTemplate: {sortable: false}（或cmTemplate: {width: 50, sortable: false}）。有关详细信息，请参阅here。
您可以删除jqGrid的multiselect: false，rownumbers: false和restoreAfterSelect: false选项。前两个具有默认值（请参阅表中的“Default1”列，其中包含options列表）。最后一个选项（restoreAfterSelect: false）是inlineNav的选项，因此如果需要，应在inlineparams内使用。
您应该将pager: jQuery('#pager1')替换为pager: '#pager1'。 jqGrid需要pager作为id选择器。如果以另一种形式提供输入参数，jqGrid将检测错误并替换为#pager1
我建议您在所有网格中使用gridview: true选项以提高性能而不存在任何其他缺点（有关详细信息，请参阅the answer）

jqGrid with localArray - 内联导航：获取删除行按钮并调用自定义函数

1 个答案: