如何在jqgrid中按ct​​rl键保存添加和编辑表单

发布于 2024-12-11 07:54:03 字数 3337 浏览 0 评论 0原文

jqgrid编辑和添加表单包含可以编辑和输入的文本区域,向其中添加新行。

如何让Ctrl+S保存编辑和添加表单,就像单击这些表单中的保存按钮一样?

对于内联编辑,我能够将“保存”按钮添加到 jqgrid 工具栏,并使用

    case 83: $("#grid_savebutton").click(); break;

“体内 onkeydown 事件”来模拟通过 Ctrl+S 按下该按钮

如何允许通过 Ctrl+S 在编辑中保存并添加表单?

更新

我向正文 onkeydown 处理程序添加了代码

        case 83: saveb = $("#TblGrid_" + "grid"+ "_2 #sData");
            if (saveb.length > 0 ) {
                   evt.stopPropagation();
                   return;
                  }
            $("#grid_savebutton").click(); 
            break;

。第一次编辑表单打开后,此代码始终发现 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 事件中使用 Ctrl+S 在文本区域中附加到表单中的文本区域元素

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

,导致 IE9 标准保存对话框出现在这种情况下。如何让 Ctrl+S 在tinyMCE中也保存表单?

jqgrid edit and add forms coontain textareas which can edited and enter adds new line to them.

How to allow Ctrl+S to save edit and add forms, just like clicking to save button in those forms ?

For inline edit I was able to add Save button to jqgrid toolbar and use

    case 83: $("#grid_savebutton").click(); break;

In body onkeydown event to simulate pressing to this button by Ctrl+S

How to allow also to save in edit and add forms by Ctrl+S ?

Update

I added code

        case 83: saveb = $("#TblGrid_" + "grid"+ "_2 #sData");
            if (saveb.length > 0 ) {
                   evt.stopPropagation();
                   return;
                  }
            $("#grid_savebutton").click(); 
            break;

to body onkeydown handler. After first edit form open this code finds always that sData button exists and goes not invoke grid_savebutton anymore. It looks like sData button exists even if edit/add form is closed.
How to fix it so that if edit/add form is not open, $("#grid_savebutton").click() is executed ?

Update2

keydown bindings used:

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

global keydown binding:

$(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 editor is attached to textarea elemnts in form in afterShowForm event using

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

Ctrl+S in textarea causes IE9 standard save dialog to appear in this case. How to allow Ctrl+S to save form in tinyMCE also ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

放低过去 2024-12-18 07:54:03

您可以在 在ShowForm 之前。代码可以如下所示:

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 时您会看到一条错误消息。意思是提交会火,但不成功。

更新:查看演示。按 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;
    }
});

You can register an additional keydown event handler inside of beforeShowForm. The code can be like the following:

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

You can see live demo here. Because I use local editing without setting any editurl you see an error message on pressing Ctrl + S in the edit form. It means that submiting will be fire, but not successful.

UPDATED: Look at the demo. On pressing Ctrl + S it displays alert "Ctrl-S in body" if the edit form is close and try to submit the form if the edit form is opened. Is it not what you need? In the code (see below) I used keydown from the formEvent namespace (just a free name)

$("#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;
    }
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文