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

来源：互联网发布：python redis单例模式编辑：程序博客网时间：2024/05/16 14:26

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

0 0