easy ui datagrid的高度自适应

最新推荐文章于 2025-07-23 14:14:22 发布

李中武

最新推荐文章于 2025-07-23 14:14:22 发布

阅读量2w

点赞数

CC 4.0 BY-SA版权

分类专栏： java 文章标签： datagrid java jQuery

本文链接：https://blog.csdn.net/lixhongwu/article/details/47610499

java 专栏收录该内容

4 篇文章

订阅专栏

这篇博客探讨了在使用jQuery Easy UI的Datagrid时如何实现高度自适应的问题。作者分享了通过resize方法和获取包含Datagrid元素高度的方式来解决这个问题，并提醒如果需要根据父页面高度自适应，需要注意页面加载顺序。提供了简单的实现技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jquery easy ui 的datagird 发现高度没办法自适应于是自己使用了一些比较笨的方法不知道大家有没有好一点的方法大家可以互相学习一下

1、easyui里面有一个resize方法可以设置调整高度

2、获得此包含此datagrid的元素的高度在调用resize方法

function onloadFun(){
	$('#datagrid').datagrid('resize',{ 
		height:($(window).height()) 
	});
}

<body class="easyui-layout" style="maring:0;padding:0;width:100%;heigth:100%;overflow: hidden;" onload="onloadFun();">
<span style="white-space:pre">	</span><div id="saSrRoleListDivID" style="width:100%;height:60px;">
<span style="white-space:pre">		</span><table id="datagrid" class="easyui-datagrid" 
<span style="white-space:pre">			</span>style="width: 100%;  rownumbers="true"
<span style="white-space:pre">			</span>pagination="true" fitColumns="true"
<span style="white-space:pre">			</span>toolbar="#toolbar"
<span style="white-space:pre">			</span>data-options="singleSelect:true,sortOrder:'desc',sortName:'statusdate',collapsible:true,url:'${basePath }${path}/getData',method:'get',multiSort:true">
<span style="white-space:pre">			</span><thead>
<span style="white-space:pre">				</span><tr>
<span style="white-space:pre">					</span><th data-options="field:'ck',checkbox:true" >选择</th>
<span style="white-space:pre">					</span><th data-options="field:'dictid',width:30" sortable="true" hidden="true">id</th>
<span style="white-space:pre">					</span><th data-options="field:'groupid',width:30" >组ID</th>
<span style="white-space:pre">					</span><th data-options="field:'module',width:30">模块</th>
<span style="white-space:pre">					</span><th data-options="field:'dictCode',width:40" sortable="true">编码</th>
<span style="white-space:pre">					</span><th data-options="field:'dictValue',width:40" sortable="true">值</th>
<span style="white-space:pre">					</span><th data-options="field:'description',width:40">描述</th>
<span style="white-space:pre">					</span><th data-options="field:'sortorder',width:10">排序</th>
<span style="white-space:pre">					</span><th data-options="field:'createdate',width:20,formatter:function(value,row,index){ 
                         var unixTimestamp = new Date(value); 
                         return unixTimestamp.toLocaleString(); 
                         } 
                    " hidden="true">创建时间</th>
<span style="white-space:pre">					</span><th data-options="field:'status',width:15,formatter:formateStatue">状态</th>
<span style="white-space:pre">					</span><th data-options="field:'statusdate',width:40,formatter:function(value,row,index){ 
                         var unixTimestamp = new Date(value); 
                         return unixTimestamp.toLocaleString(); 
                         } 
                    ">更新时间</th>
<span style="white-space:pre">				</span></tr>
<span style="white-space:pre">			</span></thead>
<span style="white-space:pre">		</span></table>
<div id="toolbar" style="background-color: #D5E4F5;">
<div style="margin-top: 5px;">
<span style="white-space:pre">	</span><form id="queryForm">
<span style="white-space:pre">		</span>组ID:<input id="p_ski_groupid" name="p_ski_groupid"></input>
<span style="white-space:pre">		</span>编码:<input id="p_ski_dictCode" name="p_ski_dictCode"></input>
<span style="white-space:pre">		</span>模块:<input id="p_ski_module" name="p_ski_module"></input>
<span style="white-space:pre">		</span><a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="doQuery()">查询</a>
<span style="white-space:pre">	</span></form>
</div>
<div style="border-top:solid 1px #95B8E7; ">


<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addDict()">新增</a>
<span style="white-space:pre">	</span><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editById('datagrid','${basePath}${path}tomodify','addDig','dictid','610px','300px')">编辑</a>
<span style="white-space:pre">	</span><a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="deleteDict()">删除</a>
<span style="white-space:pre">	</span><!--  
<span style="white-space:pre">	</span><a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"  onclick="stopOrstart('stop')">停用</a>
<span style="white-space:pre">	</span><a href="#" class="easyui-linkbutton" iconCls="icon-ok" plain="true"  onclick="stopOrstart('start')">启用</a>-->
</div>
</div>
<span style="white-space:pre">	</span></div>
</body>

3、倘若是根据父页面的高度来调整。然后父页面也是自适应的，则不能使用获取$(window).height() 因为父页面onload执行是在子页面加载后执行的，所以子页面的onload应该在父页面之前

简单使用了一个技巧

这是父页面代码

function frameHeight(){
   return $(window).height() -10;
}

<body style="margin: 0;">
<span style="white-space:pre">	</span><table cellspacing="1" cellpadding="1" width="100%" style="margin: 0" >
<span style="white-space:pre">		</span><tr>
<span style="white-space:pre">			</span><td width="20%" style="border-right:1px solid #E0ECFF;border-bottom: 1px solid #E0ECFF;">
<span style="white-space:pre">				</span><iframe id="menuTree" frameborder="0"  name="menuTree" width="100%" style="min-height: 460px; scrolling="auto" src="${basePath}/menu/menuTree"></iframe>
<span style="white-space:pre">			</span></td>
<span style="white-space:pre">			</span><td>
<span style="white-space:pre">				</span><iframe width="100%" id="menuList" frameborder="0"  name="menuList" style="min-height: 460px;" src="${basePath}/menu"></iframe>
<span style="white-space:pre">			</span></td>
<span style="white-space:pre">		</span></tr>
<span style="white-space:pre">	</span></table>
</body>

这是子页面的代码

var h=parent.frameHeight();
	$('#datagrid').datagrid('resize', {
		height :h
	//height:($(window).height()-$('#saSoOperatorDivID').height()-5) 
	});

<pre name="code" class="html">