设计表头固定并且列宽可调整的Table表格

表头固定

我们都知道HTML中table的thead是会随着tbody滚动的。所以要实现tbody内容滚动，而表头固定就需要用两个table来显示，一个显示只用于表头，另一个用于显示tbody内容。

表格列宽调整

添加一个图标或者 div，作为拖动的标尺 ，当触发左键事件时（绑定 mousedown 事件），获取鼠标当前X坐标并设置鼠标样式。

$('.table-col-resize').eq(++i).bind('mousedown', {colNum: i}, function(e) {

	var $thDom = $(e.currentTarget).parent('th');

	$scope.originalPos = e.pageX; // 获取鼠标开始拖动时的坐标
	
	// ...
});

鼠标样式：

cursor: col-resize

拖动时（绑定mousemove事件）， 通过 event 获取坐标来更新这个 div 或图片 left 属性。

$('body').bind('mousemove', function(e) {
	$('.col-scaleplate').css('left', e.pageX - 8 + 'px');
});
 
   
 
   
 
  

效果如下：

当松开鼠标时（绑定mouseup事件），计算鼠标移动距离，并设置指定列的“thead”和“tbody”列宽。

$('body').bind('mouseup', function(e) {

	$('.col-scaleplate').css('left', '-40px'); // 将标尺div移出视线

	$scope.targetPos = e.pageX; // 获取鼠标按键放开时的X坐标
	
	jQuery(this).unbind('mousemove').unbind('mouseup'); // 取消body的mousemove和mouseup绑定

	// 计算鼠标移动的距离
	console.log($scope.targetPos - $scope.originalPos); //TODO del
	var distance = $scope.targetPos - $scope.originalPos;

	// 设置两个table的列宽
	$thDom.width($thDom.width() + distance); // 设置作为thead的table列宽
	$('tr').each(function() { // 设置作为tbody的table列宽
		var $tdDom = $(this).find('td').eq($scope.currentColNum).find('>div');
		$tdDom.width($tdDom.width() + distance);
	});

});

完整代码正在整理中...

整理进度基本完毕，内容如下：

PS：看代码前我先磨叽几句啊！这个是用angular实现的，因为使用ng-repeat循环创建比较方便，而且我项目中有恰好安装了angular包。

    
    
    


    

        

            
Col1|
            
Col2|
            
Col3|
            
Col4|
        
    
    

        

            

                

                    

                        {{unit}}