jqGrid，如何通过模态形式在网格内的任何位置添加一行？

Question

有没有办法做到这一点？ 我使用jqGrid 表单编辑功能来填充我的网格。 但是jqGrid只允许在网格内的顶部或底部位置添加一行。 我想要做的是能够先前在网格上选择所需的位置（通过单击任何现有的行），然后在所选行的上方或下方添加一行。

抱歉我的英语不好。 提前致谢。

Answer 1

你需要什么是可能的，而不是那么复杂。 从答案中查看非常古老的演示 。 如果您的列name: 'myColName' ，并且您希望在有关该列的信息之后在编辑或添加表单中插入任何信息，则可以在其中插入数据行。 表单包含<table> 。 所以，你应该插入<tr>有一个或两个孩子<td>元素（该标签的电池和用于数据的单元格）。 要符合表单中的其他数据，您应该使用class="FormData"作为<tr>元素。 第一个<td>元素（在标签的列中）应该具有class="CaptionTD ui-widget-content" ，第二个<td>元素（在用于修改输入的数据的列中）应该具有class="DataTD ui-widget-content" ：

{ // edit options
    recreateForm: true,
    beforeShowForm: function ($form) {
        var $formRow = $form.find('#tr_Name'); // 'Name' in the column name
                        // after which you want insert the information
        $('<tr class="FormData"><td class="CaptionTD ui-widget-content">' +
             '<b>Label:</b>' + // in the line can be any custom HTML code
             '</td><td class="DataTD ui-widget-content">' +
             '<span></span>' + // in the line can be any custom HTML code
             '</td></tr>').insertAfter($formRow);
    }
}

更新 ：好的，现在我明白了你想要的东西。 问题是， addRowData将被要求与选择加入新行的addedrow的editGridRow 。 因此，如果使用reloadAfterSubmit: false选项，则可以将新行添加为网格中的'first'或'last' 。 为了能够使用addRowData的'after'或'before'参数，必须使用一个参数来调用方法addRowData ，该参数指定将在其之前（或之后）插入新行的行的id。

初看起来似乎只有在修改jqGrid的源代码时才能实现您的要求。 实际上，您可以使用非常小的代码实现您的需求，而无需修改jqGrid的源代码 。 我建议如下：

您可以将指针保存到变量中的addRowData的原始实现，并使用您的实现覆盖它：

var oldAddRowData = $.fn.jqGrid.addRowData;
$.jgrid.extend({
    addRowData: function (rowid, rdata, pos, src) {
        if (pos === 'afterSelected' || pos === 'beforeSelected') {
            if (typeof src === 'undefined' && this[0].p.selrow !== null) {
                src = this[0].p.selrow;
                pos = (pos === 'afterSelected') ? 'after' : 'before';
            } else {
                pos = (pos === 'afterSelected') ? 'last' : 'first';
            }
        }
        return oldAddRowData.call(this, rowid, rdata, pos, src);
    }
});

上面的代码介绍了addRowData两个新选项： 'afterSelected'和'beforeSelected' 'afterSelected' 'beforeSelected' 。 如果在创建jqGrid之前包含代码，则将使用自定义addRowData创建网格，因此您可以使用new addedrow: 'afterSelected'或者addedrow: 'beforeSelected'作为Add form的选项。

该演示显示该建议有效。 你不应该看看演示的许多其他代码。 表单编辑的当前实现不支持本地编辑，但是我在演示中使用的只是执行此操作的旧代码。 因此，演示的总代码相对较长，但我想要演示的部分可以很容易地找到。