刚开始写的时候,UI给的图是照easyui设计的,此前我也没用过这个框架,用起来不太顺手也就没仔细研究,没想到断断续续被折磨了半年。
首先改样式就改到头晕眼花,后来要加分页(分页看这里),天真的以为是后端分页,没想到是前端分,过了很久才明白为什么每次数据全是一页显示完。
今天给列宽设置百分比又折腾了几个小时。
吐槽完毕,下面正文
html:(外层的div是tab的一个panel)
<div title="t1" class="datagridContainer">
<table id="id" class='easyui-datagrid myClass'></table>
</div>
首先datagrid整个宽度是可以直接设置百分比的:
$('#id').datagrid({width: '100%'})
列宽就麻烦点,首先找到一个可以作为参考的元素,然后根据整个元素的宽度计算列宽。
我这里因为有布局所以麻烦了点,有直接参照的更方便:
- 注意有的元素可能获取不到宽度或者获取数据有误,所以尽量找加载好的元素</