表格列可拖拽寬度

問題

普通表格的列是不可以經過用戶操做改變寬度， 即動態改變列的寬度。

有時候， 有的列內容是多的，不夠顯示， 有的列內容是少的，不用太多寬度顯示， 可是內容是動態的， 沒法經過編碼階段肯定。

因而提出表格寬度能夠拖拽， 改變寬度的需求。

 

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>