当前位置：主页 > javascript教程 >

Bootstrap Table列宽拖动实例代码

  • 更新时间：2020-06-15 16:19:53
  • 编辑：甘泰然

在之前做过的一个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列宽拖动的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持！

相关教程

  • 详解Bootstrap 表格样式、表单布局

    这篇文章主要介绍了Bootstrap 实现表格样式、表单布局的实例代码,需要的朋友可以参考下

    发布时间：2020-02-14

  • Bootstrap时间日历插件bootstrap-datetimepicker配置及用法

    这篇文章主要介绍了Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

    发布时间：2020-01-07

  • bootstrap动态调用select下拉框的实现方法

    今天小编就为大家分享一篇bootstrap动态调用select下拉框的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

    发布时间：2019-12-08

  • bootstrap搜索建议插件

    这篇文章主要为大家详细介绍了基于bootstrap按钮式下拉菜单组件的搜索建议插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    发布时间：2020-03-12

  • bootstrap中添加额外的图标的方法

    可以针对校验状态为输入框添加额外的图标。接下来通过本文给大家分享bootstrap中添加额外的图标实例代码，需要的的朋友参考下吧

    发布时间：2020-01-31

  • 分享Bootstrap fileinput文件上传预览插件使用方法

    这篇文章主要为大家详细介绍了Bootstrap fileinput文件上传预览插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    发布时间：2020-02-14

  • 深入理解bootstrap data和jquery .data

    最近在做项目的时候用到了bootstrap，在使用中发现其data与jquery的data有些不一样的地方，记录一下，分享给大家

    发布时间：2020-02-16

  • 推荐Bootstrap免费字体和图标网站

    在这篇内容中，我们把这套框架上的免费字体图标做了个整合(当然，以后还会不断的更新)。大家对bootstrap免费字体图标有需要的话，可以参考本教程

    发布时间：2019-12-30

  • JavaScript ES6函数式编程入门经典

    JavaScript ES6函数式编程入门经典

    本书使用JavaScript ES6带你学习函数式编程。你将学习柯里化、偏函数、高阶函数以及Monad等概念。具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    大小：46.3 MBJavaScript电子书

  • JavaScript忍者秘籍

    JavaScript忍者秘籍

    JavaScript语言非常重要，相关的技术图书也很多，但没有任何一本书对JavaScript语言的重要部分（函数、闭包和原型）进行深入、全面的介绍，也没有任何一本书讲述跨浏览器代码的编写。本书是

    大小：83.5 MBJavaScript电子书

  • JavaScript编程全解

    JavaScript编程全解

    JavaScript编程全解 全方位地介绍了JavaScript开发中的各个主题，无论是前端还是后端的JavaScript开发者都可以在本书中找到自己需要的内容。本书对HTML5、Web API、Node.js及WebSocket等最新的热门技术也

    大小：6.67 MBjs编程电子书

  • JavaScript函数式编程

    JavaScript函数式编程

    JavaScript 是近年来非常受瞩目的一门编程语言，它既支持面向对象编程，也支持函数式编程。本书专门介绍JavaScript函数式编程的特性。

    大小：42158 MB MJavaScript

  • HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通 第3版 共分为19章和4个附录，重点介绍使用HTML进行网页制作的方方面面，同时讲解了目前流行的Web标准与CSS网页布局实例，以及基于JavaScript语言的网页特

    大小：65.2 MB网页制作电子书

用户留言

发布评论

最新更新

热门推荐