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

  

posted @ 2020-11-27 10:12  极致网络科技  阅读(1371)  评论(0编辑  收藏  举报