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..

我们的要求是：

用户应该能够一次编辑多行 - 根据默认的开箱即用实现，每行编辑后，用户必须执行保存操作（通过按Enter键或单击“保存”按钮）在继续编辑下一行之前
使用TAB在行之间移动进行编辑
“批量/批量保存”操作，可以将所有已编辑的行数据发送到我的操作，然后我们可以执行批量保存数据库操作

我们的方法：

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

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：

**

在网格上实现自定义“批量/批量保存”功能的过程中，我们遇到了更多问题..想与大家分享它们......我们正在努力解决这些问题..如果有人欣赏的话可以指点他们..

我们希望在通过我们自定义的“全部保存”网格工具栏按钮保存数据后刷新网格。单击此按钮，我们将对将执行保存所有已修改数据的操作发出Ajax发布请求。
在编辑后导航（不保存）时，显示警告以保存修改后的数据
当用户在编辑列时点击“Enter”时阻止将页面发布到Action类
添加自定义复选框并将这些值用于自定义删除操作（因为通过Multiselect选项生成的复选框导致多重编辑中的问题）
在S2J Grid中编辑规则功能以调用自定义javascript验证

**

更新2：

**

我们无法识别下面其中一个答案中提到的bindKeys，同时这是我们的方法。这项实施仍有许多开放的目标，我们仍在努力解决这个问题。

第1步：在网格中使用以下内容创建我们的自定义“编辑”＆amp;每行数据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函数，它将收集所有编辑行的数据并向Struts2 Action类发布Ajax。从那里我们创建一个这个输入的数组，将它传递给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脚本我们读取所有网格值，然后通过网络发送到我们的动作类

谢谢，

如果有任何关于编码的帮助，我会发给您。

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

2 个答案: