easyui的datagrid自适应排版

最新推荐文章于 2020-09-05 15:55:32 发布

widenstage

最新推荐文章于 2020-09-05 15:55:32 发布

阅读量973

点赞数

分类专栏： javascript 文章标签： easyui datagrid

本文链接：https://blog.csdn.net/widenstage/article/details/72597929

版权

javascript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

在使用的easyui排版的时候，经常会使用到datagrid，如果页面只有一个datagrid，只需要设置fit=true就可以了，例如：

	<div class="easyui-panel" title="角色授权" fit=true>
	    <table id="t_jssq" fit="true"></table>
	</div>

如果datagrid的上面还需要显示一些信息，如果按照下面的写法：

	<div class="easyui-panel" title="角色授权" fit=true>	
	     角色：${requestScope.mc}		
	    <table id="t_jssq" fit="true"></table>
	</div>

发现，datagrid下面的翻页等信息被挤没了。

处理方法有两个：

方法一：datagrid放弃自适应，给datagrid设定固定高度：

	<div id="gn" class="easyui-panel" title="角色授权" fit=true>	
		<div style="padding:10px;">	
			角色：${requestScope.mc}
		</div>		
		<table id="t_jssq"></table>
	</div>

方法二：将datagrid装在layout中：

   <div  class="easyui-layout"  data-options="fit:true">
         <div data-options="region:'north'" title="角色授权" style="height:60px;padding:5px;">
                 角色：${requestScope.mc}
         </div>
         <div data-options="region:'center'">
                <table id="t_jssq" fit="true"></table>
         </div>
    </div>

依然可以装在panel里：

     <div  class="easyui-panel" title="角色授权" fit=true>	
    	<div  class="easyui-layout"  data-options="fit:true">
        	 <div data-options="region:'north'"  style="height:30px;padding:5px;">
                 	角色：${requestScope.mc}
         	</div>
         	<div data-options="region:'center'">
                <table id="t_jssq" fit="true"></table>
         	</div>
    	</div>
     </div>