通过内联编辑在 Struts2 jQuery Grid 中编辑多行

Question

   The struts2-jQuery grid offers a wide variety of edit features. But for one of our requirements, the Out-of-the-Box 'Edit' feature in this grid is not suitable. we want to customize it as follows..

我们的要求是：

1. 用户应该能够一次编辑多于 1 行 - 根据默认的开箱即用实现，每次编辑行后，用户必须执行保存操作（通过按 Enter 或单击 Save 按钮) 在继续编辑下一行之前
2. 使用 TAB 在行之间移动以进行编辑

3. “批量/批量保存”操作可以将所有已编辑的行数据发送到我的操作，然后我们可以从那里进行批量保存数据库操作

   我们的方法：

自定义 1：将“编辑/取消”按钮放在所有行的第一列（每行没有保存按钮）。单击编辑后，特定行变为可编辑
自定义 4：在网格工具栏中添加一个新的“批量保存”图像按钮
自定义 5：单击“批量保存”时，收集所有已编辑的行数据（连同 id）并在操作中将其作为数组接收以执行“批量更新”数据库操作

We got our inspiration from the 'Custom Edit' posted @ www.trirand.com/blog/jqgrid/jqgrid.html

** 有没有人遇到过类似的需求或对 Struts2-jQuery Grid 进行过类似的自定义？**

I am surprised that the grid does not offer this 'Multi Row Edit' by default.

**

更新 1：

**

在网格上实现自定义“批量/批量保存”功能的过程中，我们遇到了一些问题。想与大家分享它们。在我们努力修复它们的同时。感谢任何人可以对他们投掷指针..

1. 我们希望在通过我们自定义的“全部保存”网格工具栏按钮保存数据后刷新网格。单击此按钮后，我们将向将执行保存所有修改数据的操作发出 Ajax 发布请求。

2. 在编辑（不保存）后导航离开时，显示警报以保存修改后的数据

3. 当用户在编辑列时点击“Enter”时，阻止页面发布到 Action 类

4. 添加自定义复选框并将这些值用于自定义删除操作（因为通过多选选项生成的复选框会导致多重编辑出现问题）

5. 在 S2J Grid 中编辑规则功能以调用自定义 javascript 验证

**

更新 2：

**

我们无法识别以下答案之一中提到的 bindKeys，同时这是我们的方法。这个实现还有很多开放的地方，我们仍在努力解决。

第 1 步：在网格中使用以下内容为每一行数据 onGridCompleteTopics="createbuttons" 创建自定义的“编辑”和“取消”按钮，这里的 createbuttons 是我们自定义编写的 jScript 函数。

 $.subscribe('createbuttons',function(event,data)
             {

                    var ids = jQuery("#gridtable").jqGrid('getDataIDs');
                for(var i=0;i < ids.length;i++)
                {
                    var cc = ids[i];
                    var rowData = jQuery('#gridtable').jqGrid('getCell',cc,'name');

                    edit = "<input  type='image' class='ui-icon ui-icon-pencil' onblur='check()'  style='display:inline;'  onclick=\"javascript:editCurrentRow('"+cc +"');\" />";
                    cncl = "<input  type='image' class='ui-icon ui-icon-cancel' style='display:inline;'    onclick=\"javascript:removeCurrentRow('"+ cc +"');\" />";


                    jQuery("#gridtable").jqGrid('setRowData',ids[i],{Buttons:edit+cncl});

                }

                });

第 2 步：在网格中添加一个自定义按钮，这将是一个自定义编写的 javascript 函数，它将收集所有已编辑行的数据并将 Ajax 发布到我们的 Struts2 Action 类。从那里我们创建这个输入的数组，将其传递给 Oracle 过程并在过程中执行 DB 操作（插入/更新）（使用 FORALL INSERT/UPDATE）

navigatorExtraButtons="{                                
                                saveall:{
                                      title:'Save Alls',                                      
                                      onclick:function(){call_function_save()}
                                      }
                                  }"

第 3 步：我们在所有文本框单元格中添加了以下代码，以防止在按 Enter 时发布页面

<sjg:gridColumn name="name" index="name" 
            title="Name" formatter="String" editable="true" editoptions="{ dataEvents: [
        { 
            type: 'keydown', 
            fn: function(e) { 
                var key = e.charCode || e.keyCode;
                if (key == 13)//enter
                {
                    return false;
                }
            }
        } 
    ]}"
           edittype="text" />

我会向大家发布我们的进展，但我们现在面临一个新的挑战，为此我发布了另一个问题here 和here

Answer 1

我认为您需要查看inline 编辑here 并实现bindKeys，您可以找到here。如果您在实施时遇到问题，请告诉我。

bindKeys

Parameters:

{ 
  onEnter: null, 
  onSpace: null, 
  onLeftKey: null, onRightKey: null, 
  scrollingRows : true 
}

Answer 2

各位朋友，我使用内联编辑解决了上述问题。 批量保存：

可以使用 java 脚本进行批量保存。 使用 java 脚本，我们读取所有网格值，然后通过网络将其发送到我们的动作类

谢谢，

如果对编码有任何帮助，我会发送给您。