javascript - カスタムボタンをJqGridの追加/編集フォームに追加するには?

Question

JqG​​rid の追加/編集フォームにカスタム ボタンを追加することは可能ですか?

送信してキャンセルするだけでなく、「保存して新規」、「保存して閉じる」、「キャンセル」というボタンが必要でした。

これを達成することは可能ですか？

Answer 1

jqGrid には、ボタンに使用されるいくつかの CSS クラスがあります。たとえば、 beforeShowFormコールバック内に新しいボタンを追加できます。

$.extend($.jgrid.edit, {
    bSubmit: "Save and Close",
    bCancel: "Cancel",
    width: 370,
    recreateForm: true,
    beforeShowForm: function () {
        $('<a href="#">Save and New<span class="ui-icon ui-icon-disk"></span></a>')
            .click(function() {
                alert("click!");
            }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
              .prependTo("#Act_Buttons>td.EditButton");
    }
});

デモを見る：

Answer 2

ClientSideEvents-AfterAddDialogShown="AddButton" を挿入することで、ボタンを追加できる場合があります。

次に、関数 AddButton は、ボタン html を [追加] ダイアログ ボックスのテーブルに挿入できます。

Answer 3

モーダル ウィンドウ内のすべての入力要素をクリアするボタンを追加するには:

$.extend($.jgrid.edit, {
    bSubmit: "Save and Close",
    bCancel: "Cancel",
    width: 370,
    recreateForm: true,
    beforeShowForm: function () {
        $('<a href="#">Clear<span class="ui-icon ui-icon-document-b"></span></a>')
            .click(function() {
              $(".ui-jqdialog input").val("");    
            }).addClass("fm-button ui-state-default ui-corner-all fm-button-icon-left")
              .prependTo("#Act_Buttons>td.EditButton");
    }
});