[原创]EasyUI的Datagrid根据分辨率自适应宽度和高度

baacloud免费翻墙vpn注册使用

现在项目页面开发出来后,发现很多笔记本电脑中的分辨率低,造成原来固定了宽高的datagrid表格控件显示不全,导致用户体验很差的问题,今天终于得到解决

源代码如下:

<table id="grid" toolbar="#toolbar" style="width:200px;height:300px;"  url="/GoodsROM/ROMList" idField="id" treeField="Goods_Name">
 <thead>
 <tr>
 <th field="id" rowspan="2"width="0" hidden="true">id</th>
 <th field="_parentId" rowspan="2"width="0" hidden="true">id</th>
</tr>
</thread>
</table>
<div id="window" class="easyui-window" style="height:200px;width:300px;"></div>

修改后的代码:

<pre><table id="grid" toolbar="#toolbar" fit="true"   url="/GoodsROM/ROMList" idField="id" treeField="Goods_Name">
 <thead>
 <tr>
 <th field="id" rowspan="2"width="0" hidden="true">id</th>
 <th field="_parentId" rowspan="2"width="0" hidden="true">id</th>
</tr>
</thread>
</table>

<pre><div id=“window” style="height:200px;width:300px;"></div></pre>
</pre>

这样虽然解决了,datagrid的自适应问题但是,却发现出现了左下滚动条,说明还是有问题,于是继续将window的样式去掉,用js来制定它的宽和高,
代码如下:

<div id="window" class="easyui-window"></div>
<script>
$(function(){
$('#window').window({
width:300,
height:200
});
});
</script>

结果有些页面的确解决了问题,不再显示右下滚动条,但是有些页面还是存在滚动条,这是为什么呢,是因为datagrid的table和window的div没有分开在
不同的div中,导致页面加载时下方还是有一部分window的div也加载了,于是继续修改如下:

<pre><div style="width:100%;height:100%">
<table id="grid" toolbar="#toolbar" style="width:200px;height:300px;"  url="/GoodsROM/ROMList" idField="id" treeField="Goods_Name">
 <thead>
 <tr>
 <th field="id" rowspan="2"width="0" hidden="true">id</th>
 <th field="_parentId" rowspan="2"width="0" hidden="true">id</th>
</tr>
</thread>
</table>
</div>

<pre><div id="window"></div>

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏