Изменение размера столбцов нижнего колонтитула в ng-grid

У меня небольшая проблема с AngularJS и ng-grid.

Я хочу добавить в нижний колонтитул строку, содержащую общие значения для каждого столбца. Используя шаблон нижнего колонтитула, мне удалось это сделать, пока все хорошо.

Есть ли способ изменить размер этих столбцов в зависимости от размера столбцов сетки? Или, по крайней мере, установить ширину строки в соответствии с шириной холста сетки?

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


css angularjs ng-grid
person Nick Tsitlakidis    schedule 05.05.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Используя CoulmnDefs и используя ту же ширину в шаблоне нижнего колонтитула.

    $scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    footerRowHeight:'30px',
    footerTemplate: '<div style="width: 20%; display: inline-block;">{{total1}}</div><div style="width: 60%; display: inline-block;">{{total2}}</div><div style="display: inline-block;">{{total3}}</div>',
    totalServerItems: 'totalServerItems',
    columnDefs: [{
      field: 'name',
      width: '20%'
    }, {
      field: 'allowance',
      width: '60%'
    }, {
      field: 'paid'
    }],
    pagingOptions: $scope.pagingOptions,
    filterOptions: $scope.filterOptions
    };

Это основано на старом Plunker, который я где-то нашел.

Если сетка становится слишком маленькой, это все равно сходит с ума. Попробуйте установить минимальную ширину для сетки в style.css или для столбцов в columnDefs и шаблоне нижнего колонтитула.

person mainguy    schedule 05.05.2014
comment
Это почти то же самое, что я делаю в данный момент. Проблема с этим подходом заключается в том, что если у вас есть прокручиваемая сетка со многими столбцами (что у меня есть), нижний колонтитул не прокручивается. - person Nick Tsitlakidis; 06.05.2014
comment
обратите внимание, свойство total1, показанное выше, вероятно, должно быть {{grid.appScope.total1}}, если вы привязываетесь к значению в своем контроллере. - person Damian Green; 28.07.2015