在之前做过的一个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/)
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的列头部,这种方式是很难调整宽度的,且很容易导致列头与内容无法对齐,是不推荐的,例如:
编号姓名描述
WPF DataGrid 列宽填充表格方法
WPF中使DataGrid 列宽填充表格方法,设置ColumnWidth属性为ColumnWidth="*"即可. 源码:
关于如何解决bootstrap table 列 切换 刷新 高度不一样
在使用bootstrap table时候,碰到bootstrap table 列 切换 刷新 高度不一样的问题,如图所示: 解决这个问题很简单,在你的页头加一句gt ...
bootstrap实现列的拖动
Aspose.Cells设置自动列宽(最佳列宽)及一些方法总结
/// /// 设置表页的列宽度自适应 /// /// wor ...
bootstrap table 列求和