如何将自定义按钮添加到 JqGrid 添加/编辑表单？答案

【问题标题】：How to add custom buttons to JqGrid add/edit forms?如何将自定义按钮添加到 JqGrid 添加/编辑表单？
【发布时间】：2012-04-25 17:11:33
【问题描述】：

是否可以在 JqGrid 添加/编辑表单中添加自定义按钮？

我想要一个显示“保存并新建”的按钮，一个显示“保存并关闭”的按钮，以及一个显示“取消”的按钮，而不仅仅是提交和取消。

有可能实现吗？

【问题讨论】：

你在使用 trirand JQGrid 吗？如果是这样，我可以帮助你。让我知道，我会发布答案。我不确定这是否同样适用于其他 JQGrid 插件。
是的，我正在使用 trirand。

标签： javascript jquery jqgrid

【解决方案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");
    }
});

见the demo:

【讨论】：

在保存和关闭功能方面，是否需要包含 closeAfterEdit 来保存和关闭？我如何获得存档和新功能？
@pundit：抱歉，我不明白您在“保存并新建”和“保存并关闭”下需要什么功能。我将您的问题理解为“如何将自定义按钮添加到 JqGrid 添加/编辑表单？”。点击按钮的作用你可以自己定义。
我确定您是否能够在这里为我提供帮助。但是有没有办法使用 JqGrid 传递额外的数据？
@pundit：我只能重复一遍，我不明白你想要实现什么。如果您向我详细解释您需要什么，您希望“传递”哪些“附加数据”，我可以尝试帮助您。 “保存和新功能”是什么意思？
@pundit：您可以使用例如jQuery.serializeArray() 而不是jQuery.serialize。或者，您可以在 $('#FrmGrid_list2').serialize() 后面附加更多信息。例如$('#FrmGrid_list2').serialize() + "&" + $.param({id: myid})。在the answer 中可以找到显示如何获取行ID 的代码片段。方式内部使用jqGrid。

【解决方案2】：

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

然后你的函数AddButton可以将你的按钮html插入到Add Dialog Box的表格中。

【讨论】：

【解决方案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");
    }
});

【讨论】：