表头固定
我们都知道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; // 获取鼠标开始拖动时的坐标
// ...
});
鼠标样式:
拖动时(绑定mousemove事件),
通过
event
获取坐标来更新这个
div
或图片
left
属性。
cursor: col-resize
<pre name="code" class="javascript">$('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循环创建<tr>比较方便,而且我项目中有恰好安装了angular包。
<html>
<head>
<title>table表头固定以及列宽可调</title>
<meta charset="utf-8">
<style>
th {
width: 200px;
border-bottom: 1px solid #ddd;
}
td {
width: 200px;
border-bottom: 1px solid #ddd;
}
.table-col-resize {
cursor: col-resize;
}
.col-div {
text-overflow: ellipsis !important;
overflow: hidden;
white-space: nowrap;
width: 197px;
}
.col-scaleplate {
position: absolute;
width: 4px;
height: 100%;
background-color: rgb(171, 171, 171);
top: 0;
left: -66px;
}
.no-select {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
</style>
<body ng-app="app" ng-controller="tableController">
<div style="width: 830px; background-color: #f5f5f5; position: relative;" class="first-table">
<table>
<tr>
<th>Col1<span style="float: right;" class="table-col-resize">|</span></th>
<th>Col2<span style="float: right;" class="table-col-resize">|</span></th>
<th>Col3<span style="float: right;" class="table-col-resize">|</span></th>
<th>Col4<span style="float: right;" class="table-col-resize">|</span></th>
</tr>
</table>
<div style="overflow-y: auto;height: 400px; width: 830px;" class="second-table">
<table>
<tr ng-repeat="row in datas track by $index">
<td ng-repeat="unit in row">
<div class="col-div">
<span>{{unit}}</span>
</div>
</td>
</tr>
</table>
</div>
<div class="col-scaleplate"></div>
</div>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/jQuery/dist/jquery.min.js"></script>
<script>
var myApp = angular.module('app', []).controller('tableController', function($scope) {
// 清除文本选中状态
var clearTxtSelect= "getSelection" in window ? function(){
window.getSelection().removeAllRanges();
} : function(){
document.selection.empty();
};
// 构建表格数据
var words = ['a','b','c','d','e','f','是','啥','将','月','天','明','r','l','e','一','双','人','将'];
$scope.datas = [];
for (var i = 0; i < 20; i++) {
var row = [];
for (var j = 0; j < 4; j++) {
var unit = words[parseInt(Math.random() * words.length)];
for (var k = 0; k < parseInt(Math.random() * 80); k++) {
unit += words[parseInt(Math.random() * words.length)];
}
row.push(unit);
}
$scope.datas.push(row);
}
// 调整列宽
var i = -1;
$('th').each(function() {
$('.table-col-resize').eq(++i).bind('mousedown', {colNum: i}, function(e) {
var $thDom = $(e.currentTarget).parent('th');
$scope.originalPos = e.pageX;
$('.col-scaleplate').css('left', e.pageX - 8 + 'px');
// 当前第几列 (从0开始)
$scope.currentColNum = e.data.colNum;
// 为body添加mousemove绑定
$('body').bind('mousemove', function(e) {
clearTxtSelect();
$('.col-scaleplate').css('left', e.pageX - 8 + 'px');
});
// 为body添加mouseup绑定
$('body').bind('mouseup', function(e) {
$('.col-scaleplate').css('left', '-40px'); // 将标尺div移出视线
$scope.targetPos = e.pageX;
// 取消body的mousemove和mouseup绑定
jQuery(this).unbind('mousemove').unbind('mouseup');
// 计算鼠标移动的距离
console.log($scope.targetPos - $scope.originalPos); //TODO del
var distance = $scope.targetPos - $scope.originalPos;
// 设置两个table的列宽
$thDom.width($thDom.width() + distance);
$('tr').each(function() {
var $tdDom = $(this).find('td').eq($scope.currentColNum).find('>div');
$tdDom.width($tdDom.width() + distance);
});
// 设置两个表格的总宽度
$('.first-table').width($('.first-table').width() + distance);
$('.second-table').width($('.second-table').width() + distance);
clearTxtSelect();
});
});
});
});
</script>
</body>
</html>