easyui datagrid 列宽设置百分比，自适应

刚开始写的时候，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%'})

列宽就麻烦点，首先找到一个可以作为参考的元素，然后根据整个元素的宽度计算列宽。

我这里因为有布局所以麻烦了点，有直接参照的更方便：

• 注意有的元素可能获取不到宽度或者获取数据有误，所以尽量找加载好的元素</