jquery-resizable-columns
=======================
Resizable table columns for jQuery. **[Live Demo](http://dobtco.github.io/jquery-resizable-columns)**
**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](https://github.com/marcuswestin/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>
```
#### Persist column sizes
To save column sizes on page reload (or js re-rendering), just pass an object that responds to `get` and `set`. You'll also have to give your <table> a `data-resizable-columns-id` attribute, and your <th>s `data-resizable-column-id` attributes.
```
<script src="libs/jquery.js"></script>
<script src="libs/store.js"></script>
<script src="jquery.resizableColumns.js"></script>
<table data-resizable-columns-id="demo-table">
<thead>
<tr>
<th data-resizable-column-id="#">#</th>
<th data-resizable-column-id="first_name">First Name</th>
<th data-resizable-column-id="last_name">Last Name</th>
<th data-resizable-column-id="username">Username</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
<script>
$(function(){
$("table").resizableColumns({
store: store
});
});
</script>
```
#### License
MIT
#### Credits
There's various versions of this plugin floating around the internet, but they're all outdated in one way or another. Thanks to [http://robau.wordpress.com/2011/06/09/unobtrusive-table-column-resize-with-jquery/]() for a great starting point.
没有合适的资源?快使用搜索试试~ 我知道了~
实现bootstrap table可设置列宽和可拖动列宽
共24个文件
js:10个
json:3个
css:3个
5星 · 超过95%的资源 需积分: 1 28 下载量 175 浏览量
2023-02-15
12:29:18
上传
评论
收藏 148KB ZIP 举报
温馨提示
实现bootstrap table可设置列宽和可拖动列宽 Bootstrap Table列宽拖动的方法 Bootstrap Table拖动改变列宽的方法 bootstrap-table 列宽动态拖拽改变宽度 BootStrap table实现表格行拖拽效果 bootstrap-table如何设置可以拖拉改变td的宽度 总共两种方式去设置固定头部和拖动列宽两种样式不太一样可以自己选择
资源推荐
资源详情
资源评论
收起资源包目录
bootstrap-table-resizable.zip (24个子文件)
bootstrap-table-resizable
gulpfile.js 2KB
.bowerrc 28B
src
adapter.js 480B
constants.js 718B
class.js 12KB
index.js 106B
AUTHORS 123B
index2.html 3KB
demo
demo.css 173B
dist
bootstrap-table-1.18.1.min.css 9KB
colResizable-1.6.min.js 6KB
jquery-3.3.1.js 276KB
colResizable-1.6.js 22KB
bootstrap-table-1.14.1.js 136KB
extension.json 558B
bootstrap-table-resizable.js 2KB
bootstrap3.3.7.min.css 118KB
package.json 1KB
less
index.less 271B
demo.less 174B
.gitignore 24B
README.md 2KB
bower.json 837B
index1.html 3KB
共 24 条
- 1
资源评论
- glowlaw2023-07-25使用这个文件,我们可以轻松地进行表格布局的调整,提高了数据展示的效果。
- 雨后的印2023-07-25这个文件解决了bootstrap table默认列宽固定的问题,让表格显示更加灵活。
- 林书尼2023-07-25这个文件提供了实现bootstrap table可设置列宽和可拖动列宽的方法,非常方便实用。
- 稚气筱筱2023-07-25通过使用这个文件,我们可以轻松地调整表格的列宽,使其更符合我们的需求。
- 基鑫阁2023-07-25这个文件提供了一种简单而有效的解决方案,让我们的表格看起来更加美观且易于操作。
幻梦_
- 粉丝: 2
- 资源: 9
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功