Question

以下是我的要求：

最初JQgrid应为空
点击Jqgrid后，必须使用自动ID添加新行
对行数据丢失的焦点应保存到DB

点击行后，用户应该可以编辑它，丢失的焦点数据应该保存到DB

var lastsel;
jQuery("#list").jqGrid({
    url: "/TransactionType/GetGridData/",
    datatype: 'json',
    mtype: 'GET',
    height: "300",

    colNames: ['Customer ID', 'Contact Name', 'Address', 'City', 'Postal Code'],
    colModel: [
      { name: 'CustomerID', index: 'CustomerID', width: 100, align: 'left' },
      { name: 'ContactName', index: 'ContactName', width: 150, align: 'left', editable: true },
      { name: 'Address', index: 'Address', width: 300, align: 'left', editable: true },
      { name: 'City', index: 'City', width: 150, align: 'left', editable: true },
      { name: 'PostalCode', index: 'PostalCode', width: 100, align: 'left', editable: true }
    ],

    pager: jQuery('#pager'),
    rowNum: 10,
    rowList: [1, 3, 5, 10, 20, 30, 40, 50],
    recordpos: 'right',
    viewrecords: true,
    sortorder: "desc",
    sortname: "CustomerID",
    sorttype: "integer",
    multiselect: false,
    caption: "Manipulating JSON Data",
    emptyrecords: "No records found.",
    loadtext: "Loading...",
    loadonce: true,
    pgtext: "Page {0} of {1}",
    jsonReader: {
        repeatitems: true,
        cell: "cell"
    },

    onSelectRow: function (id) {
        if (id) {
            if (id !== lastsel) {
                jQuery('#list').jqGrid('restoreRow', lastsel);
                jQuery('#list').jqGrid('editRow', id, true);
                lastsel = id;
            } else {
                jQuery('#list').jqGrid('restoreRow', lastsel);
                lastsel = "";


                debugger;
                var rows = jQuery("#list").jqGrid('getRowData');
                var paras = new Array();
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    paras.push($.param(row));
                }
                var rids = $('#list').jqGrid('getDataIDs');
                var n = rids.length;
                var nth_row_id = rids[n - 1];

                jQuery("#list").addRow(n + 1, parameters = {
                    edit: true,
                    editicon: "ui-icon-pencil",
                    add: true,
                    addicon: "ui-icon-plus",
                    save: true,
                    saveicon: "ui-icon-disk",
                    cancel: true,
                    cancelicon: "ui-icon-cancel",
                    addParams: { useFormatter: false },
                    editParams: {}
                });                     


            }
        }




    },
    editurl: "/TransactionType/GetTotalCount",


});

这是我的Jqgrid，我可以添加行而不是自动生成的id，并且在丢失焦点的行或Enter键之后我无法调用控制器方法。

Answer 1

jqGrid包含inlineNav方法，该方法允许添加到导航栏（由navGrid创建，通常使用add: false, edit: false选项调用，请参阅the answer）添加，编辑，保存和取消按钮。如果用户单击按钮中的一个，则将调用相应的内联编辑方法。可以使用editParams和addParams.addRowParams指定内联编辑方法的任何其他选项（例如，请参阅here）。

您当前的代码直接使用addRow。第二个选项（parameters =）包含错误的语法。如果您需要生成唯一ID，我建议您使用$.jgrid.randId()代替使用n + 1。 addRow的第一个也是唯一的参数是带有选项的对象。如果直接使用adRow，则可以使用rowID选项指定新添加的行的ID。如果未指定rowID选项，则jqGrid会自动使用$.jgrid.randId()生成新行的唯一rowid。

所有内联编辑按钮的ID都是根据网格的ID和后缀设置的：“_ iladd”，“_iledit”，“_ ilave”，“_ ilcancel”。例如，网格具有id="list"，则“保存”按钮的ID将为"list_ilsave"。如果需要，您可以通过ID对其进行寻址来禁用任何按钮（例如$("#list_ilsave").removeClass('ui-state-disabled'); - 启用保存按钮和$("#list_ilsave").addClass('ui-state-disabled'); - 禁用它。以同样的方式，您可以使用jQuery.click来模拟任何按钮上的点击。例如，$("#list_ilsave").click();将模拟单击“保存”按钮。

如果用户点击“添加”按钮，则新行（<tr>）将获得其他类"jqgrid-new-row"。您可以使用该事实查找addRow添加的行。

您可以使用editoptions.dataEvents注册blur或focusout。 The answer和the answer可以提供一些可以帮助您的代码碎片。

使用成功保存后在DB中生成的值刷新网格的ID可能很重要。有很多方法可以实现这一点。最简单的方法之一是在成功保存行后重新加载网格。请参阅the answer中的代码。另一种方法是从editurl（代码中的“/ TransactionType / GetTotalCount”）指定的Web方法返回新的id。使用aftersavefunc回调，您可以获得editurl的响应，并修改网格中的ID。请参阅the answer中相对较长的aftersavefunc代码作为示例。

想要使用内联添加，编辑，保存而无需任何按钮来创建JQgrid

1 个答案: