Как заставить сетку Angular ui изначально расширять строки на основе данных?

Я использую ui-grid, чтобы показать список данных, и при отображении сетки я пытаюсь расширить некоторые из строки в зависимости от данных.

Я пытаюсь сделать это в событии onRegisterApi:

scope.GridOptions = {
    data: properties,
    columnDefs: 
    [
        { name: "Full Address", field: "FullAddress" },
        { name: "Suburb", field: "Suburb" },
        { name: "Property Type", field: "PropertyType" },
        { name: "Price", field: "Price", cellFilter: 'currency'},
        { name: "Status", field: "Status" },
        { name: "Sale Type", field: "SaleType" }, 
        { name: "Date Created", field: "CreateDate", cellFilter: "date:'dd/MM/yyyy HH:mma'"}
    ],
    expandableRowTemplate: 'template.html',
    expandableRowHeight: 200,
    onRegisterApi: (gridApi) => 
    {
        gridApi.expandable.expandAllRows();
    }
};

Проблема в том, что gridApi.expandable.expandAllRows() расширяет все сгруппированные разделы. Я вижу, что есть функция expandRow , но я не знаю, как использовать его вместо expandAllRows. Я действительно хотел бы расширить группу, в которой для столбца Status установлено определенное значение. Может ли кто-нибудь помочь мне понять это?


javascript angularjs angular-ui-grid
person Eric    schedule 06.11.2015    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Вот способ справиться с расширением выборочных строк. Я создал ссылку Plunker (http://plnkr.co/edit/CSaROQqKxYnkoxm2Tl6b?p=preview), где я расширяю все четные строки. Аналогичным образом вы можете перебирать массив и расширять нужные строки.

Включить:
зависимость "$timeout" в контроллере

Чтобы развернуть первую строку:

$timeout(function() {
    var rows = $scope.gridApi.grid.rows;
    var entity = (rows.length && rows[0]) ? rows[0].entity : null;
    $scope.gridApi.expandable.toggleRowExpansion(entity);
  });
person SaiGiridhar    schedule 06.11.2015
comment
Хороший ответ. Это помогло мне понять, куда мне нужно перейти в моем коде, но не проверяет существующие значения данных каждой строки. Можете ли вы обновить свой ответ, чтобы включить это? Кроме того, почему вы использовали функцию $timeout? - person Eric; 06.11.2015
comment
Что вы подразумеваете под существующими ценностями? Я понимал их как значения, которые находятся в массиве на момент рендеринга таблицы. - person SaiGiridhar; 06.11.2015
comment
Да, это именно то, что я ищу. В вашем примере используется индекс и нет данных из модели. - person Eric; 06.11.2015
comment
Ваши данные — это не что иное, как строки. Вы можете получить доступ к содержимому каждой строки, используя rows[i].entity.name, rows[i].entity.phone и т. д. - person SaiGiridhar; 07.11.2015
comment
это дает мне эту ошибку: cnl.ctrl.js:74 Uncaught TypeError: Cannot read property 'toggleRowExpansion' of undefined - person Ankit Sahu; 12.07.2016
comment
Я предполагаю, что вы пропустили включение модуля «ui.grid.expandable» - person SaiGiridhar; 13.01.2017
comment
Большое спасибо, вы сэкономили мое время. - person user1892203; 25.10.2017
comment
Когда я нажимаю «Развернуть все», он работает неправильно. Он показывает пустые строки. Это проблема виртуализации? любые решения? - person user636525; 13.06.2019

arrow_upward
0
arrow_downward

Может я опаздываю с ответом. Но это может помочь другим.

Я взял тот же пример plunker, что и SaiGiridhar, но изменил

$timeout(function() {
    var rows = $scope.gridApi.grid.rows;
    for(var i=0; i < rows.length; i++){
      if(i%2 === 0){
        var entity = (rows.length && rows[i]) ? rows[i].entity : null;
        $scope.gridApi.expandable.toggleRowExpansion(entity);
      }
    }
});

to

$scope.$$postDigest(function() {
    var rows = $scope.gridApi.grid.rows;
    for(var i=0; i < rows.length; i++){
      if(i%2 === 0){
        var entity = (rows.length && rows[i]) ? rows[i].entity : null;
        $scope.gridApi.expandable.toggleRowExpansion(entity);
      }
    }
});
person Romesh    schedule 28.12.2015
comment
В чем преимущество использования $$postDigest? - person Eric; 28.12.2015