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 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
JS实现简单的表格增删
Jan 16 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
VSCode launch.json配置详细教程
Jun 18 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
Zend Guard一些常见问题解答
2008/09/11 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
Python3使用SMTP发送带附件邮件
2020/06/16 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python面向对象之类和实例用法分析
2019/06/08 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Python3的socket使用方法详解
2020/02/18 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
幼儿教师个人求职信范文
2013/09/21 职场文书
求职教师自荐书
2014/06/19 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
现役军人家属慰问信
2015/03/24 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
Android存储中最基本的文件存储方式
2022/04/30 Java/Android