Bootstrap Table列寬拖動的方法

　　在之前做過的一個web項目中，前端表格是基於jQuery和Bootstrap Table實現的，要求能利用拖動改變列寬，現將實現的過程記錄如下：

　　1. Bootstrap Table可拖動，需要用到它的Resizable擴展插件，具體可見bootstrap-table的官方文檔鏈接：http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/

進入之后，找到Resizable插件，點擊Home進入github可以找到詳細的用法。

　　　　　　　　

　　2. 用法是直接引入該js插件，不過可以看到，這個插件還依賴於colResizable v1.6（下載地址：http://www.bacubacu.com/colresizable/）

<script src="colResizable-1.6.min.js"></script>
<script src="extensions/bootstrap-table-resizable.js"></script>

　　3. 另外，在使用Bootstrap Table的時候，建議用js去設置table的列屬性，即按照如下方式：

$('#myTable').bootstrapTable({  
                url: url,
        method: 'post',  
        columns:[{

            align: 'center',
            checkbox:true,
            width:'15',
            valign: 'middle'
        },{
            field: 'name',
            title: '名稱',
            align: 'center',
            width:'100',
            valign: 'middle'
        },{
            field: 'desc',
            title: '描述',
            width:500,
            align: 'left',
            valign: 'middle'
        }]
});    

　　上面這種方式可以通過修改width的大小來直接修改列的寬度。而還有一種寫法是在HTML中設置table的列頭部，這種方式是很難調整寬度的，且很容易導致列頭與內容無法對齊，是不推薦的，例如：

        <thead>
            <tr>
                <th data-field="id" data-width="50px">編號</th>
                <th data-field="name" data-width="100px">姓名</th>
                <th data-field="desc" data-width="120px">描述</th>
            </tr>
        </thead>