EasyUi 表格自适应宽度

第一次接触EasyUi想要实现表格宽度自适应,网上找了好多文章,都没有实现,有网友实现了可是自己看不懂。可能是太简单高手都懒得分享,现在把自己的理解和实现记录一下,希望可以帮到向自己一样的菜鸟,步骤如下:

第一步,把table标签的属性“fitColumns”设置为“true”

第二步,经过第一步的设置后,此时给标题的td设置width属性,width的值此时设置为数字代表的就是宽度按百分比来设置,例如width:10,表示宽度为10%

代码如下:

<table class="easyui-datagrid" style="width:100%;"
            data-options="singleSelect:true,collapsible:true,url:'demo/datagrid/datagrid_data1.json',method:'get',fitColumns:true">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:10">Item ID</th>
                <th data-options="field:'productid',width:20">Product</th>
                <th data-options="field:'listprice',width:10,align:'right'">List Price</th>
                <th data-options="field:'unitcost',width:10,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:40">Attribute</th>
                <th data-options="field:'status',width:10,align:'center'">Status</th>
            </tr>
        </thead>
    </table>

 

posted @ 2019-11-05 22:44  之了  阅读(3110)  评论(0编辑  收藏  举报