您的位置：首页 > 产品设计 > UI/UE

easy ui datagrid的高度自适应

2015-08-13 14:24 645 查看

使用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">

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航