JQuery EasyUI datagrid 键盘上下控制选中行

作者:aa1049372051

扩展datagrid的一个方法keyCtr


<script>
    var isbind=false;
    $.extend($.fn.datagrid.methods, {
    keyCtr : function (jq) {
        return jq.each(function () {
            var grid = $(this);
            if(!isbind)
            {
                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;
                    }
                });
                isbind=true;
        }
        });
    }
});
</script>


使用方法:在datagrid实例化之后调用这个方法。

$("#goods_list").datagrid({}).datagrid("keyCtr");

或者在datagrid  onLoadSuccess方法中调用

$('#goods_list').datagrid({ 
         onLoadSuccess:function(){
            //默认选中第一行
            $('#goods_list').datagrid('selectRow',0); 
            $('#goods_list').datagrid('keyCtr');
            //var s= $("#goods_list").datagrid('getPanel');
            //s.find('div.datagrid-cell-rownumber :first').click();
         }
    });


在上面扩展的keyctr方法中还可以加入其他的方法,如回车删除,大家可以试试(对了,记得上面写的方法只是对datagrid单选才有效)

发表评论

2个评论

  • z15732621582

    很好的思路方法,感谢分享

    2016-08-23 14:59:10回复

  • u013047005

    很好地解决方案,感谢分享,希望可以帮助到更多的朋友哦

    2016-07-30 23:19:40回复

我要留言×

技术领域:

我要留言×

留言成功,我们将在审核后加至投票列表中!

提示x

jQuery知识库已成功保存至我的图谱现在你可以用它来管理自己的知识内容了

删除图谱提示×

你保存在该图谱下的知识内容也会被删除,建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗?

删除节点提示×

无法删除该知识节点,因该节点下仍保存有相关知识内容!

删除节点提示×

你确定要删除该知识节点吗?