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

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

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

Answer 1

你需要什么是可能的，而不是那么复杂。 从答案中查看非常古老的演示 。 如果您的列name: 'myColName' ，并且您希望在有关列的信息之后在编辑或添加表单中插入任何信息，则可以在其中插入数据行。 表单包含

。 因此，您应该插入具有一个或两个子

元素的

（标签的单元格和数据的单元格）。 为了与表单中的其他数据保持一致，您应该使用class="FormData"作为

元素。 第一个

元素（在标签的列中）应该具有class="CaptionTD ui-widget-content" ，第二个

元素（在修改输入的数据列中）应该具有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 $('' + 'Label:' + // in the line can be any custom HTML code '' + '' + // in the line can be any custom HTML code '').insertAfter($formRow); } } 

更新 ：好的，现在我明白你想要什么。 问题是将调用addRowData以添加具有editGridRow的选项addrow的新行。 因此，如果使用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的选项。

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