Question

我使用ng-table显示一些信息。我想固定ng-table的页眉和页脚，并强制ng-table在行中绘制滚动条。

ng-table文档站点没有关于如何实现这一目标的文档。

有什么想法吗？

Answer 1

这个仅限CSS的解决方案对我有用。只需将类<?php if($_SERVER['REQUEST_METHOD'] == 'POST'){ //ASSIGN TO VARIABLES - HOLDERS $userEmail = $_POST['emailAddress']; $userPass = $_POST['password']; require('dbConnect.php'); //SQLI STATEMENT - GET SPECIFIC DATA $SQLi_LOGIN = "SELECT uniqueID, userType, FirstName, LastName, Gender, Birthday, Occupation, EmailAddress, Password ,DateRegister, UserOrgJoined, UserFriends, volunteeredTotal FROM useryayong WHERE EmailAddress = ? AND Password = ?"; $statement = mysqli_prepare($dbConnect,$SQLi_LOGIN); mysqli_stmt_bind_param($statement, "ss", $userEmail,$userPass); mysqli_stmt_execute($statement) or die("Error:".mysqli_error($dbConnect)); mysqli_stmt_store_result($results = $statement); mysqli_stmt_bind_result($statement, $colUniqueId, $colUserType, $colFirstName,$colLastName, $colGender, $colBirthday,$colOccupation,$colEmail, $colPassword, $colDateRegister,$colUserOrgJoined,$colUserFriends, $colVolunteer); //$recordSearch = mysqli_query($dbConnect, $SQLi_LOGIN) or die("Error".mysqli_error($dbConnect)); $recordFound = array(); $recordFound["success"] = false; while(mysqli_stmt_fetch($results)){ $recordFound["success"] = true; $recordFound = $_POST["uniqueID"] = $colUniqueId; $recordFound = $_POST["userDefaultType"] = $colUserType; $recordFound = $_POST["userFirstName"] = $colFirstName; $recordFound = $_POST["userLastName"] = $colLastName; $recordFound = $_POST["userGender"] = $colGender; $recordFound = $_POST["userBirthdate"] = $colBirthday; $recordFound = $_POST["userOccupation"] = $colOccupation; $recordFound = $_POST["userDateRegister"] = $colDateRegister; $recordFound = $_POST["UserOrgNoJoined"] = $colUserOrgJoined; $recordFound = $_POST["UserNoFriends"] = $colUserFriends; $recordFound = $_POST["volunteeredTotalNo"] = $colVolunteer; } echo json_encode($recordFound);}添加到表元素和以下CSS：

table-scroll

Answer 2

这是迄今为止我发现的最可靠的解决方案。在决定使用jQuery插件之前，我已经看了几个小时。在我使用的插件版本中，我们可以将标头粘贴到可滚动的容器中。使用ng-table查看此plunker的用例：

http://plnkr.co/edit/ypBaDHIfaJWapXVs3jcU?p=preview

Javascript

app.directive('fixedTableHeaders', ['$timeout', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $timeout(function() {
          var container = element.parentsUntil(attrs.fixedTableHeaders);
          element.stickyTableHeaders({ scrollableArea: container, "fixedOffset": 2 });
      }, 0);
    }
  }
}]);

HTML

<div id="scrollable-area">
      <table ng-table="tableParams" fixed-table-headers="scrollable-area">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'">{{user.name}}</td>
            <td data-title="'Age'">{{user.age}}</td>
        </tr>
      </table>
</div>

CSS

#scrollable-area {
    height: 150px;
    overflow-y: scroll; /* <-- here is what is important*/
}
table {
  width: 100%;
}
thead {
    background: #fff;
}

Answer 3

我不知道页脚，但我对标题有类似的要求。

这是在@ Github之前要求的：https://github.com/esvit/ng-table/issues/41

我使用jquery插件（https://github.com/jmosbech/StickyTableHeaders）创建了自己的实现。

这里有一个plunkr：http://plnkr.co/edit/KyilXo?p=preview

基本上我们只是在指令data-fixed-table-headers中调用插件数据何时呈现。

angular.module('main').directive('fixedTableHeaders', ['$timeout', fixedTableHeaders]);

    function fixedTableHeaders($timeout) {
        return {
            restrict: 'A',
            link: link
        };

        function link(scope, element, attrs) {

            $timeout(function () {
              element.stickyTableHeaders();
                    }, 0);
        }
    }

AngularJS ng-table固定标头

3 个答案: