要让表头固定内容滚动,基本操作思路是将表头和内容分开成两个table,并装进两个不同的div中,再让内容的div设置滚动。但是colResizable.js在同时渲染了两个表格后,两个表格的列宽拖拽是相互独立的,并不能一起滚动,于是我们需要在插件内容上做一些修改。
这里我使用的是colResizable.js-1.6.js,需要将js文件的syncCols方法进行修改:
var syncCols = function(i,isOver){
for(var a=0;a<2; a++){
var t = tables["JColResizer"+a];
var inc = drag.x-drag.l, c = t.c[i], c2 = t.c[i+1];
var w = c.w + inc; var w2= c2.w- inc; //their new width is obtained
c.width( w + PX);
t.cg.eq(i).width( w + PX);
if(t.f){ //if fixed mode
c2.width(w2 + PX);
t.cg.eq(i+1).width( w2 + PX);
}else if(t.opt.overflow) { //if overflow is set, incriment min-width to force overflow
t.css('min-width', t.w + inc);
}
if(isOver){
c