Bootstrap Table列宽拖动的方法
更新时间：2018年08月15日 09:23:55 作者：ktkt
Bootstrap Table可拖动，需要用到它的Resizable扩展插件，下面脚本之家小编给大家带来了Bootstrap Table列宽拖动的方法，感兴趣的朋友一起看看吧
在之前做过的一个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/ ）
<script src="colResizable-1.6.min.js"></script> <script src="extensions/bootstrap-table-resizable.js"></script>
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的列头部，这种方式是很难调整宽度的，且很容易导致列头与内容无法对齐，是不推荐的，例如：
<thead>
<tr>
<th data-field="id" data-width="50px">编号</th>
<th data-field="name" data-width="100px">姓名</th>
<th data-field="desc" data-width="120px">描述</th>
</tr>
</thead>
总结
以上所述是小编给大家介绍的Bootstrap Table列宽拖动的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文将结合实例代码，介绍Bootstrap5的断点与容器的具体使用，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
这篇文章主要介绍了前端html2canvas生成截图实现步骤与踩坑的相关资料,主要步骤包括使用html2canvas生成截图以及处理图片跨域和CSS样式丢失问题,可选方案包括转换图片为base64编码和使用domtoimage插件,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了JS文件上传神器Bootstrap FileInput，样式非常美观，并且支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了使用二维数组实现的省市联动菜单，通过二维数组存储城市列表项,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了js与php通过json数据进行通讯的具体实现,需要的朋友可以参考下2014-03-03
循环输出问题是面试中经典的题目,一般会给出代码,让我们解释原因,并给出若干解决方案,下面这篇文章主要给大家介绍了关于JS利用循环解决的一些常见问题,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了JS数组求和的常用方法,结合实例形式总结分析了5种数组求和的常见操作方法与相关处理技巧,需要的朋友可以参考下2019-01-01
Rxjs map, mergeMap 和 switchMap 的区别与联系
这篇文章主要介绍了Rxjs map,mergeMap和switchMap的区别与联系，map、mergeMap和switchMap是RxJS中的三个主要运算符，在SAP Spartacus开发中有着广泛的使用场景2022-07-07
这篇文章介绍了js 为label标签和div标签赋值的方法，有需要的朋友可以参考一下2013-08-08
这篇文章主要介绍了基于JS绘制2021的烟花效果，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-03-03
最新评论