設計表頭固定並且列寬可調整的Table表格
阿新 • • 發佈：2019-01-06
<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>