bootstraptable默认选中第一条数据,且支持键盘上下切换数据,左右翻页
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); }