javascript 如何向 JqGrid 添加/编辑表单添加自定义按钮?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/10320523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add custom buttons to JqGrid add/edit forms?
提问by pundit
Is it possible to add custom buttons to a JqGrid add/edit form?
是否可以将自定义按钮添加到 JqGrid 添加/编辑表单?
Instead of just submit and cancel, I wanted to have a button that says "Save and New", one that says "Save and Close", and one that says "Cancel".
我不只是提交和取消,我想要一个按钮,显示“保存并新建”,一个显示“保存并关闭”,一个显示“取消”。
Is it possible to achieve this?
有可能实现这一目标吗?
回答by Oleg
jqGrid has some CSS classes which will be used for buttons. You can add new button inside of beforeShowFormcallback for example:
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");
}
});
See the demo:
看演示:
回答by broguyman
You may be able to add the button by inserting an ClientSideEvents-AfterAddDialogShown="AddButton"
您可以通过插入 ClientSideEvents-AfterAddDialogShown="AddButton" 来添加按钮
Then your function AddButton can insert your button html into the table of the Add Dialog Box.
然后您的函数 AddButton 可以将您的按钮 html 插入到添加对话框的表格中。
回答by ymakux
To add button that clears all input element within modal window:
添加清除模态窗口中所有输入元素的按钮:
$.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");
}
});