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

问题描述

  struts2-jQuery网格提供了各种各样的编辑功能。但是对于我们的一项要求，此网格中的编辑功能不适用。我们想按照以下方式对其进行自定义：
  

我们的要求：

1. 用户应该可以一次编辑多于1行 - 根据默认的现成实现，在每个在编辑下一行之前，用户必须执行保存操作（通过按Enter键或单击保存按钮）
   
2. 在使用TAB进行编辑的行之间移动



3. 批量/批量保存操作可以将所有已编辑的行数据发送到我的操作中，并从那里我们可以执行批量保存数据库操作

   
   
   

   ：

在所有行的第一列上带上编辑/取消按钮（每行不保存按钮）。在点击编辑时，特定行变为可编辑

自定义4 ：在网格工具栏中添加一个新的批量保存图像按钮

Customization 5 ：点击'批量保存'，收集所有编辑过的行数据（以及id），并以Action的形式接收数据以执行'批量更新'数据库操作


 我们从'自定义编辑'张贴@ www.trirand.com/blog/jqgrid/jqgrid.html 
  

**是否有人遇到类似的需求或者对Struts2-jQuery Grid做过类似的定制？**

 我很惊讶网格在默认情况下不提供这种'多行编辑'。 
  

**

**





在网格上实现一个自定义的批量/批量保存功能，我们得到了更多的问题..想与大家分享..当我们正在努力让他们固定..欣赏是否有人可以抛出指针..






1. 我们希望在通过我们自定义的Save All网格工具栏按钮保存数据后刷新网格。点击这个按钮后，我们正在向操作发出一个Ajax发布请求，以执行保存所有修改过的数据。

在编辑之后导航（不保存），显示警告以保存修改后的数据 当编辑列时用户点击Enter时，阻止发布到Action类的页面 li>


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




3. S2J Grid中的编辑规则功能可以调用自定义JavaScript验证

p>



** p>



我们无法识别下面答案中提到的bindKeys，同时这里是我们的方法。这个实现还有很多开放的目的，我们仍然在努力。







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





$ $ $ $ $ $ $ $ $ $ $ $ $ $ $
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 =<输入类型='图像'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}）;

}

}）;




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

  navigatorExtraButtons ={
 saveall：{
 title：'Save Alls'，
 onclick：function（）{call_function_save（）} 
 } 
}
  

第3步：我们将以下代码添加到所有文本框单元格中以防止在输入时点击页面发帖

 < sjg：gridColumn name =nameindex =name
 title =Nameformatter =Stringeditable =trueeditoptions ={dataEvents：[
 {
 type：'keydown'，
 fn：function（e）{
 var key = e.charCode || e.keyCode; 
 if（key == 13）//输入
 {
 return false; 
} 
} 
} 
]}
 edittype =text/> 
  

我会让每个人都关注我们的进展，但是现在我们面临着一个新的挑战，为此我发布了另一个问题和

>您好朋友我使用内联编辑为上述问题提供了解决方案。
批量保存：



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



谢谢，





如果有任何编码方面的帮助，我会寄给你。




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

Our Requirements are:

1. User should be able to edit more than 1 row at a time - According to the default out-of-the-box implementation, after every row edit, user has to perform a save operation (by hitting Enter or clicking Save button) before proceeding to edit the next row
2. Move between rows using TAB for editing

3. A 'Bulk/Batch Save' operation which could send all the edited rows data to my action and from there we can do a Bulk Save database operation

   Our approach:

Customization 1: Bring the 'Edit / Cancel' buttons on the first column on all rows (No save buttons on each row). On click of Edit, the particular row becomes editable
Customization 4: Bring a new 'Batch Save' image button in the Grid tool bar
Customization 5: On click on 'Batch Save', collect all the edited row data (along with id) and receive it in Action as arrays to perform 'Batch Update' database operation


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

** Has anybody come across similar requirements or have done similar customizations to the Struts2-jQuery Grid ?**

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

**

**

In the process of implementing a custom 'Bulk/Batch Save' feature on the grid, we got few more problems.. wanted to share them with you all .. while we are working to get them fixed.. appreciate if anybody could throw pointers on them..

1. We want to Refresh the grid after data is saved via our custom 'Save All' grid tool bar button. On click of this button we are making an Ajax post request to the action that will perform the save all modified data.

2. When navigating away after Edit (without save), show alert to save the modified data

3. Prevent page posting to the Action class when user hits 'Enter' while editing a column

4. Adding custom checkbox and use those values for custom Delete operation (because the checkbox generated via the Multiselect option is causing issues in multi-edit)

5. Edit rules feature in S2J Grid to call custom javascript validation

**

**

We couldn't identify the bindKeys as mentioned in one of the answers below, meanwhile here is our approach. There are still many open ends to this implementation , which we are still working it out.



Step 1: Use the following in the grid to create our custom 'Edit' & 'Cancel' buttons for each row of data onGridCompleteTopics="createbuttons" , here createbuttons was our custom written jScript function.


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

                }

                });


Step 2: Added a custom button to the grid, this will be a custom written javascript function which will collect all editted row's data and make an Ajax post to our Struts2 Action class. From there we create an array of this input to pass it on to Oracle procedure and perform the DB operation (Insert/Update) within the procedure (using FORALL INSERT/UPDATE)

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

Step 3: We added the following code to all textbox cells to prevent page posting when hit on 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" />

I will keep everyone posted about our progress, but there is a new challenge which we are facing now, for which i have posted another question here and here

解决方案

Hi friends I got the solution for the above problem using inline edit.Batch save:

Batch save is possible with java script.using java script we read all grid values then it is send over the network to our action class

Thank you,

If any help on coding i will sent to you.

这篇关于通过内联编辑在Struts2 jQuery Grid中编辑多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！