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

关注

转载最新推荐文章于 2026-04-23 10:58:57 发布 2.7k 阅读 AI 写同款· GEO 优化 ›

EasyUI实战：构建智能动态右键菜单，提升DataGrid与Tree交互体验上下文菜单（Context Menu）是现代Web应用交互设计的核心组件之一，它基于用户当前的操作对象（如数据行、树节点）动态提供相关功能选项，遵循“所见即所得”的交互原理。这种设计模式能显著提升操作效率和用户体验，是桌面应用向Web端迁移时的重要交互基石。在技术实现上，通过事件绑定、动态内容生成和精确定位，上下文菜单将通用操作与特定上下文紧密结合，其技术价值在于减少用户认知负荷，实现精准、流畅的操作闭环。在诸如后台管理系统、数据看板等涉及复杂数据操作（如DataGrid表格行编辑、Tree节点管理）的应用阅读详情

转载自：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");