easyui datagrid fitColumns:true失效解决办法

easyui datagrid fitColumns配置设置为true时,但是数据列并没有自动填充满datagrid指定的宽度,出现这个问题,是因为你的所有列配置都没有指定width属性,导致datagrid不会重新计算列宽度,所以列宽取列标题宽度或者此列内容宽度的最大值。

 

  datagrid fitColumns配置为true后,是依据配置列width,和datagrid的指定width来重新结算此列的宽度的,如果都没有指定,列宽取列标题宽度或者此列内容宽度的最大值。要想datagrid fitColumns:true生效,至少要为一列指定宽度,

 

  测试代码如下,虽然设置了fitColumns为true,但是并没有自动填充父容器

easyui datagrid fitColumns:true失效解决办法

-收缩HTML代码  运行代码  [如果运行无效果,请自行将源代码保存为html文件运行]
<table class="easyui-datagrid" title="easyui datagrid fitColumns:true失效" style="width:600px;height:250px"
data-options="singleSelect:true,collapsible:true,fitColumns:true,url:'datagrid_data1.json',method:'get'" id="dg">

<thead>
<tr>
<th data-options="field:'itemid'">Item ID</th>
<th data-options="field:'productid'">Product</th>
<th data-options="field:'listprice',align:'right'">List Price</th>
<th data-options="field:'unitcost',align:'right'">Unit Cost</th>
<th data-options="field:'attr1'">Attribute</th>
<th data-options="field:'status',align:'center'">Status</th>
</tr>
</thead>
</table>

  解决办法就是为其中一列指定宽度即可,其他列宽度同上面说的取最大值,而指定width的会依据容器宽度重新计算宽度。

easyui datagrid fitColumns:true失效解决办法

-收缩HTML代码  运行代码  [如果运行无效果,请自行将源代码保存为html文件运行]
<th data-options="field:'status',align:'center',width:100">Status</th>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值