基于jQuery和colResizable-1.6.js的使表头固定内容滚动

原创

于 2018-09-20 23:28:33 发布 · 1.9k 阅读

CC 4.0 BY-SA版权

本文介绍了如何通过jQuery和colResizable-1.6.js实现表头固定，内容滚动的效果。在操作中，需将表头和内容分别放入两个div，并修改colResizable.js的syncCols方法以解决列宽同步问题。尽管存在一些限制，如需相同id的表头和内容table，以及避免在table中设置id等。

要让表头固定内容滚动，基本操作思路是将表头和内容分开成两个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.w=w; 
	            c2.w= t.f ? w2 : c2.w;
	        }
	        syncGrips(t);
		}
		
	};

HTML部分代码：