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

最新推荐文章于 2024-06-06 17:14:11 发布

Gemu

最新推荐文章于 2024-06-06 17:14:11 发布

阅读量9.2k

点赞数 1

分类专栏： JS 文章标签： table 表头固定列宽可调 title固定

本文链接：https://blog.csdn.net/gemuandyou/article/details/50557144

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

表头固定

我们都知道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 属性。

<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>

Gemu

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
设计表头固定并且列宽可调整的Table表格

表头固定我们都知道HTML中table的thead是会随着tbody滚动的。所以要实现tbody内容滚动，而表头固定就需要用两个table来显示，一个显示只用于表头，另一个用于显示tbody内容。表格列宽调整添加一个图标或者div，作为拖动的标尺，当触发左键事件时（绑定mousedown事件），获取鼠标当前X坐标并设置鼠标样式。$('.table-col-resize').eq(+
复制链接

扫一扫