easyui列表总结

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

• 去除空白列前：
  
• 去除空白列后：