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

扩展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单选才有效)