表格列可拖拽寬度

問題

普通表格的列是不能夠通過用戶操作改變寬度， 即動態改變列的寬度。

有時候， 有的列內容是多的，不夠顯示， 有的列內容是少的，不用太多寬度顯示， 但是內容是動態的， 無法通過編碼階段確定。

於是提出表格寬度可以拖拽， 改變寬度的需求。

 

Bootstrap Table

這個樣式庫提供了表格樣式的友好展示， 但是並不支持表格寬度可拖拽。

https://bootstrap-table.com/

Bootstrap Table

An extended table to the integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation)

Bootstrap Table has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich.

 

 

可拖拽插件

https://examples.bootstrap-table.com/#extensions/resizable.html

 

https://github.com/dobtco/jquery-resizable-columns

 

jquery-resizable-columns

Resizable table columns for jQuery. Live Demo

New and Improved! Now tested and working on Chrome & Firefox (Mac + Windows), and IE 9 + 10. Other browsers might work too, just haven't had time to check.

Size: < 8kb minified

 

Dependencies

• jQuery
• store.js (or anything similar) for localStorage persistence.

 

Simple Usage

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<script>
  $(function(){
    $("table").resizableColumns();
  });
</script>