easyui datagrid 键盘上下控制选中行

$.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;
                }
            });
        });
    }
});

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

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

  

时间: 2024-10-05 05:58:39

easyui datagrid 键盘上下控制选中行的相关文章

DOJO dataGrid 单击单元格选中行

onCellClick: lang.hitch(this, function(event){ //单元格单击事件 var grid = dijit.byId("__geodisa_grid"); var rowIndex = event.rowIndex; //如果已有选择的行则取消改行选中状态 if (grid.selection.selectedIndex >= 0) { grid.selection.setSelected(grid.selection.selectedIn

WPF DataGrid ListView 等等 改变 选中行 颜色;以及 不变的原因

WPF中改变选中行的颜色是很简单的,就是用触发器:比如:以DataGrid为例: DataGrid.RowStyle Style TargetType= DataGridRow SetterProperty= Background Value= White / Style .Triggers TriggerProperty= IsMouseOver Value= True SetterProperty= Background Value= LightGray / /Trigger Trigger

解决easyui datagrid单选时复选框不取消问题

1 var flag = true: //定义一个开关变量控制 2 $("#table").datagrid({ 3 pagination: true,//允许分页 4 rownumbers: true,//行号 5 singleSelect: false,//只选择一行 6 pageSize: 20,//每一页数据数量 7 width:"100%", 8 checkOnSelect: false, //此属性必须设置为 false10 pageList: [10,

easyui datagrid 通过复选框删除新追加的数据问题

之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返回的总是错误的,各种查找后,网上说是配置了idField的缘故,要么就不配这个属性,要么就配置正确的:如此想到,自己在追加行时是没有ID的,只有保存后才会将ID填上去,我便把那个属性去掉了,测试OK

easyui datagrid行中点击a标签链接,行被选中,但是获取不到对应的参数

easyui中使用比较多的就是datagrid了,表格中添加连接,点击跳转,为比较常用的方式;往往在点及标签后调用getSeleted方法会失效; 一.初始代码: {field: 'id',title : '操作',align: 'center',width:'10%', formatter:function(value,row){ return  "<a onclick='show()' > 查看 </a>"; } }, function show(){ va

easyui datagrid 自定义加载按钮实例

今天写一个项目,在用到datagrid的时候突然发现加载操作列中的自定义按钮出来问题,经过一番研究,原来这么简单.话不多说,上图 //获取选中行审核 function Checker(indexDiv) { $('#grid').datagrid('selectRow',indexDiv);//获取选中行 var rows = $('#grid').datagrid('getSelected');//获取选中行数据 ShowDiv(); //调用事件 $('#UserTd').html(rows

【EasyUi DataGrid】批量删除

DataGrid是我们做网页经常使用到的组件之中的一个,对它的操作也无非是增删改查操作.单条数据的增删改相对来说比較简单.添加.改动能够直接在DataGrid中进行,也能够用弹出框的形式把数据装载在文本框等各种控件中呈现给用户,让用户自己主动填写或改动.删除的事稍后再说.个人觉得"查"是最难的.由于它涉及到了表格的各种载入问题等等.假设你觉得这是危言耸听.那就我的期待兴许博客吧! 不知道上边在说什么的能够忽略不计.接下来进行正文部分.这次的DataGrid分三部分来写:批量删除.批量改

easyui datagrid 列显示和隐藏

//当查询IT基础设施的时候隐藏'STAFF_ID'.'ITSM_STAFF_ID' if($("input[name='currentstate']").val()==2){ $('#ordertable').datagrid('hideColumn','STAFF_ID'); $('#ordertable').datagrid('hideColumn','ITSM_STAFF_ID'); }else{ $('#ordertable').datagrid('showColumn','

easyui的datagrid获取选中行

注意设置idfield="id",这里的id要和下面field的id保持一致,而且要保证唯一性. easyui的datagrid获取选中行,布布扣,bubuko.com