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 ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
浅谈JS之iframe中的窗口
Sep 13 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
Node 代理访问的实现
Sep 19 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
原生js实现放大镜组件
Jan 22 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格式化时间戳
2016/12/17 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
js表单验证实例讲解
2016/03/31 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
jQuery内容筛选选择器实例代码
2017/02/06 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
vue+axios全局添加请求头和参数操作
2020/07/24 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
windows上安装Anaconda和python的教程详解
2017/03/28 Python
python递归实现快速排序
2018/08/18 Python
python实现括号匹配的思路详解
2018/08/23 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Pyqt5实现英文学习词典
2019/06/24 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
俄罗斯极限运动网上商店:Board Shop №1
2020/12/18 全球购物
水毁工程实施方案
2014/04/01 职场文书
保护校园环境倡议书
2015/04/28 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
小学运动会报道稿
2015/07/22 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript