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 相关文章推荐
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
深入分析Javascript跨域问题
Apr 17 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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+mysql扎实个人基本功
2008/03/27 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
RxJS的入门指引和初步应用
2019/06/15 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
2020/08/14 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
跟老齐学Python之复习if语句
2014/10/02 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python tkinter label 更新方法
2018/10/11 Python
python实现多张图片拼接成大图
2019/01/15 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python同步windows和linux文件
2019/08/29 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
九年级体育教学反思
2014/01/23 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
关爱空巢老人感想
2015/08/11 职场文书
小学大队长竞选稿
2015/11/20 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
AngularJS实现多级下拉框
2022/03/25 Javascript
Java中的Kotlin 内部类原理
2022/06/16 Java/Android