easyui datagrid表格可以通过键盘上下箭头键来选择行

最新推荐文章于 2023-04-15 11:13:20 发布

转载最新推荐文章于 2023-04-15 11:13:20 发布 · 2.6k 阅读

本文介绍了一种使用jQuery扩展Datagrid组件的方法，实现通过键盘上下箭头进行行选中的功能。该方法首先定义了一个名为keyCtr的新方法，并通过$.extend()将其添加到datagrid的方法集合中。当用户按下上箭头键时，如果已选中某行，则选择上一行；如果没有选中任何行，则默认选择最后一行。当按下下箭头键时，逻辑相反。

转载自：http://blog.youkuaiyun.com/zhpengfei0915/article/details/37562229

$.extend($.fn.datagrid.methods, {
    keyCtr : function (jq) {
        return jq.each(function () {
            var grid = $(this);
            grid.datagrid('getPanel').panel('panel').attr('tabindex', 1).bind('keydown', function (e) {
                switch (e.keyCode) {
                case 38: // up
                    var selected = grid.datagrid('getSelected');
                    if (selected) {
                        var index = grid.datagrid('getRowIndex', selected);
                        grid.datagrid('selectRow', index - 1);
                    } else {
                        var rows = grid.datagrid('getRows');
                        grid.datagrid('selectRow', rows.length - 1);
                    }
                    break;
                case 40: // down
                    var selected = grid.datagrid('getSelected');
                    if (selected) {
                        var index = grid.datagrid('getRowIndex', selected);
                        grid.datagrid('selectRow', index + 1);
                    } else {
                        grid.datagrid('selectRow', 0);
                    }
                    break;
                }
            });
        });
    }
});
$("#id").datagrid({}).datagrid("keyCtr");