0

我正在使用 jqGrid 和 localArray 数据。我正在从 azure 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"
});
4

1 回答 1

2

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 WebServiceASHX 处理程序等)。所有技术(即使是最古老的技术,如 ASMX WebService 和 ASHX 处理程序)都可以与 Windows Azure 一起使用。

如果您决定遵循您原来的方式,您可以使用表单编辑来实现删除。我最初在这里描述了如何在editurl: "clientArray". 在答案中,我发布了如何将全套表单编辑操作与本地数据一起使用的方式。另一个答案包含更新的代码,适用于 jqGrid 的当前版本(4.4.1 和 4.4.4)。我建议您使用delSettings一个答案。本地保存数据所需的所有回调onclickSubmitdelSettings

您的代码的常见小注释:

  • 我发现在一个网格中同时使用id和使用很奇怪。RouteId可能id根本不需要,如果在您的情况下它在数据库中是真正唯一的,您可以将其添加key: true为附加属性RouteIdid
  • 您可以index从所有列中删除属性,因为您使用的值与name属性的值相同。
  • 您可以从中删除sortable: false(或同时删除width: 50and sortable: falsecolModel并使用代替 that cmTemplate: {sortable: false}(or cmTemplate: {width: 50, sortable: false})。请参阅此处了解更多信息。
  • 您可以删除multiselect: false,rownumbers: falserestoreAfterSelect: falsejqGrid 的选项。前两个具有默认值(请参阅表中的“Default1”列和选项列表)。最后一个选项 ( restoreAfterSelect: false) 是 的选项,inlineNav因此如果需要,应该在inlineparams.
  • 您应该替换pager: jQuery('#pager1')pager: '#pager1'. jqGrid 需要pager作为 id 选择器。如果您以另一种形式提供输入参数 jqGrid 检测错误并替换为#pager1
  • 我建议您gridview: true在所有网格中使用选项来提高性能而没有任何其他缺点(有关详细信息,请参阅答案
于 2013-04-06T11:39:10.643 回答