欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Bootstrap Table列宽拖动的方法

程序员文章站 2022-07-11 16:15:32
在之前做过的一个web项目中,前端表格是基于jquery和bootstrap table做的,客户要求能利用拖动改变列宽,为了总结和备忘,现将实现的过程记录如下: 1....

在之前做过的一个web项目中,前端表格是基于jquery和bootstrap table做的,客户要求能利用拖动改变列宽,为了总结和备忘,现将实现的过程记录如下:

1. bootstrap table可拖动,需要用到它的resizable扩展插件,具体可见bootstrap-table的官方文档链接:

进入之后,找到resizable插件,点击home进入github可以找到详细的用法。

Bootstrap Table列宽拖动的方法 

2. 用法是直接引入该js插件,不过可以看到,这个插件还依赖于colresizable v1.6(下载地址: )

<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列宽拖动的方法,希望对大家有所帮助