easyui layout布局的根据浏览器页面大小自动调整大小

最新推荐文章于 2020-03-31 15:05:45 发布

既然必须穿越地狱，那就走下去吧

最新推荐文章于 2020-03-31 15:05:45 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_28643437/article/details/76026571

版权

jsp页面布局

	<!-- begin  列表部分  -->
	<div id ="fir_layout" class="easyui-layout" data-options="fit:true">
		<div title="机构" data-options="region:'west',split:true,iconCls:'icon-tip'"  style="width: 210px;height: auto; ">
			<div>
				<ul id="unitTree" class="easyui-tree" data-options="url:'org.ered?reqCode=orgTreeInitEasyUI', method:'get'"></ul>
			</div>
		</div>

		<div data-options="region:'center',iconCls:'icon-tip'">
			<div id ="sec_layout" class="easyui-layout" data-options="fit:true">
				<div data-options="region:'north' ,title:'查询条件',iconCls:'icon-tip'" style="height: 66px">
				<form  name="qryForm" id="qryForm" >
					<table >
					</table>
				</form>	
				</div>
				<div data-options="region:'center',iconCls:'icon-tip'">
			       <table id="assetAcrossLineGrid">
					</table>				
				    <div id="assetAcrossLineGridBar" style="padding:2px;height:20">
						<div style="margin-bottom:2px">
						  <table width="100%">
						    <tr><td align="left">
						     <jEsi:right rightId="">
		                      <a href="#" class="easyui-linkbutton" iconCls="icon-add"  plain="true" id="btnAdd"   οnclick="go2Add()">新增</a>
		                      <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" id="btnSave"  οnclick="go2Modi()">修改</a>
		                      <a href="#" class="easyui-linkbutton" iconCls="icon-cut"  plain="true" id="btnDel"   οnclick="deleteBatch()">删除</a>
		                      <a href="#" class="easyui-linkbutton" iconCls="icon-view" plain="true" id="btnView"  οnclick="go2Info()" >查看</a>
		                     </jEsi:right>
		                    </td>
		                    </tr>
						  </table>
						</div>
					</div>
				</div>
				<div data-options="region:'south',title:'地图确切位置',iconCls:'icon-tip'" style="height:310px;">
                   <div id="container"></div>
				</div>

			</div>
    </div>	
</div>

js代码

	$(function() {
		setHeight();
	});	
	
	function setHeight(){
		var c1 = $('#fir_layout');
		var c2 = $('#sec_layout'); 
		var p1 = c1.layout('panel','center');	// get the south panel
		var wholeHeight = p1.panel('panel').outerHeight()-100;
		var newHeight = wholeHeight/2;
		var p2 =c2.layout('panel','south');	// get the south panel 
		p2.panel('resize', {height:newHeight});
		c2.layout('resize',{height: (wholeHeight)});
	}