jqgrid编辑并添加表单coontain textareas,可编辑并输入为其添加新行。
如何允许Ctrl + S保存编辑和添加表单,就像点击这些表单中的保存按钮一样?
对于内联编辑,我可以将保存按钮添加到jqgrid工具栏并使用
case 83: $("#grid_savebutton").click(); break;
在body onkeydown事件中,通过Ctrl + S模拟按此按钮
如何通过Ctrl + S保存编辑和添加表单?
更新
我添加了代码
case 83: saveb = $("#TblGrid_" + "grid"+ "_2 #sData");
if (saveb.length > 0 ) {
evt.stopPropagation();
return;
}
$("#grid_savebutton").click();
break;
到body onkeydown处理程序。在第一次编辑表单打开后,此代码始终查找sData按钮,并且不再调用grid_savebutton。即使关闭编辑/添加表单,看起来sData按钮也存在。 如何解决它,以便如果编辑/添加表单未打开,$(“#grid_savebutton”)。执行click()?
UPDATE2
使用了keydown绑定:
jQuery.extend(jQuery.jgrid.edit, {
savekey: [true, 13],
recreateForm: true,
closeOnEscape: true,
reloadAfterSubmit: false,
beforeShowForm: function ($form) {
var gridIdEncoded = $.jgrid.jqID($form[0].id.substring(8));
$("#editmod" + gridIdEncoded).bind( 'keydown', beforeShowFormHandler);
},
onClose: function () {
var gridIdEncoded = 'grid'; // $.jgrid.jqID($form[0].id.substring(8));
$("#editmod" + gridIdEncoded).unbind( 'keydown', beforeShowFormHandler);
}
});
var beforeShowFormHandler = function (e) {
var gridIdEncoded = 'grid';
if (e.ctrlKey && e.which === 83) { // 83 - 's'
$("#TblGrid_" + gridIdEncoded + "_2 #sData").trigger("click");
return false;
}
};
全局keydown绑定:
$(function () {
$("html").keydown(body_onkeydown);
});
function body_onkeydown(evt) {
var saveb;
if (evt.ctrlKey) {
switch (evt.keyCode) {
case 83:
saveb = $("#TblGrid_" + "grid" + "_2 #sData");
// todo: saveb.length > 0 is always true after form is opened first time:
if (saveb.length > 0) return;
$("#grid_savebutton").click(); break;
}
cancel(evt);
return false;
}
}
function cancel(evt) {
evt.returnValue = false;
evt.keyCode = 0;
evt.cancelBubble = true;
evt.preventDefault();
evt.stopPropagation();
}
UPDATE3
TinyMCE html编辑器使用
在afterShowForm事件中附加到textarea元素的表单中 $('.htmleditor', formSelector).attr('cols', '50').attr('rows', '15').tinymce({
theme: "advanced",
language: "et",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_buttons1: "bold,italic,underline,strikethrough,separator,justifyleft,justifycenter," +
"justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,|,cut ,copy,paste,undo,redo" +
"link,unlink,image,cleanup,code,hr,|,removeformat,formatselect,|,fontselect,fontsizeselect," +
"sub,sup,|,forecolor,backcolor,forecolorpicker,backcolorpicker,charmap,visualaid," +
"anchor,blockquote"
});
}
textarea中的Ctrl + S会导致IE9标准保存对话框出现在这种情况下。如何允许Ctrl + S在tinyMCE中保存表单?
答案 0 :(得分:2)
您可以在beforeShowForm内注册其他keydown
事件处理程序。代码可以如下所示:
beforeShowForm: function ($form) {
// $form[0].id is like "FrmGrid_list"
var gridIdEncoded = $.jgrid.jqID($form[0].id.substring(8));
$("#editmod" + gridIdEncoded).keydown(function (e) {
if (e.ctrlKey && e.which === 83) { // 83 - 's'
$("#TblGrid_" + gridIdEncoded + "_2 #sData").trigger("click");
return false; // stop propagation
}
});
}
您可以看到实时演示here。因为我在不设置任何editurl
的情况下使用本地编辑,所以在编辑表单中按 Ctrl + S 时会看到错误消息。这意味着提交将是火灾,但不会成功。
更新:查看the demo。在按 Ctrl + S 时,如果编辑表单已关闭,则显示警告"Ctrl-S in body"
,如果打开编辑表单,则尝试提交表单。这不是你需要的吗?在代码中(见下文),我使用keydown
命名空间中的formEvent
(只是一个免费名称)
$("#list").jqGrid ('navGrid', '#pager',
{add: false, del: false, refresh: true, view: false},
{beforeShowForm: function ($form) {
// $form[0].id is like "FrmGrid_list"
var gridIdEncoded = $.jgrid.jqID($form[0].id.substring(8));
$("#editmod" + gridIdEncoded).bind('keydown.formEvent', function (e) {
if (e.ctrlKey && e.which === 83) { // 83 - 's'
$("#TblGrid_" + gridIdEncoded + "_2 #sData").trigger("click");
return false;
}
});
},
onClose: function (formselector) {
$(formselector).unbind('keydown.formEvent');
}}, {}, {}, {multipleSearch: true, overlay: false});
$("html").keydown(function (e) {
if (e.ctrlKey && e.which === 83) { // 83 - 's'
alert("Ctrl-S in body");
return false;
}
});