7

グリッドに単純なインライン編集があり、ユーザーがテキスト ボックスからタブを離したときに変更をコミットしたいと考えています。jqGrid のデフォルトの動作では、ユーザーは「Enter」を押して変更をコミットする必要がありますが、これはユーザーにとって直感的ではありません。

代替テキスト 

    onSelectRow: function(id) {
         $(gridCoreGroups).editRow(id, true, undefined, function(response) 
         {
              alert("hello world");
         }
    }

提供されたイベントを処理しましたが、それらはすべて、ユーザーが「Enter」を押した結果として発生するため、回避したいと考えています。ユーザーがこのセルからタブを離したときにアクションをトリガーするように接続できるものはありますか?

4

6 に答える 6

10

インライン編集では、これをいくつかの方法で実行できます。onSelectRow トリガーを使用して onblur イベントを入力フィールドにバインドし、編集ボタンと保存ボタンを不要にするには、次のようにします。

  $('#gridId').setGridParam({onSelectRow: function(id){
    //Edit row on select
    $('#gridid').editRow(id, true); 

    //Modify event handler to save on blur.
    var fieldName = "Name of the field which will trigger save on blur.";
    //Note, this solution only makes sense when applied to the last field in a row.
    $("input[id^='"+id+"_"+fieldName+"']","#gridId").bind('blur',function(){
      $('#gridId').saveRow(id);
    });
  }});

行内に表示される可能性のあるすべての入力に jQuery ライブ イベント ハンドラーを適用するには (jqGrid はすべての入力に rowId_fieldName というラベルを付けます)、グリッド内の行数をループしてスローし、次のようにします。

var ids = $("#gridId").jqGrid('getDataIDs');
for(var i=0; i < ids.length; i++){ 
  fieldName = "field_which_will_trigger_on_blur";
  $("input[id^='"+ids[i]+"_"+fieldName+"']","#gridId").live('blur',function(){
    $('#gridId').jqGrid('saveRow',ids[i]);
  });
}

注:上記のように .live() でぼかしを使用するには、jQuery 1.4 または次の場所にあるパッチが必要です: Simulating "focus" and "blur" in jQuery .live() method

rowId には注意してください。行の並べ替え、追加、および削除を行うと、行 ID を iRow または行番号に変換するためのトリッキーな jQuery を作成していることに気付く場合があります。

あなたが私のようで、個々のセルを編集した場合は、 afterEditCell トリガーを次のように変更する必要があります。

  $('#gridId').setGridParam({afterEditCell: function(id,name,val,iRow,iCol){
    //Modify event handler to save on blur.
    $("#"+iRow+"_"+name,"#gridId").bind('blur',function(){
      $('#gridId').saveCell(iRow,iCol);
    });
  }});

それが役立つことを願っています..

于 2010-05-18T21:48:27.317 に答える
6

これはかなり恐ろしいですが、この問題に対する私の見解であり、おそらくもう少し簡単でより一般的です-アイテムがフォーカスを失ったときにプログラムでEnterキーを押します:)

       afterEditCell: function() {
            //This code saves the state of the box when focus is lost in a pretty horrible
            //way, may be they will add support for this in the future

            //set up horrible hack for pressing enter when leaving cell
            e = jQuery.Event("keydown");
            e.keyCode = $.ui.keyCode.ENTER;
            //get the edited thing
            edit = $(".edit-cell > *");
            edit.blur(function() {
                edit.trigger(e);
            });
        },

そのコードを jqgrid セットアップ コードに追加します。

最後に編集されたアイテムが、親 td として .edit-cell を持つ唯一のものであると想定しています。

于 2011-03-16T11:39:46.903 に答える
2

私の解決策は、基本的な jQuery セレクターとイベントをグリッドとは別に使用して、このイベントを検出することでした。イベントをキャプチャするために、グリッド内のテキスト ボックスでライブ イベントとぼかしイベントを使用します。2 つのイベントは相互に組み合わせてサポートされていないため、このハックが解決策になりました。

jQuery .live() メソッドで「フォーカス」と「ぼかし」をシミュレートする

于 2009-09-14T23:43:31.740 に答える
0

私は同じ問題を抱えていて、上記の答えを試しました。最後に、ユーザーがタブを離れるときに「Enter」キーを押すソリューションを使用しました。

// Call this function to save and unfinished edit
// - If an input exists with the "edit-call" class then the edit has
//   not been finished.  Complete the edit by injecting an "Enter" key press
function saveEdits() {
    var $input = $("#grid").find(".edit-cell input");
    if ($input.length == 1) {
        var e = $.Event("keydown");
        e.which = 13;
        e.keyCode = 13;
        $input.trigger(e);
    }
}
于 2015-07-10T16:50:58.633 に答える
0

この質問は古いことは知っていますが、答えは古くなっています。

lastsel というグローバル変数を作成し、jqGrid コードに以下を追加する必要があります。

 onSelectRow: function (id) {
            if (!status)//deselected
            {
                if ($("tr#" + lastsel).attr("editable") == 1) //editable=1 means row in edit mode
                    jQuery('#list1').jqGrid('saveRow', lastsel);
            }
            if (id && id !== lastsel) {
                jQuery('#list1').jqGrid('restoreRow', lastsel);
                jQuery('#list1').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },
于 2014-10-29T09:58:21.707 に答える