easyui datagrid 鍵盤上下控制選中行示例
更新時(shí)間:2014年03月31日 16:41:13 作者:
這篇文章主要介紹了擴(kuò)展datagrid的一個(gè)方法keyCtr實(shí)現(xiàn)鍵盤上下控制選中行,需要的朋友可以參考下
擴(kuò)展datagrid的一個(gè)方法keyCtr
$.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;
}
});
});
}
});
復(fù)制代碼 代碼如下:
$.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;
}
});
});
}
});
您可能感興趣的文章:
- jQuery Easyui學(xué)習(xí)教程之實(shí)現(xiàn)datagrid在沒有數(shù)據(jù)時(shí)顯示相關(guān)提示內(nèi)容
- JQuery EasyUI學(xué)習(xí)教程之datagrid 添加、修改、刪除操作
- jQuery Easyui datagrid/treegrid 清空數(shù)據(jù)
- jQuery Easyui學(xué)習(xí)之datagrid 動(dòng)態(tài)添加、移除editor
- EasyUI中datagrid在ie下reload失敗解決方案
- EasyUi datagrid 實(shí)現(xiàn)表格分頁
- Jquery下EasyUI組件中的DataGrid結(jié)果集清空方法
- JQueryEasyUI datagrid框架的基本使用
- jQuery EasyUI學(xué)習(xí)教程之datagrid點(diǎn)擊列表頭排序
相關(guān)文章
jQuery的實(shí)現(xiàn)原理的模擬代碼 -2 數(shù)據(jù)部分
在 jQuery 中,可以對(duì)每一個(gè) DOM 對(duì)象保存私有的數(shù)據(jù)。2010-08-08
學(xué)習(xí)使用jQuery表單驗(yàn)證插件和日歷插件
這篇文章主要為大家詳細(xì)介紹了jQuery表單驗(yàn)證插件與日歷插件的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02
Yii-自定義刪除確認(rèn)彈框(zyd)jquery實(shí)現(xiàn)代碼
Yii-自定義刪除確認(rèn)彈框(zyd),簡(jiǎn)單/時(shí)尚/大方適合比較愛酷的人使用,時(shí)尚的你可不要錯(cuò)過了哈,希望本文知識(shí)點(diǎn)可以幫助到你2013-03-03
jQuery實(shí)現(xiàn)表格與ckeckbox的全選與單選功能
先給大家介紹下jQuery實(shí)現(xiàn)表格與ckeckbox的全選與單選功能,以及通過js實(shí)現(xiàn)隱藏與顯示銨鈕功能的實(shí)例代碼,需要的朋友參考下吧2016-11-11
運(yùn)用jquery實(shí)現(xiàn)table單雙行不同顯示并能單行選中
(該方法是對(duì)《運(yùn)用jquery實(shí)現(xiàn)(table)單雙行不同顯示并能多行選中》的改進(jìn),適合于單行選擇)2009-07-07
jquery對(duì)Json的各種遍歷方法總結(jié)(必看篇)
下面就為大家?guī)硪黄猨query對(duì)Json的各種遍歷方法總結(jié)(必看篇)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
jQuery EasyUI常用數(shù)據(jù)驗(yàn)證匯總
這篇文章主要為大家詳細(xì)匯總了jQuery EasyUI常用數(shù)據(jù)驗(yàn)證,介紹了validatebox()提供的自定義驗(yàn)證,感興趣的小伙伴們可以參考一下2016-09-09

