1、列宽自适应
- 代码实现
fitColumns:true,
- 实现效果
将整个table的各列按照页面宽度展示在一页,当列比较少时也将页面铺满,尽可能的将每一列拉宽,如果列太多或者有的列内容太长则会显示不全,形成列挤在一起的效果。如果要调整某一列的宽度让内容全部展示出来,则其他列的宽度就会在页面上看不见(被挤不见了)。
2、列宽固定宽度(列表横向滚动条)
不使用 fitColumns:true
, 时,列的宽度根据自己指定的宽度调整,当列太宽页面展示不下所以列时,会出现横向滚动条。
3、冻结表头
使用 fit:'true'
属性,table会根据页面自适应,在向下滚动时,表头会自动冻结
<table id="data_table" class="easyui-datagrid" border="0" pagination="true" pageSize='20' rownumbers="true"
data-options="
url: '${basePath}/xxx/xxx?status=4',
method: 'get',
rownumbers: true,
fit:'true',
<#--fitColumns:true,-->
idField: 'id',
singleSelect: true,
remoteSort:false,
multiSort:true,
toolbar:'#datagrid_toolbar'
">
<thead>
<tr>
<th data-options="field:'id',width:100,hidden:true">id</th>
<th data-options="field:'warnId',width:100,hidden:true">warnId</th>
<th data-options="field:'categoryName',width:100,align:'center'">分类名称</th>
<th data-options="field:'warnName',width:150,align:'center',formatter:formatWarnName">监控项名称</th>
<th data-options="field:'warnLevel',width:100,align:'center',formatter:formatLevel">告警级别</th>
<th data-options="field:'firstWarnTime',width:150,sortable:true,align:'center',formatter:formatDate">首次告警时间</th>
<th data-options="field:'operateTime',width:150,sortable:true,align:'center',formatter:formatDate">操作时间</th>
<th data-options="field:'finishTime',width:150,sortable:true,align:'center',formatter:formatDate">工单结束时间</th>
</thead>
</table>
- 最终效果图
4、去除右侧空白列
scrollbarSize:0
- 去除空白列前:
- 去除空白列后: