Question

我正在使用JqGrid进行内联编辑，我不使用导航，寻呼机或页脚。我想在底部添加空行添加。我的意思是在添加新行之后编辑一个现有行后，空行将始终存在。

我在loadComplete事件中添加了一行，但我只是在开头添加空行了。

jQuery("#tableContents").jqGrid({
    postData: { orderId: '139358' },
    mtype: "POST",
    url: "test.asmx/GetContents",
    datatype: "json",
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    serializeGridData: function (postData) {
        return JSON.stringify(postData);
    },
    jsonReader: { repeatitems: true, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
    colNames: ['Master Content ID', 'Description Of Goods', 'No Of Items', 'Total Value for Customs', 'Weight', 'Track No'],
    colModel: [
             {
                 name: 'master_content_id', index: 'master_content_id', width: 60, hidden: true, editable: true, editrules: { edithidden: false }
             },
             {
                 name: 'content', index: 'content', width: 60, sorttype: "string", editable: true, edittype: "text",
                 editrules: {
                     required: true
                 }
             },
             {
                 name: 'piecesInt', index: 'piecesInt', width: 90, align: "right", sorttype: "int", editable: true,
                 editrules: {
                     number: true,
                     required: true
                 }
             },
             {
                 name: 'value', index: 'value', width: 100, align: "right", sorttype: "float", editable: true,
                 editrules: {
                     required: true
                 }
             },
             {
                 name: 'weight', index: 'weight', width: 80, align: "right", sorttype: "float", editable: true,
                 editrules: {
                     required: true
                 }
             },
             {
                 name: 'track_no', index: 'track_no', width: 80, align: "right", sorttype: "string", editable: true
             },
    ],
    rowNum: 10,
    rowList: [10, 20, 30],
    //pager: jQuery('#pager1'),
    sortorder: "desc",
    viewrecords: true,
    regional: 'tr',
    height : '100%',
    caption: "Manipulating Array Data",
    editurl: 'test.asmx/EditContent',
    loadonce: true,
    sortable: true,
    //footerrow: true,
    onSelectRow: function (rowid) {
        var $self = $(this),
            // savedRows array is not empty if some row is in inline editing mode
            savedRows = $self.jqGrid("getGridParam", "savedRow");
        if (savedRows.length > 0) {
            $self.jqGrid("restoreRow", savedRows[0].id);
        }
        $self.jqGrid("editRow", rowid, {    
            keys: true,
            extraparam: { orderId: '139358', staffId : '111' },
            aftersavefunc: function (rowid) {
                alert("Saved");
            }
        });
    },
    loadComplete: function () {
        var $self = $(this)
        $self.jqGrid('addRowData', undefined, {});
    }
});

我们怎么能这样做？

Answer 1

您尝试以与标准行为相反的方式使用jqGrid。这是个糟糕的主意。您将不得不编写大量代码，并且与标准方法的区别最小。

主要问题是：jqGrid在网格内部保存数据。您尝试在数据内添加一个空行，该行未从服务器加载，该服务器未处于编辑模式（例如addRow）并且未保存在服务器。因此，您尝试以与jqGrid逻辑相矛盾的方式使用网格。这听起来很简单，但实际上很糟糕，实施也很复杂。

我建议你遵循标准方式。您将获得干净简单的代码，大多数用户可以直观地使用网格。例如，您可以添加导航器工具栏，在其中添加关于inlineNav的“+”/“添加”按钮。用户将直观地了解添加新行需要做什么。用户是否点击网格底部的空行，或者用户点击“添加新行”按钮（也存在于网格底部）的区别非常小。单击按钮后，将添加新行，用户可以插入数据。按 Enter 将保存该行，按 Esc 将删除空行。代码将很简单，它将与您现在尝试实现的几乎相同。

如何让JqGrid在底部总是有空行？

1 个答案: