it-swarm.com.ru

Фиксированная таблица заголовков в AngularJS

Я застрял на проблеме, связанной с фиксированной таблицей заголовков. Я использую AngularJS & Bootstrap для создания веб-приложения. Я не могу использовать ng-grid, так как он не поддерживает IE7. Итак, я заполняю строки таблицы с помощью ng-repeat. Приложение отзывчиво . Поэтому я не могу дать фиксированную ширину ячейкам/заголовкам. Есть ли простой способ исправить заголовки таблицы?

Я поставил Plunker в Исправлена ​​таблица заголовков с AngularJS

Заранее спасибо.

12
Arnab Das

Недавно я создал для этого директиву, вы можете установить ее, используя bower:

bower install angu-fixed-header-table

Для получения более подробной информации и рабочего примера вы можете увидеть мой пост в блоге по адресу http://pointblankdevelopment.com.au/blog/angularjs-fixed-header-scrollable-table-directive

7
Jason

Я использовал предложение Кумара и создал две таблицы . Один содержит thead, а другой содержит и thead, и тело.

<div ng-style="{'margin-right': scrollBarWidth}">
    <table>
       <thead>
         <tr>
            <th width="{{tableSizes[0].width}}">Col0</th>
            <th width="{{tableSizes[1].width}}">Col1</th>
            <th width="{{tableSizes[2].width}}">Col2</th>
         </tr>
       </thead>
    </table>
 </div> 
 <div class="fixedHeadBody">
    <table ng-style="{'margin-top': -rowSize.height}">
       <thead>
         <tr el-size="rowSize">
           <th el-size="{{tableSizes[0].width}}">Col0</th>
           <th el-size="{{tableSizes[1].width}}">Col1</th>
           <th el-size="{{tableSizes[2].width}}">Col2</th>
         </tr>
       </thead>
       <tbody>
         <!-- data goes here -->
       </tbody>
    </table>
 </div>

Во второй части я добавил директиву (см. Ниже), которая следит за шириной и высотой каждого столбца. Выходные данные этих столбцов используются для установки ширины первого thead (угловая привязка). Я также добавил ту же директиву в thead tr второй таблицы и использовал значение высоты, чтобы скрыть прокручиваемый thead второй таблицы. Таким образом, я показываю только первую теаду, которая исправлена. 

Еще одна вещь, которую я должен был разобрать, была полоса прокрутки. Полоса прокрутки занимает место, и это смещает столбцы между первой и второй таблицей. Чтобы исправить это, я добавил в верхнюю таблицу поле margin-right, равное ширине полосы прокрутки (разница ширины между div, содержащим таблицу и таблицу). Ширина полосы прокрутки варьируется между браузерами, и последняя функция работает для любого браузера.

app.directive('elSize', ['$parse', '$timeout', function ($parse, $timeout) {
    return function(scope, elem, attrs) {
        var fn = $parse(attrs.elSize);

        scope.$watch(function () {
            return { width: elem.innerWidth(), height: elem.innerHeight() };
        },
        function (size) {
            fn.assign(scope, size);
        }, true);
    }
}])

Внутри контроллера вы можете установить scrollBarWidth с помощью функции ниже. Вы можете вызывать $ scope.setScrollBarWidth () из любого места после визуализации таблицы.

    $scope.scrollBarWidth = "5px";
    $scope.setScrollBarWidth = function () {
        $timeout(function () {
            var divWidth = $(".fixedHeadBody").width();
            var tableWidth = $(".fixedHeadBody table").width();
            var diff = divWidth - tableWidth;
            if (diff > 0) $scope.scrollBarWidth = diff + "px";
        }, 300);
    }
1
Mutai Victor

Вы можете использовать превосходную ag-Grid библиотеку.

agGrid.initialiseAgGridWithAngular1(angular); // https://www.ag-grid.com/best-angularjs-data-grid/index.php
angular.module('myApp', ['agGrid'])

Затем в вашем контроллере определите gridOptions (или другое имя переменной), например:

var nbCols = 10,
    nbLines = 300,
    list = [],
    cols = [],
    columnDefs = [],
    i, j;

for (i = 0 ; i < nbCols ; i++) {
    var fieldName = 'col' + i;
    cols.Push(fieldName);
    columnDefs.Push({
        headerName: 'Col' + i,
        field: fieldName,
        editable: true
    });
}
for (i = 0 ; i < nbLines ; i++) {
    var elem = {};
    for (j = 0 ; j < nbCols ; j++) {
        elem[cols[j]] = 'content '+i+'-'+j;
    }
    list.Push(elem);
}
$scope.list = list;
$scope.cols = cols;

$scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: list,
    singleClickEdit: true
};

И, наконец, определите свою таблицу следующим образом:

<div ag-grid="gridOptions" class="ag-fresh" style="height: 300px;"></div>
0
Anthony O.

Мы с коллегой только что выпустили новый проект GitHub, который предоставляет директиву Angular, которую вы можете использовать для украшения вашей таблицы с фиксированными заголовками: https://github.com/objectcomputing/FixedHeader

Эта реализация не так полнофункциональна, как некоторые другие реализации, но если вам нужно просто добавить фиксированные таблицы, мы думаем, что это может быть хорошим вариантом.

0
user3221325

Ну, сделал это грязным способом, используя $ watch и jQuery.

Просто продублируйте заголовок таблицы и сделайте его липким. Это не идеально, но это служит цели.

Вот скрипка: http://jsfiddle.net/jchnxu/w1n1fp97/7/

// watch the width of table headers
        scope.$watch(function() {
          return {
            width: $(th).innerWidth(),
            height: $(th).innerHeight()
          };
        }, function(size) {
          console.log(size);
          $($stickyThs[i]).attr('width', size.width);
        }, true);

// also watch the table width
      scope.$watch(function() {
        return $bodyTable.innerWidth();
      }, function(width) {
        $headerTable.css('width', width + 'px');
      }); 
0
jchnxu