jquery - jqGridモーダルフォーム

Question

次の機能を備えた jqgrid の例を見つけようとしています。

1. 各行の編集アイコン
2. 各行の削除アイコン (理想的には、編集アイコンとは別の列にあります)。
3. ローカルデータ
4. インライン編集ではなくモーダル編集フォーム

この例は私が見た中で最も近いものですが、機能 1 と 2 はありません。

Answer 1

わかりましたので、たとえば、このような colNames があると仮定しています

['名前', '会社名','編集', '削除']

カスタム編集ボタンが必要な各行の編集列で、削除も同じですよね？

カスタム ボタンのコードを記述します。カスタム ボタンが必要ない場合は、action formatterを使用できます。このためにもコードを書きます。

別の列のカスタム編集ボタンと削除ボタン。

function callMeOnLoadComplete(){
 var iCol = getColumnIndexByName(grid,'Edit'); // 'Edit' - name of the actions column
         grid.children("tbody")
                .children("tr.jqgrow")
                .children("td:nth-child("+(iCol+1)+")")
                .each(function() {
                 $("<div>",
                        {
                            title: "Save",
                            mouseover: function() {
                                $(this).addClass('ui-state-hover');
                            },
                            mouseout: function() {
                                $(this).removeClass('ui-state-hover');
                            },
                            click: 
                            do sth
                            }
                      ).css({"margin-left": "5px", float:"left"})
                       .addClass("ui-pg-div ui-inline-save")
                       .attr('id',"saveEdits")
                       .append('<span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>')
                       .appendTo($(this).children("div"));

}

上記の関数を jqgrid の loadComplete または gridComplete パラメータで呼び出します。これは列の編集に対して、同様に列の削除に対しても行うことができます。

 var getColumnIndexByName = function(grid,columnName) {
                var cm = grid.jqGrid('getGridParam','colModel'), i=0,l=cm.length;
                for (; i<l; i+=1) {
                    if (cm[i].name===columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            };

これらのアイコンはそれに付随する画像から選択されるため、jquery custom ui.css があると想定しています。

Edit and Delete Button with action formatter

あなたのcolModalで、Edit Columnのためにこのようなことをしてください。

{ name: 'Edit', index: 'Edit', formatter: 'actions',formatoptions: {keys: true,delbutton:false}}

削除列に削除ボタンが必要なため、delbutton:false を指定した理由。同じ列に入れたい場合は、このプロパティを削除してください。それ以外の場合は、列の削除でも同じアクション フォーマッタを使用して、そこで editbutton:false を作成できます。