BootStrap-Table可调节列宽（bootstrap-table-resizable.js+(resizableColumns.js或者colResizable-1.6.js)）

BootStrapTable可调整列宽

	BootStrapTable可通过bootstrap-table-resizable.js扩展实现对列的可拖曳调整，需要配合jquery.resizableColumns.min.js或者colResizable-1.6.min.js使用。
	bootstrap-table-resizable.js可通过官方网站下载，可在下载的压缩包的 /dist/extensions/ 文件夹下找到，下载地址：https://bootstrap-table.com/docs/getting-started/download/
	
	jquery.resizableColumns.min.js可通过git下载，下载地址：https://github.com/dobtco/jquery-resizable-columns

	colResizable-1.6.min.js可通过git或者官网下载，官网地址：http://www.bacubacu.com/colresizable/#samples；
	git地址：https://github.com/alvaro-prieto/colResizable

1、引入js和css

<link rel="stylesheet" href="<%= request.getContextPath() %>/tableResizable/resizableColumns/css/jquery.resizableColumns.css?v=${version.version}" type="text/css" />
<script src="<%= request.getContextPath() %>/tableResizable/js/bootstrap-table-resizable.min.js" type="text/javascript"></script>
<script src="<%= request.getContextPath() %>/tableResizable/resizableColumns/js/jquery.resizableColumns.min.js" type="text/javascript"></script>
<%--<script src="<%= request.getContextPath() %>/colResizable/js/colResizable-1.6.min.js" type="text/javascript"></script>--%>

**注：对应路径请填写实际项目路径**

2、取消height设置

	使用bootstrap-table-resizable.js时，不能设置table的height属性，否则会出现表头无法随table-body调整的问题，且只能在table-body拖曳列宽，暂时未找到解决方法。
	官方文档提示：

3、在初始化时调用方法

使用bootstrap-table-resizable.js + jquery.resizableColumns.min.js
$("#stationTable").resizableColumns();

使用bootstrap-table-resizable.js + colResizable-1.6.min.js
$("#stationTable").colResizable({
        liveDrag: true,
        minWidth: 8
    });

4、注意事项

	1、使用bootstrap-table-resizable.js + colResizable-1.6.min.js时，对table-td可不设置data-width，让bootstrap-table列自适应即可。
	如果设置了data-width，在使用bootstrap-table-resizable.js + colResizable-1.6.min.js时，可能需要重新调整data-width，以免出现有些列显示不全的问题。
	2、使用以上两种实现方式时，如果刚开始进入页面时table无数据，之后通过在页面中更换查询条件使用refresh刷新table成有数据状态时，可能出现可拖曳的位置跟表格的边框不齐的问题，大概是因为有数据时table会自适应，调整了列宽，导致与无数据时的列宽不一致。

5、补充问题

1)resizableColumns与showColumns同时使用的问题

分为两种情况：

	a、调整列宽时，使用属性配置，如下，使用这种方式时，显示或者隐藏列后，仍可以调整列宽，但是在第一次请求时，可能出现 调整列 与 表格边框不对齐的情况。

	$('#table').bootstrapTable({
		...
		resizable: true;
		...
	})
	
	or
	
	<table data-resizable="true"></table>

	b、在onLoadSuccess()中使用$('table').resizableColumns()的形式，这种不会出现a中所说的可调整列与表格边框不对齐的情况，但是一旦显示或隐藏列后，就不能再次调整列宽了，目前的解决方法是绑定onColumnSwitch事件，显示或隐藏列时重新刷新一下表格。

$('#table').bootstrapTable({
		...
		onLoadSuccess: function(data) {
            ...
            $("#table").resizableColumns();
        },
        onColumnSwitch: function (field, checked) {
            refreshTable();
        }
	})