bootstrap-table 列宽动态拖拽改变宽度

项目中前台页面使用 的bootstrap-table插件，客户要求列宽可拖拽，研究了一下午终于搞定。

需要依赖另外两个扩展插件

colResizable-1.6.js

bootstrap-table-resizable.js

　 页面文件引入顺序：

        <script th:src="@{/scripts/assets/global/plugins/jquery.min.js}" type="text/javascript"></script>
        <script th:src="@{/scripts/js/bootstrap-table/1.12.1/bootstrap-table.js}" type="text/javascript"></script>
        <script th:src="@{/scripts/assets/global/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js}" type="text/javascript"></script>
        <script th:src="@{/scripts/js/bootstrap-table/1.12.1/extensions/colresizable/colResizable-1.6.js}" type="text/javascript"></script>
        <script th:src="@{/scripts/js/bootstrap-table/1.12.1/extensions/resizable/bootstrap-table-resizable.js}" type="text/javascript"></script>
页面执行：

 $(document).ready(function () {
      $("#fqacheckreport-form").SbzInitValidator();
$("#fqacheckreport-form").SbzResetValidator();
//初始化校验并清空校验信息
      $("#fqacheckreport-form").SbzInitValidator();
$("#fqacheckreport-form").SbzResetValidator();
//调用函数，初始化表格
        initTable();
displayFirstTr();
$("#fmeastandardSearchBtn").bind("click", queryData);
$("#amtTrackingTable").colResizable();
       });
var queryData = function (){
var form = $("#fqacheckreport-form");
var isCorrect =verificationData(form);
if(!isCorrect){
return;
    }
var url="../fqaResultReport/findFqaResultReportByPage";
$('#auditFqatemplateinfoTable').bootstrapTable('refresh',{'url':url});
}

function initTable() {
//隐藏正在加载
    $('#auditFqatemplateinfoTable').bootstrapTable('hideLoading');
$('#auditFqatemplateinfoTable').bootstrapTable({
// url: "../fqaResultReport/findFqaResultReportByPage",
        method: 'POST',
dataType: "json",
dataField: 'rows',
striped: true,//设置为 true 会有隔行变色效果
        undefinedText: "",//当数据为 undefined 时显示的字符
        pagination: true, //设置为 true 会在表格底部显示分页条。
        paginationPos:"tableDiv",
showToggle: "true",//是否显示 切换试图（table/card）按钮
        showColumns: "true",//是否显示 内容列下拉框
        showLoading: false,
pageNumber: 1,//初始化加载第一页，默认第一页
        pageSize: 10,//每页的记录行数（*）
        pageList: [10, 20, 30, 40],//可供选择的每页的行数（*），当记录条数大于最小可选择条数时才会出现
        paginationPreText: '上一页',
paginationNextText: '下一页',
search: false, //是否显示表格搜索,bootstrap-table服务器分页不能使用搜索功能，可以自定义搜索框，上面jsp中已经给出，操作方法也已经给出
        striped : true,//隔行变色
        showColumns: false,//是否显示 内容列下拉框
        showToggle: false, //是否显示详细视图和列表视图的切换按钮
        clickToSelect: true,  //是否启用点击选中行
        data_local: "zh-US",//表格汉化
        sidePagination: "server", //服务端处理分页
        queryParamsType : "limit",//设置为 ‘limit’ 则会发送符合 RESTFul 格式的参数.
        queryParams:  function(params){//向后台传值
                 var form = $("#fqacheckreport-form");
var obj = $(form).serializeObject();
if(obj.entity!= undefined && !$.isArray(obj.entity))
                    {obj.entityList = [obj.entity];}
obj.start=params.offset;
obj.length=params.limit;
obj.checktypetext=$("#fqareport-checktype").find("option:selected").text();
return  JSON.stringify(obj);
         },
responseHandler: function (res) {
return res;
        },
columns: [
                [
                    {
title: [[#{fqacheckreport.checkdate}]],
valign:"middle",
align:"center",
width:120
                    },{
title: [[#{fqacheckreport.checkperson}]],
valign:"middle",
align:"center",
width:120
                    },{
title: [[#{fqacheckreport.entity}]],
valign:"middle",
align:"center",
width:120
                    },{
title: [[#{fqacheckreport.branch}]],
valign:"middle",
align:"center",
width:120
                    },{
title: [[#{fqacheckreport.projectname}]],
valign:"middle",
align:"center",
width:120
                    },{
title: [[#{fqacheckreport.producttype}]],
valign:"middle",
align:"center",
width:120
                    },{
title: [[#{fqacheckreport.equipmenttype}]],
valign:"middle",
align:"center",
width:120
                    },{
title: [[#{fqacheckreport.xh}]],
valign:"middle",