个人中心
gpt4 book ai didi

jquery - 如何将 "keydown"事件绑定(bind)到 jqgrid 单元格？

转载 作者：行者123 更新时间：2023-12-01 06:27:18 31 4
gpt4 key购买 nike

问题:

我可以将“keydown”事件绑定(bind)到 jqgrid 单元格吗？

(帖子/问题的最终目的是解决可访问性问题。)

问题描述:

场景:

用户使用箭头键遍历网格的单元格，然后停在特定的单元格上。
注意:他可以在 jqgrid 单元格之间使用“箭头键”导航，因为 jqgrid“cellEdit”参数设置为 true(即 cellEdit: true )。他现在按下<enter>按他所停留的单元格。

我想要的是捕获结果 <enter> jqgrid 单元格上的 keydown/keyup 事件，并用它做一些事情。

--到目前为止，我的尝试尚未成功。

FWIW - 产生我帖子的原始问题:如果碰巧有 <button>在用户决定停止的单元格内(即，当他们使用箭头键导航网格时)，如果用户随后在该单元格/按钮上按下该键，则不会发生任何事情。

(注意:我已经知道，如果您碰巧 <tab> 到 <button> 单元格，您会看到该按钮已获得焦点，您可以按 <enter> 键来单击它。但是，随后<enter>打印机无法工作。)

-因此，我决定作为一种解决方法，如果我至少可以捕获 keydown 事件，那么我也许能够在按钮上触发单击事件 - 以实现我所需要的。

感谢您的帮助!

(并且，如果我需要进一步澄清或提供其他信息，请告诉我)

目前，我的 jqgrid 列模型定义如下:

    -
    -
    -
    colNames: ['', 'city', 'postal code', 'VIEW'],
    colModel: [
        {name: 'id', label: "id", index: 'id', width: 100, hidden: true},
        {
            name: 'cityName', 
            label: "cityName", 
            index: 'cityName', 
            width: 100, 
            sortable: true,
            cellattr: function(){return 'tabindex="0"'}
        },
        {
            name: 'postalCode', 
            label: "postalCode", 
            index: 'postalCode', 
            width: 100, 
            sortable: true,
            cellattr: function(){return 'tabindex="0"'}
        },
        {
            name: 'view', 
            label: 'view', 
            index: 'view', 
            width: 100, 
            fixed: true,                          
            formatter: function() { return "<button tabindex='0' class='cellbtn' type='button'>View</button>";}
        }
    ],
    -
    -
    -
<小时/>

enter image description here

<小时/>

完整的“独立” html 示例页面

(即，您应该能够保存到 HTML 文件并运行它)***

注意:有人建议我尝试“editOptions”/“dataEvents”参数解决方案(使用列模型捕获 keypress/keydown/keyup 事件)。目前，我已经注释掉了用于尝试此解决方案的代码，因为它不起作用。

本质上，提供此页面的目的是提供有关使用“箭头”键导航的说明。如果运行该页面，则可以单击一个单元格，然后使用箭头键进行导航。尝试停在“按钮”单元格上并按 <enter> key... --你现在会发现什么也没有发生。

另一个更新:

我对“loadComplete”函数做了轻微修改 - 现在，通过<enter>单击该按钮后将保持焦点。 key 。 (再次感谢奥列格)

<小时/> 
    <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>cellbutton click test</title>

            <!-- Import jQuery UI and jqGrid UI -->
            <link href="http://code.jquery.com/ui/1.8.13/themes/base/jquery-ui.css" rel="stylesheet" media="screen" type="text/css" />
            <link href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet" type="text/css" />

            <!-- Import jQuery jqGrid JS files -->
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.js"></script>
            <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
            <script type="text/javascript" src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.src.js"></script>

            <script type="text/javascript">
                $(function () {
                    //...data for table
                    var localdata = [
                            {id: "1", cityName: "springfield", postalCode: "11111"},
                            {id: "2", cityName: "new york", postalCode: "22222"},
                            {id: "3", cityName: "huntington", postalCode: "33333"}
                        ];

                    $("#testgrid").jqGrid({
                        datatype: "local",
                        data: localdata,
                        cellsubmit: 'clientArray',
                        cellEdit: true,
                        colNames: ['', 'city', 'postal code', 'VIEW'],
                        colModel: [
                            {name: 'id', label: "id", index: 'id', width: 100, hidden: true},
                            {
                                name: 'cityName', 
                                width: 100, 
                                //editable: true,
                                cellattr: function(){return 'tabindex="0"'}
                            },
                            {
                                name: 'postalCode', 
                                width: 100, 
                                //editable: true,
                                cellattr: function(){return 'tabindex="0"'}
                            },
                            {
                                name: 'view', 
                                width: 100, 
                                fixed: true,                        
                                formatter: function() { return "<button tabindex='0' class='cellbtn' type='button'>View</button>";}
                            }
                        ],
                        rowNum: 10,
                        rowList: [10, 20, 30],
                        pager: '#pager',
                        sortname: 'id',
                        //viewrecords: true,
                        height: "auto",
                        sortorder: "desc",
                        caption: "test",
                        rownumbers: true,
                        //loadonce: true, //otherwise, sort will reload data from server (i.e., erasing any client-side input that has not yet been posted)...
                        loadComplete: function() {
                            $("th[id^='testgrid_']").attr("tabindex", "0");

                            $(this).find("button.cellbtn").click(function (e) {
                                var rowid = $(this).closest("tr.jqgrow").attr("id");
                                $("<span>View button are clicked. The rowid=" + rowid +
                                  "<br/></span>").appendTo("#log");
                                setTimeout(function () 
                                {                                   
                                    $(e.target).focus();
                                }, 50);                           
                            });                     
                        },
                        afterEditCell: function (rowid) 
                        {
                            var $editControl = $("#" + rowid).find("input, select, textarea");
                            var events = $._data($editControl[0], "events"); // old jQuery: $editControl.data("events")
                            var originalKeydown;

                            if (events && events.keydown && events.keydown.length === 1) 
                            {
                                originalKeydown = events.keydown[0].handler; // save old

                                $editControl.unbind("keydown");
                                $editControl.bind("keydown", function (e) 
                                {
                                    var $viewButton;
                                    // we can do something before jqGrid process "keydown" event
                                    if (e.keyCode === 13 && e.target.id.split("_")[1] === "postalCode") 
                                    {
                                        $("<span>Enter are pressed(A)<br/></span>").appendTo("#log");
                                        setTimeout(function () 
                                        {
                                            $viewButton = $(e.target).closest("td").next("td").find("button.cellbtn");                                  
                                            $viewButton.focus();
                                        }, 50);                                 
                                    } 
                                    else 
                                    if (e.keyCode === 9 && e.target.id.split("_")[1] === "postalCode") 
                                    {
                                        $viewButton = $(e.target).closest("td").next("td").find("button.cellbtn");
                                    }
                                    originalKeydown.call(this, e);
                                    // we can do something after jqGrid process "keydown" event
                                    if (e.keyCode === 9 && $viewButton !== undefined) 
                                    {
                                        $("<span>Tab are pressed so that View button has focus.<br/></span>").appendTo("#log");
                                        setTimeout(function () 
                                        {
                                            $viewButton.focus();
                                        }, 50);
                                    }
                                });
                            }
                        }
                    });
                    $("#pager_left").hide();
                });            
            </script>
        </head>
        <body>
            <form id="form1">
                <div tabindex="0" id="gridx" class="editFormTable">
                    <table tabindex="0" id="testgrid"></table>
                    <div tabindex="0" id="pager" ></div>
                    <div id="log"></div>
                </div>
            </form>
        </body>
    </html>

最佳答案

如果我正确理解你的问题，你想在 jqGrid 处理Enter键之前或之后在单元格编辑期间按下一些操作。 jqGrid 没有任何可以直接用于此目的的回调。不过，您可以使用 jQuery 事件的“子类化”相对轻松地解决问题。

首先你可以查看jqGrid的源码，找到the line绑定(bind) keydown任何 <input> 的事件处理程序, <select>或<textarea> <td> 中的子元素细胞。 之后(参见 the lines )回调 afterEditCell和事件jqGridAfterEditCell将被调用。所以在 afterEditCell 里面例如回调，您可以检查绑定(bind)到 <input> 的事件句柄, <select>或<textarea>处理keydown事件。您可以保存绑定(bind)到 jqGrid 事件句柄的原始句柄，取消绑定(bind)并将其替换为您自己的回调。在事件句柄内部，您可以调用 jqGrid 的原始句柄，但您可以有条件地执行此操作，并且可以在 jqGrid 处理之前或之后添加一些操作 keydown事件。相应的代码您可以在 the demo 中找到。它使用以下afterEditCell :

afterEditCell: function (rowid) {
    var $editControl = $("#" + rowid).find("input, select, textarea"),
        events = $._data($editControl[0], "events"),
                 // old jQuery: $editControl.data("events")
        originalKeydown;

    if (events && events.keydown && events.keydown.length === 1) {
        originalKeydown = events.keydown[0].handler; // save old

        $editControl.unbind("keydown");
        $editControl.bind("keydown", function (e) {
            // we can do something before jqGrid process "keydown" event
            if (e.keyCode === 13) {
                $("<span>Enter are pressed.<br/></span>").appendTo("#log");
            }
            originalKeydown.call(this, e);
            // we can do something after jqGrid process "keydown" event
        });
    }
}

更新:我仍然不确定我是否正确理解您的要求，但我想您需要在用户在“之前的字段中按下 Tab”时执行一些操作查看”按钮(在postalCode列中按下Tab)。您可以将焦点设置在“查看”按钮上，如果用户按 Enter，则 click将触发“查看”按钮的处理程序。我认为这就是您尝试实现的。

The demo表现出这样的行为。它使用以下代码:

$("#testgrid").jqGrid({
    ...
    loadComplete: function() {
        ...
        $(this).find("button.cellbtn").click(function () {
            var rowid = $(this).closest("tr.jqgrow").attr("id");
            $("<span>View button are clicked. The rowid=" + rowid +
              "<br/></span>").appendTo("#log");
        });
    },
    afterEditCell: function (rowid) {
        var $editControl = $("#" + rowid).find("input, select, textarea"),
            events = $._data($editControl[0], "events"), // old jQuery: $editControl.data("events")
            originalKeydown;

        if (events && events.keydown && events.keydown.length === 1) {
            originalKeydown = events.keydown[0].handler; // save old

            $editControl.unbind("keydown");
            $editControl.bind("keydown", function (e) {
                var $viewButton;
                // we can do something before jqGrid process "keydown" event
                if (e.keyCode === 13) {
                    $("<span>Enter are pressed.<br/></span>").appendTo("#log");
                } else if (e.keyCode === 9 && e.target.id.split("_")[1] === "postalCode") {
                    $viewButton = $(e.target).closest("td").next("td").find("button.cellbtn");
                }
                originalKeydown.call(this, e);
                // we can do something after jqGrid process "keydown" event
                if (e.keyCode === 9 && $viewButton !== undefined) {
                    $("<span>Tab are pressed so that View button has focus.<br/></span>").appendTo("#log");
                    setTimeout(function () {
                        $viewButton.focus();
                    }, 50);
                }
            });
        }
    }
});

第二行的编辑结果，在postalCode中按Tab列，然后按“查看”按钮上的 Enter 如下图所示

enter image description here

关于jquery - 如何将 "keydown"事件绑定(bind)到 jqgrid 单元格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18364772/

31 4 0
文章推荐： spring-mvc - 重命名 Spring MVC 模型属性的嵌套属性
文章推荐： bash - 如何将 GNU 与 find -exec 并行使用？
文章推荐： python - 执行 pandas.merge() 时系统卡住
文章推荐： json - 将 jdbctemplate 结果转换为 json 的最有效方法？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com