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可以找到详细的用法。
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列宽拖动的方法,希望对大家有所帮助
上一篇: 数据结构之栈的应用(记录最小值)
下一篇: Ai绘制3D效果的足球图标
推荐阅读
-
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
-
Bootstrap Table实现定时刷新数据的方法
-
java 画pdf用itext调整表格宽度、自定义各个列宽的方法
-
利用vue.js把静态json绑定bootstrap的table方法
-
bootstrap table实现iview固定列的效果
-
Node.js中Bootstrap-table的两种分页的实现方法
-
bootstrap-table实现表头固定以及列固定的方法示例
-
bootstrap-table组合表头的实现方法
-
[原创]可以让table支持手动调节列宽的js(ie only)
-
bootstrap-table.js支持用户自定义展示表格的列