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

   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 网格进行了类似的自定义？

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

更新 1：

在网格上实现自定义"批量/批量保存"功能的过程中，我们遇到了更多问题..希望与大家分享它们..在我们努力修复它们时..如果有人可以在它们上投掷指针，请表示感谢..

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

更新 2：

我们无法识别以下答案之一中提到的绑定密钥，同时这是我们的方法。这个实现仍然有很多开放端，我们仍在研究它。

步骤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 函数，它将收集所有编辑行的数据，并向我们的 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" />

我将随时向大家通报我们的进展，但我们现在面临着新的挑战，为此我在这里和这里发布了另一个问题。

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

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

嗨，

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

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

谢谢

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

相关内容

最新更新

热门标签：