0 
   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. ユーザーは一度に複数の行を編集できる必要があります - デフォルトのすぐに使える実装によると、ユーザーは行を編集するたびに保存操作を実行する必要があります (Enter キーを押すか、[保存] ボタンをクリックして) 処理を続行する前に次の行を編集するには
  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 グリッドのルール機能を編集して、カスタム 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: グリッドにカスタム ボタンを追加しました。これは、編集されたすべての行のデータを収集し、Struts2 Action クラスに Ajax ポストを作成するカスタム作成の JavaScript 関数になります。そこから、この入力の配列を作成して 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" />

私たちの進捗状況について皆さんにお知らせしますが、私たちが現在直面している新しい課題があります。それについては、ここ とここに別の質問を投稿しました

4

2 に答える 2

0

ここinlineで編集を見て、ここで見つけることができる実装を行う必要があると思います。実装に問題がある場合はお知らせください。bindKeys

bindKeys

Parameters:

{ 
  onEnter: null, 
  onSpace: null, 
  onLeftKey: null, onRightKey: null, 
  scrollingRows : true 
}
于 2012-07-20T07:20:52.157 に答える
0

こんにちは、インライン編集を使用して上記の問題を解決しました。バッチ保存:

javaスクリプトで一括保存が可能です。Javaスクリプトを使用してすべてのグリッド値を読み取り、ネットワーク経由でアクションクラスに送信します

ありがとうございました、

コーディングに関するヘルプがあれば、お送りします。

于 2012-08-01T06:02:22.153 に答える