如何向JqGrid添加/编辑表单添加自定义按钮?

时间:2012-04-25 17:11:34

标签: javascript jquery jqgrid

是否可以将自定义按钮添加到JqGrid添加/编辑表单?

我不想只提交和取消,而是想要一个“Save and New”按钮,一个显示“Save and Close”的按钮,另一个显示“Cancel”的按钮。

有可能实现这个目标吗?

3 个答案:

答案 0 :(得分:8)

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");
    }
});

请参阅the demo

enter image description here

答案 1 :(得分:0)

您可以通过插入ClientSideEvents-AfterAddDialogShown =“AddButton”来添加按钮

然后你的函数AddButton可以将你的按钮html插入到Add对话框的表中。

答案 2 :(得分:0)

添加清除模态窗口中所有输入元素的按钮:

$.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");
    }
});