1、checkboxCarppFormatter函数
<table id="carpassTable" data-pagination="true" data-height="588"
data-side-pagination="server"
data-page-size="10" data-mobile-responsive="true"
data-striped="true" data-page-list="[10, 15, 25, 50]">
<thead>
<tr>
<th data-checkbox="true" data-formatter="checkboxCarppFormatter"
data-align="center"></th>
<th data-field="id" data-visible="false" data-align="center">ID</th>
<th data-field="PlateNo" data-align="center">车牌号</th>
<th data-field="Pictures" data-align="center" data-formatter="imgPictureesFormatter">车牌图片</th>
<th data-field="TollgateName" data-formatter="tollgateNameFormatter"
data-align="center">卡口名称</th>
<th data-field="LaneNo" data-align="center">车道</th>
<th data-field="PlateColor" data-align="center"
data-formatter="plateColorFormatter">号牌颜色</th>
<!-- PlateColorType -->
<th data-field="VehicleColor" data-align="center"
data-formatter="vehicleColorFormatter">车身颜色</th>
<th data-field="IllegalCode" data-align="center"
data-formatter="illegalCodeTypeFormatter">类型</th>
<th data-field="PassTime" data-align="center" >过车时间</th>
<th data-align="center" data-formatter="operateFormatter" data-events="operateEvents">操作</th>
</tr>
</thead>
</table>
/**
* 默认选中第一条数据
*/
function checkboxCarppFormatter(row, value, index){
if(index==0){
$("#images").attr("src", "");
$('#zoom1').attr('href',"");
assignment();
$("#showPicUlId").children("li").remove();
//获取选中的数据
$("#images").attr("src", "img/timg1.gif");
$('#zoom1').attr('href',"img/timg1.gif");
onSelectedRowChanged(value);
carArr = [];
carArr.push(value);
if(carArr.length>0){
$("#imgUpload").removeAttr("disabled");
}else{
$("#imgUpload").attr('disabled',true);
}
return {
checked : true//设置选中
};
}
return value;
}
2、引入键盘事件
$(document).keydown(function(event){
//console.log("===="+event.keyCode);
// 兼容FF和IE和Opera
var theEvent = event || window.event;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
console.log("keyCode:"+code);
switch(code){
case 37: //左
key37("prevPage");
break;
case 38: //上
key38("upper");
break;
case 39: //右
key39("nextPage");
break;
case 40: //下
key40("lower");
break;
case 13: //回车
key13();
break;
case 27: //exc
key27();
break;
}
return true;
});
3、执行键盘操作事件
function key37(type){
keyboardPaging("prevPage");
};
function key38(type){
keyboardCheck("upper");
};
function key39(type){
keyboardPaging("nextPage");
};
function key40(type){
keyboardCheck("lower");
};
function key13(){
keyEnter();
};
/**
* 键盘选择数据
* @param type upper上 lower 下
* @returns
*/
function keyboardCheck(type){
var arrselections = $("#carpassTable").bootstrapTable('getSelections');
var data = $("#carpassTable").bootstrapTable('getData');
if(arrselections.length==1){
for(var j = 0; j < data.length; j++){
if(data[j].Id == arrselections[0].Id){
if(type=="upper"){
if(j>0){
$("#images").attr("src", "img/timg1.gif");
$('#zoom1').attr('href',"img/timg1.gif");
$("#carpassTable").bootstrapTable('uncheckBy', {field: 'Id', values: [arrselections[0].Id]})
$("#carpassTable").bootstrapTable('checkBy', {field: 'Id', values: [data[j-1].Id]})
onSelectedRowChanged(data[j-1]);
}else{
break;
}
}else{
if(j<data.length-1){
$("#images").attr("src", "img/timg1.gif");
$('#zoom1').attr('href',"img/timg1.gif");
$("#carpassTable").bootstrapTable('uncheckBy', {field: 'Id', values: [arrselections[0].Id]})
$("#carpassTable").bootstrapTable('checkBy', {field: 'Id', values: [data[j+1].Id]})
onSelectedRowChanged(data[j+1]);
}else{
break;
}
}
carArr = [];
$("input[name='btSelectItem']:checkbox").each(function(i){
if(this.checked){
carArr.push(arrselections[0]);
}
});
if(carArr.length>0){
$("#imgUpload").removeAttr("disabled");
}else{
$("#imgUpload").attr('disabled',true);
}
break;
}
}
}else{
console.log("大于1或者空均不用使用键盘移动");
}
}
/**
* 回车查看详情
* @returns
*/
function keyEnter(){
var arrselections = $("#carpassTable").bootstrapTable('getSelections');
if(arrselections.length==1){
media(arrselections[0]);
}else{
console.log("大于或者小于1无法回车查看详情")
}
}
/**
* 键盘分页
* @param type prevPage nextPage
* @returns
*/
function keyboardPaging(type){
$("#carpassTable").bootstrapTable(type);
}