实现表格中上下键选中效果
var keyIndex = null;//上下键选择时的索引
var listInfo = {
params: {
......省略........
onClickRow: function(row,$element) {
var index=$($element).attr('data-index');
$('#curIndex').text(Number(index)+1);
keyIndex = index;//给上下键的index赋值,
},
........省略........
$(document).keyup(function(e){
var list1Data = $('#listInfo').bootstrapTable('getData');
var list1length = list1Data.length;
switch(e.keyCode) {
case 38: //up
keyIndex--;
if (keyIndex == 0) keyIndex = 0; //到顶了
//有效高度,选中位置
var vilidHeight = $("#listInfo").parent().height();
var totalHeight = $("#listInfo").height();
var theadHeight = $("#listInfo").find("thead").height();
var realHeight = vilidHeight - theadHeight;
var trs = $("#listInfo").find("tbody").children();
var trHeights = 0;
for(var j = 0; j < keyIndex; j++) {
trHeights += $(trs[j]).height();
}
if(trHeights >= 0 && trHeights < realHeight / 2) {
$("#listInfo").parent().scrollTop(0);
} else if(trHeights >= realHeight / 2 && trHeights <= totalHeight - realHeight / 2) {
$("#listInfo").parent().scrollTop(trHeights - realHeight / 2);
}
break;
case 40: //down
keyIndex++;
if (keyIndex == list1length -1) keyIndex=list1length-1; //到底了
//有效高度,选中位置
var vilidHeight = $("#listInfo").parent().height();
var totalHeight = $("#listInfo").height();
var theadHeight = $("#listInfo").find("thead").height();
var realHeight = vilidHeight - theadHeight;
var trs = $("#listInfo").find("tbody").children();
var trHeights = 0;
for(var j = 0; j < keyIndex; j++) {
trHeights += $(trs[j]).height();
}
if(trHeights > realHeight / 2 && trHeights <= totalHeight - realHeight / 2) {
$("#listInfo").parent().scrollTop(trHeights - realHeight / 2);
} else if(trHeights > totalHeight - realHeight / 2) {
$("#listInfo").parent().scrollTop(totalHeight - realHeight);
}
break;
}
var keyRow = {};
keyRow = list1Data[keyIndex];
initRightTable(keyRow);
$('#curIndex').text(Number(keyIndex)+1);
var unselectTr = $("#listInfo tbody tr");
unselectTr.removeClass("trSuccess tableSelected");
unselectTr.css("background-color", "#fff !important");
var selectTr = $("#listInfo tbody tr[data-index="+ keyIndex+ "]");
selectTr.css("background", "#e8e7e7");
});