jqGrid，如何通过模态形式在网格内的任何位置添加一行？ [英] jqGrid, how to add a row in any position inside the grid via modal form?

问题描述

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

<抱歉，我的英语很差。在此先感谢。

解决方案

您需要的是可能的，而不是那么复杂。从旧演示： //stackoverflow.com/a/5745168/315935\">答案。如果您的列名为 name：'myColName'，并且您希望在之后在编辑或添加表单中插入任何信息列，你可以插入里面的数据行。表单包含< table> 。因此，您应插入< tr> ，其中包含一个或两个子< td> 元素（标签和数据的单元格）。为了符合表单中的其他数据，您应该使用 class =FormData获取< tr> 元素。第一个< td> 元素（在标签的列中）应该有 class =CaptionTD ui-widget-content和第二个< td> 元素（在修改输入数据的列中）应该有 class =DataTD ui -widget-content：

  {//编辑选项
 recreateForm：true， 
 beforeShowForm：function（$ form）{
 var $ formRow = $ form.find（'＃tr_Name'）; //'名称'在列名
 //之后你要插入信息
 $（'< tr class =FormData>< td class =CaptionTD ui-widget-内容>'+ 
'< b>标签：< / b>'+ //在行中可以是任何自定义HTML代码
'< / td>< td class =行中的DataTD ui-widget-content>'+ 
'< span>< / span>'+ //可以是任何自定义HTML代码
'< / td>< ; / TR>'）insertAfter（$ formRow）; 
} 
} 
  

更新：好的，现在我明白你想要什么。问题是 addRowData 将被调用以添加带有 addedrow editGridRow 。因此，如果您使用 reloadAfterSubmit：false 选项，您可以将新行添加为'first'或作为<$网格中的c $ c>'last'。能够在之前使用'或之前的参数 addRowData 方法 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'; 
} 
} 
返回oldAddRowData.call（this，rowid，rdata，pos，src）; 
} 
}）; 
  

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

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

Is there any way to do that? I use jqGrid form editing feature to populate my grid. But jqGrid only permits to add a row on top or bottom position inside the grid. What I want to do is be able to previously select the desired position on the grid (by clicking in any existing row) and then add a row above or below that selected row.

Sorry for my poor english. Thanks in advance.

解决方案

What you need is possible and is not so complex. Look at the very old demo from the answer. If you have the column with name: 'myColName', and you want to insert any information in the edit or add form after the information about the column, you can just inset the row of data inside. The form contain <table>. So you should insert the <tr> having one or two child <td> elements (the cell for the label and the cell for the data). To be conform with other data in the form you should use class="FormData" for the <tr> element. The first <td> element (in the column for the labels) should has class="CaptionTD ui-widget-content" and the second <td> element (in the column for the data for the input of modification) should has 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);
    }
}

UPDATED: OK, now I understand what you want. The problem is that addRowData will be called for adding of new row with the option addedrow of editGridRow. So if you use reloadAfterSubmit: false option you can add the new row either as 'first' or as the 'last' in the grid. To be able to use 'after' or 'before' parameter of addRowData the method addRowData must be called with one more parameter which specify the id of the row before which (or after which) the new row will be inserted.

At the first look it seems that only with respect of modification of the source code of jqGrid your requirement can be implemented. In reality you can do implement your requirements with very small code and without modification of the source code of jqGrid. I suggest the following:

You can save the pointer to the original implementation of addRowData in a variable and overwrite it with your implementation:

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);
    }
});

The code above introduce two new options of addRowData: 'afterSelected' and 'beforeSelected'. If you include the code before creating of jqGrid the grid will be created using your custom addRowData, so you can use new addedrow: 'afterSelected' or addedrow: 'beforeSelected' as the options of Add form.

The demo shows live that the suggestion work. You should don't look at many other code of the demo. The current implementation of form editing don't support local editing, but in I used in the demo just old code which do this. So the total code of the demo is relatively long, but the part which I want to demonstrate you can easy find inside.

这篇关于jqGrid，如何通过模态形式在网格内的任何位置添加一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！