zoukankan      html  css  js  c++  java
  • 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);
    }
    

      

  • 相关阅读:
    java 事件监听机制组成
    关于父进程和子进程的关系(UAC 绕过思路)
    Fort.js – 时尚、现代的进度提示效果
    Hive学习之函数DDL和Show、Describe语句
    js完美的div拖拽实例代码
    SSH2框架实现注冊发短信验证码实例
    再看C#中的托付和事件
    RGB(FFFFFF)转255:255:255
    单一目的聚集操作
    智慧城市,在中国的北海边再画一个圈——大连“中国首届智慧城市协同创新峰会”请你带好笔
  • 原文地址:https://www.cnblogs.com/acme6/p/14046478.html
Copyright © 2011-2022 走看看