工作日志2020-03-23

今日需求：

发卡管理
加入车牌号并通过拼音码查询
加入控制方式下拉框按照选择的控制方式联动显示文本框
修改物料管理界面，根据屏幕宽度 显示表格滚动框

遇到的问题：

下拉框联动代码

HTML：

<select class="form-control" id="opertypeid"  name="#(formModelName).opertype" onchange="showText()"  value="#(o?o.opertype:'')"  #if(view=='detail') readonly #end>
		         <option value="857">请选择</option>
		         <option #if(o.opertype == "0") selected #end value="0">时间</option>
		         <option #if(o.opertype == "1") selected #end value="1">计划量</option>
		         <option #if(o.opertype == "2") selected #end value="2">双重控制</option>
		       </select>

JS：

//进入页面运行一次方法
	 	showText();
		//控制方式
	 	function showText(){
	 			if(document.getElementById("opertypeid").value==1){
	 				将属性display 改为隐藏
	 				document.getElementById("timeid").style.display="none";
	 				将属性display 改为显示
			 		document.getElementById("liangid").style.display="block";
		 		}else if(document.getElementById("opertypeid").value==0){
		 			document.getElementById("liangid").style.display="none";
		 			document.getElementById("timeid").style.display="block";
		 		}else if(document.getElementById("opertypeid").value==2){
		 			document.getElementById("liangid").style.display="block";
		 			document.getElementById("timeid").style.display="block";
		 		}else{
		 			return;
		 		}
	 		}
	

Bootstrap物料管理界面调整

先看一下效果：
他会根据屏幕的大小自动调节表格的高度，调整比例
接下来贴一下我的代码
Html代码：

//根据屏幕高度比div高度然后得到的值就是表的高度
<div class="panel" id="panelid"  style="min-height: calc(45vh);">		
	<a id="add" class="btn btn-primary data-toolbar" href="#(ctx)/admin/pubVardict/getEditPage?view=edit"><i class="demo-pli-add"></i> 添加</a>
	<a id="del" class="btn btn-danger data-toolbar" onclick="delSel()" href="javascript:void(0);"><i class="demo-pli-cross"></i> 批量删除</a>
	<table id="pageTable" class="demo-add-niftycheck" 
		   data-toolbar="#del,#add"
		   data-search="true"
		   data-show-refresh="true"
		   data-show-toggle="true"
		   data-show-columns="true"
		   data-sort-name="id"
		   data-page-list="[5, 10, 20]"
		   data-page-size="5"
		   data-pagination="true" data-show-pagination-switch="true" ></table>								
</div>

JS代码：

		//获取屏幕高度
		var heights=window.innerHeight;
		//获取表格外div的高度
		var tableHeight = heights-$("#panelid").height();
		//这句就是重新设置表格高度 （屏幕高度：div高度-80px） =（height:tableHeight-80）
		$('#pageTable').bootstrapTable('resetView', { height:tableHeight-80 });