1

jqGrid 4.5.2 & jQuery 1.9.1 を使用。クエリから返されたデータの行を表示する Web ページに jqGrid があります。グリッドの各行には 2 つのsubmitボタンがあり、デフォルトでは無効になっていますがonSelectRow、jqGrid のイベント内で有効になります。

以下のコードにボタンを追加しています。

var ids = $("#myGrid").jqGrid("getDataIDs");
for (var i=0;i < ids.length;i++) {
    var cl = ids[i];
    sm = "<input id='resendMsg' style='height:25px;width:65px;' type='submit' value='Re-Send' disabled='true'  />";
    ca = "<input id='cancelMsg' style='height:25px;width:55px;' type='submit' value='Cancel' disabled='true' />";
    $("#myGrid").jqGrid("setRowData",ids[i], {msgAct:sm+ca});
    }

submitボタンはデフォルトで無効になっていることに注意してください。

グリッド内の行が選択されている場合、その行の 2 つのボタンのみを にしますenabled。onSelectRowイベントでは、後で使用する変数を設定することも行われます。

var gridRow = $(this).jqGrid("getRowData",id);
var srow = $(this).jqGrid("getGridParam","selrow");

私が望む他の行動onSelectRow-

行をクリックできないようにしたくない - グリッド内の別の行に移動するには、2 つの送信ボタンのいずれかをクリックする必要があります。1 回の送信で 1 セットのアクションが実行され、グリッドがリセットされます (何も選択されておらず、すべての行のすべてのボタンが無効になっています)。
もう 1 つの送信ボタン (Cancelボタン) は、前の手順のアクションを実行しませんが、グリッドをリセットします (何も選択されておらず、すべての行のすべてのボタンが無効になっています)。

選択した行のボタンを有効にするためにさまざまなことを試しましたが、最初の行のみを有効にするか、すべての行を有効にするか、または行を有効にしません。上記の値をsrow確認しましたが、行の正しい ID であることを確認できます。

選択した行の送信ボタンを有効にして、グリッド内の他のすべてのボタンを無効にするにはどうすればよいですか?

ありがとう！

編集：

@Oleg と彼の提案とフォローアップのおかげで、質問を解決することができました。@Olegの応答により、私は正しい方向に進みました。

colModelに、msgAct各行のボタンを取得し、その行に関連付けます。 

{name: "msgAct",
    width: col4width,
    align: "center",
    formatter: function() {
    return "<input name='resendMsg' style='height:25px;width:65px;' type='submit' value='Re-Send' disabled='disabled' />" +
       "<input name='cancelMsg' style='height:25px;width:55px;' type='submit' value='Cancel' disabled='disabled' />" 
    }}

では、OnSelectRow彼の提案を使用して、jqGrid の すべてのボタンをオフにし、選択した行のボタンをオンにしました。

// disable all resendMsg & cancelMsg buttons in the grid
$(this).find("input[name=resendMsg]").attr("disabled","disabled");
$(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
// now enable the buttons for the current row only
$(tr).find("input[name=resendMsg]").removeAttr("disabled");
$(tr).find("input[name=cancelMsg]").removeAttr("disabled");

また、ページ上の他のドロップダウンを無効にする他のコードもあり、次の 3 つのうちの 1 つだけが発生する可能性があります。

  1. ユーザーは再送信ボタンをクリックできます
  2. ユーザーは [キャンセル] ボタンをクリックできます
  3. ユーザーは jqGrid の別の行をクリックできます

上記の #3 は別のイベントをトリガーするので、ユーザーが選択した行で 何かOnSelectRowをしなければならないようにしたかったのです。

@Olegの提案を使用して、すべてをオフにしてから、選択した行のボタンのみをオンにして、onSelectRowイベント内の各ボタンのクリックイベントコードも配置しました。

$(tr).find("input[name=cancelMsg]").click(function() {
    // disable all resendMsg & cancelMsg buttons in the grid
    $(this).find("input[name=resendMsg]").attr("disabled","disabled");
    $(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
    ....do other stuff .....
    ReloadGrid();
    });
$(tr).find("input[name=resendMsg]").click(function() {
    ReSend(gridRow.Col1, gridRow.Col2);
    // disable all resendMsg & cancelMsg buttons in the grid
    $(this).find("input[name=resendMsg]").attr("disabled","disabled");
    $(this).find("input[name=cancelMsg]").attr("disabled", "disabled");
    .... do other stuff ....
    });
},

グリッドは、私がやりたいことをするようになりました。例えば ​​-

  • グリッドがロードされると、グリッド内のすべての行に msgAct 列があり、その列には [再送信] ボタンと [キャンセル] ボタンがあり、どちらも表示されますがグレー表示されます。
  • 行 #3 が選択されている場合、行 #3 の msgAct の [再送信] ボタンと [キャンセル] ボタンがアクティブになり、クリックできるようになります。グリッド内の他のすべての行には、それらの行のボタンがまだグレー表示されています。
  • ユーザーが [再送信] または [キャンセル] をクリックすると、グリッド内のその行に対して適切なアクションが実行されます。再送信するとグリッドに別の行が追加されますが、キャンセルすると選択がリセットされ、グリッドはロードされたときと同じように表示されます。
  • ユーザーが使用できる唯一のオプションは、[再送信]、[キャンセル] をクリックするか、別の行を選択することです。次に、別の行を選択すると、その行のボタンが有効になり (前に選択したボタンが無効になります)、いずれかをクリックすると、その行の適切なアクションが開始されます。

今の質問は、これを行うためのより良い方法はありますか?

@Oleg の貴重なご協力に感謝します。

4

1 に答える 1