表格列可拖拽宽度

Dear 丶 2023-08-17 15:34 123阅读 0赞

# 问题 #

普通表格的列是不能够通过用户操作改变宽度， 即动态改变列的宽度。

有时候， 有的列内容是多的，不够显示， 有的列内容是少的，不用太多宽度显示， 但是内容是动态的， 无法通过编码阶段确定。

于是提出表格宽度可以拖拽， 改变宽度的需求。

# 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>

转载于:https://www.cnblogs.com/lightsong/p/11440942.html

[Live Demo]: http://dobtco.github.io/jquery-resizable-columns
[store.js]: https://github.com/marcuswestin/store.js/