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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM