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

来源：互联网发布：计算器编程编辑：程序博客网时间：2024/05/22 14:50

表头固定

我们都知道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 delvar 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>

0 0