Bootstrap Table列宽拖动的方法


Posted in Javascript onAugust 15, 2018

在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table做的,客户要求能利用拖动改变列宽,为了总结和备忘,现将实现的过程记录如下:

1. Bootstrap Table可拖动,需要用到它的Resizable扩展插件,具体可见bootstrap-table的官方文档链接: http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/

进入之后,找到Resizable插件,点击Home进入github可以找到详细的用法。

Bootstrap Table列宽拖动的方法 

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列宽拖动的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
js对象的比较
Feb 26 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
Angular实现图片裁剪工具ngImgCrop实践
Aug 17 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
Aug 15 #Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 #Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 #Javascript
解决layui中的form表单与button的点击事件冲突问题
Aug 15 #Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 #jQuery
layui 监听表格复选框选中值的方法
Aug 15 #Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 #Javascript
You might like
php中用文本文件做数据库的实现方法
2008/03/27 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
python的else子句使用指南
2016/02/27 Python
Python_LDA实现方法详解
2017/10/25 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
建筑班组长岗位职责
2014/01/02 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
疾病捐款倡议书
2014/05/13 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
吴仁宝观后感
2015/06/09 职场文书
师范生教育见习总结
2015/06/23 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
PyTorch device与cuda.device用法
2022/04/03 Python