bootstrap table 光标_bootstrap table 拖动列实现以及问题

依赖

这里使用bootstrap table的extensions扩展js：bootstrap-table-resizable.js

我这里用的是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:"

draggingClass:"dragging",

resizeMode:'overflow'//允许溢出父容器

});

然后问题就来了

1.拖动光标只在table body显示，并不是在header表头显示的

2.拖动只能调整body的列宽，导致表头和内容不对齐

我的解决：增加拖动事件，在拖动同时调整表头宽度

$('#tb').colResizable({

liveDrag:true,//拖动列时更新表布局

gripInnerHtml:"

draggingClass:"dragging",

resizeMode:'overflow',//允许溢出父容器

//拖动事件

onDrag: function () {

$('#tb').bootstrapTable("resetView")

}

});

但是拖动光标的问题还在，不知道问题出在哪里，期待各位大哥能解决并告知，谢谢

标签：colResizable,拖动,bootstrap,表头,js,table,tb

来源： https://blog.csdn.net/wantsToBeASinger/article/details/88815245