如何在jqgrid中按ctrl+s保存添加和编辑表单
How to save in add and edit forms by pressing ctrl+s in jqgrid
jqgrid编辑和添加表单包含文本区域,可以编辑和输入添加新的行。
如何允许Ctrl+S保存编辑和添加表单,就像在这些表单中单击保存按钮一样?
对于内联编辑,我可以将Save按钮添加到jqgrid工具栏并使用
case 83: $("#grid_savebutton").click(); break;
在主体onkeydown事件中模拟用Ctrl+S按下此按钮
如何通过Ctrl+S保存编辑和添加表单?
添加代码
case 83: saveb = $("#TblGrid_" + "grid"+ "_2 #sData");
if (saveb.length > 0 ) {
evt.stopPropagation();
return;
}
$("#grid_savebutton").click();
break;
到主体onkeydown处理程序。在第一次编辑表单打开后,这段代码总是发现sData按钮存在,并且不再调用grid_savebutton。它看起来像sData按钮存在,即使编辑/添加表单关闭。如何修复它,以便如果编辑/添加表单不打开,$("#grid_savebutton").click()被执行?
更新2
使用的按键绑定:
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事件中用
附加到form中的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也?
您可以在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
}
});
}
你可以在这里看到现场演示。因为我使用本地编辑而不设置任何editurl
,所以在编辑表单中按Ctrl + S时会看到错误消息。这意味着提交会失败,但不会成功。
UPDATED:看这个演示。在按Ctrl + S时,如果编辑表单关闭,则显示警告"Ctrl-S in body"
,如果编辑表单打开,则尝试提交表单。这不是你需要的吗?在代码中(见下文),我使用formEvent
名称空间中的keydown
(只是一个自由名称)
$("#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;
}
});
- 如何允许用户添加/编辑spry小部件
- TinyMCE:如何手动显示添加/编辑链接窗口
- 如何在拉斐尔中操作线条以在线条上添加/编辑点
- 使用 Plone 添加/编辑弹出窗口
- 如何使用自定义帖子清除jqGrid添加/编辑表单
- 在 1 页而不是 2 页中添加编辑功能
- Lightbox2:如何在“lb-prev”和“lb-next”分区之间添加“编辑”
- 如何在 Angular 的同一页面上添加/编辑
- 用于添加编辑视图的单个html文件或多个文件
- 如何在jQgrid中隐藏列,但在“添加/编辑”面板中显示此列
- 添加编辑按钮和删除按钮
- 添加/编辑Javascript程序来计算最小,最大,总和平均数组元素
- 添加-编辑-删除按钮不工作
- 是否有默认方式向引导表单中的每个输入文本字段添加编辑按钮?
- 检查数据集是否被更改(添加/编辑,删除记录)的最佳解决方案是什么?
- 添加编辑器到Wordpress主题页面
- 如何使用javascript/jquery在每一行添加编辑和删除按钮
- 如何添加/编辑对话框表单的修改内容到调用元素
- 在jqGrid中自定义“添加/编辑”对话框
- 使用 jQuery .append 添加“编辑”按钮