第一次接触EasyUi想要实现表格宽度自适应,网上找了好多文章,都没有实现,有网友实现了可是自己看不懂。可能是太简单高手都懒得分享,现在把自己的理解和实现记录一下,希望可以帮到向自己一样的菜鸟,步骤如下:
第一步,把table标签的属性“fitColumns”设置为“true”
第二步,经过第一步的设置后,此时给标题的td设置width属性,width的值此时设置为数字代表的就是宽度按百分比来设置,例如10,表示宽度为10%
代码如下:
<table class="easyui-datagrid" style="100%;" data-options="singleSelect:true,collapsible:true,url:'demo/datagrid/datagrid_data1.json',method:'get',fitColumns:true"> <thead> <tr> <th data-options="field:'itemid',10">Item ID</th> <th data-options="field:'productid',20">Product</th> <th data-options="field:'listprice',10,align:'right'">List Price</th> <th data-options="field:'unitcost',10,align:'right'">Unit Cost</th> <th data-options="field:'attr1',40">Attribute</th> <th data-options="field:'status',10,align:'center'">Status</th> </tr> </thead> </table>