36

jqGrid を使用する場合、セルがクリックされたときだけでなく、ページの読み込み時に編集可能なビューにセルを強制的に読み込むにはどうすればよいですか?

以下のように「セルの編集」を設定すると、セルをクリックしたときにのみチェックボックスが表示されます。

{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" },

cellEdit:true,

また、チェックボックスをクリックすると、ユーザーがEnterキーを押すのではなく、AJAX投稿をサーバーに即座に送信する方法はありますか?

4

6 に答える 6

79

チェックボックスを常にクリック可能にするには、チェックボックスフォーマッタのdisabledプロパティを使用します。

{ name: 'MyCol', index: 'MyCol', 
  editable:true, edittype:'checkbox', editoptions: { value:"True:False"}, 
  formatter: "checkbox", formatoptions: {disabled : false} , ...

2番目の質問に答えるには、チェックボックスのイベントハンドラーを設定する必要があります。たとえば、クリックすると関数が呼び出され、サーバーにAJAXPOSTが送信されます。始めるためのサンプルコードを次に示します。loadCompleteこれをイベントに追加できます。

    // Assuming check box is your only input field:
    jQuery(".jqgrow td input").each(function(){
        jQuery(this).click(function(){
            // POST your data here...
        });
    });
于 2010-05-06T14:55:32.543 に答える
6

これは古いものですが、多くのビューがあるため、ここにもソリューションを追加することにしました。

JQuery の .delegate 関数を使用して、loadComplete イベントを使用する義務から解放される遅延バインディングの実装を作成しています。

以下を追加するだけです。

$(document).delegate('#myGrid .jqgrow td input', 'click', function () { alert('aaa'); });

これにより、そのハンドラーがグリッド行にあるすべてのチェックボックスに後でバインドされます。複数のチェックボックス列がある場合、ここで問題が発生する可能性があります。

于 2011-06-14T20:10:04.843 に答える
3

私は同じ問題を抱えていたので、チェックボックスのクリックをすぐに処理するための良い解決策を見つけたと思います。主なアイデアは、ユーザーが編集不可のチェックボックスをクリックしたときに editCell メソッドをトリガーすることです。コードは次のとおりです。

        jQuery(".jqgrow td").find("input:checkbox").live('click', function(){
            var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id'));
            var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td'));
            //I use edit-cell class to differ editable and non-editable checkbox
            if(!$(this).parent('td').hasClass('edit-cell')){
                                   //remove "checked" from non-editable checkbox
                $(this).attr('checked',!($(this).attr('checked')));
                        jQuery("#grid").editCell(iRow,iCol,true);
            }
    });

これを除いて、グリッドのイベントを定義する必要があります。

            afterEditCell: function(rowid, cellname, value, iRow, iCol){
            //I use cellname, but possibly you need to apply it for each checkbox       
                if(cellname == 'locked'){
                //add "checked" to editable checkbox
                    $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked')));
                            //trigger request
                    jQuery("#grid").saveCell(iRow,iCol);
                }   
            }, 

            afterSaveCell: function(rowid, cellname, value, iRow, iCol){
                if(cellname == 'locked'){
                    $("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell');
                }   
            },

次に、チェックボックスは、ユーザーがクリックするたびに編集リクエストを送信します。

于 2012-03-19T15:08:32.550 に答える
2

すべてのグリッド行を Web サーバーに送信する送信関数が 1 つあります。

このコードを使用してこの問題を解決しました：

var checkboxFix = [];
$("#jqTable td[aria-describedby='columnId'] input").each(function () {
        checkboxFix.push($(this).attr('checked'));
});

次に、以下のコードから取得した値と混合しました。

$("#jqTable").jqGrid('getGridParam', 'data');

誰かの役に立てば幸いです。

于 2012-07-26T20:34:44.710 に答える