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 相关文章推荐
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
jquery模拟SELECT下拉框取值效果
Oct 23 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
JavaScript数组迭代器实例分析
Jun 09 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
实例分析js事件循环机制
Dec 13 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
JavaScript生成随机验证码代码实例
Sep 28 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
2009/06/29 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
浅谈jquery上下滑动的注意事项
2016/10/13 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
[01:06:30]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第二场 1月9日
2021/03/11 DOTA
Python基于select实现的socket服务器
2016/04/13 Python
Python实现文件复制删除
2016/04/19 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python如何从文件读取数据及解析
2019/09/19 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
造价工程师个人求职信
2013/09/21 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
学校交通安全责任书
2014/08/25 职场文书
采购员岗位职责
2015/02/03 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
Django框架中表单的用法
2022/06/10 Python