依赖
<!--拖动调整列宽相关-->
<script type="text/javascript" src="bootstrap-table/extensions/resizable/bootstrap-table-resizable.js"></script>
<script type="text/javascript" src="bootstrap-table/extensions/resizable/colResizable-1.6.js"></script>
这里使用bootstrap table的extensions扩展js:bootstrap-table-resizable.js
官网里说是依赖 jquery-resizable-columns,用是可以用,但是个人感觉没有colResizable这个插件好用
我这里用的是colResizable
js:
tableInit:function () {
$('#tb').bootstrapTable('destroy').bootstrapTable({
略,
columns: [
{
title: '序号',//标题 可不加
width:'64px',
align: 'center',
vAlign: 'middle',
formatter: function (value, row, index) {
return index+1;
}
},
{
title: '单号',
field: 'orderId',
align: 'center',
vAlign: 'middle',
sortable : true
},...
]
});
$('#tb').colResizable({
liveDrag:true,//拖动列时更新表布局
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
resizeMode:'overflow'//允许溢出父容器
});
然后问题就来了
1.拖动光标只在table body显示,并不是在header表头显示的
2.拖动只能调整body的列宽,导致表头和内容不对齐
我的解决:增加拖动事件,在拖动同时调整表头宽度
$('#tb').colResizable({
liveDrag:true,//拖动列时更新表布局
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
resizeMode:'overflow',//允许溢出父容器
//拖动事件
onDrag: function () {
$('#tb').bootstrapTable("resetView")
}
});
但是拖动光标的问题还在,不知道问题出在哪里,期待各位大哥能解决并告知,谢谢
原文地址:https://blog.csdn.net/wantsToBeASinger/article/details/88815245
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。