Angular ui-grid выбор всех под группировкой

https://jsfiddle.net/4byyuqtc/1/

введите описание изображения здесь

Я ищу, чтобы ui-сетка выбирала все "дети" под группировкой, когда выбрана линия группировки. В этом случае Kit Kat (1), Mr. Goodbar (1), Krackel (2) и в конечном счете выбирают фактические записи (не жирные строки). Можно было бы ожидать, что при выборе родителя в группе все его дети также будут выбраны.

В настоящее время, когда вы выбираете 1 группу над фактическими записями в данных (не жирные строки), она выбирает эти фактические записи со следующим кодом:

$scope.gridApi.selection.on.rowSelectionChanged($scope, function (rowChanged) {
    console.log(rowChanged.treeLevel);
    if (typeof (rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
        // this is a group header
        children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
        console.log(children);
        children.forEach(function (child) {
            if (rowChanged.isSelected) {
                $scope.gridApi.selection.selectRow(child.entity);
            } else {
                $scope.gridApi.selection.unSelectRow(child.entity);
            }
        });
    }
});

На этом этапе я не достаточно опытен с помощью ui-grid, чтобы выяснить, как циклически перемещать дочерние элементы выбранной строки и выбирать все из них.

[EDIT]

При использовании кода Paul ниже он не выбирает группы, но ближе. Этот снимок экрана - это выбор первой записи 337. Обратите внимание, что он выбирает эту запись и все младшие дочерние записи (что хорошо, потому что в конечном итоге это те, которые имеют значение), но визуально сгруппированные записи (группа MFG и элемент Desc) не выбраны и должны быть такими, какие пользователь не будет когда-либо открывайте самые низкие записи данных, чтобы они могли видеть выбранные группы.

введите описание изображения здесь

ОТВЕТЫ

Ответ 1

Я проверил документацию, и я не думаю, что существует какой-либо открытый API-метод. Вы можете рекурсивно выбирать/отменить выбор строк в качестве решения. Попробуйте пример ниже.

$scope.gridApi.selection.on.rowSelectionChanged($scope, function (rowChanged) {
                    console.log(rowChanged.treeLevel);
                    if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
                        var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
                        selectChildren(children, rowChanged.isSelected);
                    }
                });

function selectChildren(gridRows, selected) {
                        if (gridRows && gridRows.length > 0) {
                            gridRows.forEach(function (child) {
                                if (selected) {
                                    $scope.gridApi.selection.selectRow(child.entity);
                                } else {
                                    $scope.gridApi.selection.unSelectRow(child.entity);
                                }

                                var children = $scope.gridApi.treeBase.getRowChildren(child);
                                selectChildren(children, selected); //recursively select/de-select children
                            });
                        }
                    }

Здесь рабочий Plunkr: http://plnkr.co/edit/XsoEUncuigj9Cad1vP5E?p=preview

Обработка автоматического отбраковки немного сложнее, хотя кажется, что api не справляется с этим очень хорошо.

UPDATE

Итак, я проверил jsFiddle, которым вы поделились, и сумел заставить его работать с небольшой настройкой.

Я изменил selectionHandler на следующее:

onRegisterApi: function(gridApi) {
  $scope.gridApi = gridApi;
  $scope.gridApi.selection.on.rowSelectionChanged($scope, function(rowChanged) {
    if (rowChanged.treeNode.parentRow) { //Added this parent row selection
        rowChanged.treeNode.parentRow.setSelected(rowChanged.isSelected);
    }
    console.log(rowChanged.treeLevel);
    if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
      var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
      selectChildren(children, rowChanged.isSelected);
    }
  });

Обратитесь к этой вилке своего кода: https://jsfiddle.net/1eg5v77w/

Недостатком этого является то, что если вы выберете запись низкого уровня (один без детей), он все равно выберет своего родителя. Если вы действительно хотите, чтобы это сработало, вам придется получить доступ к DOM и сделать некоторые уродливые проверки.

$scope.gridApi.selection.on.rowSelectionChanged($scope, function(rowChanged, $event) {
        var wasHeaderRowClicked = true;
        try {   //This can be written more beautifully if you used jQuery. But I would still be against it as it relies on the class of the ui-grid never changing when you update your ui-grid version.
          wasHeaderRowClicked = $event
          .srcElement
          .parentElement
          .parentElement
          .parentElement
          .previousElementSibling
          .firstChild
          .firstChild
          .firstChild
          .getAttribute('class') === 'ui-grid-icon-minus-squared';
        } catch(err) { console.log('Couldnt determine if header row was clicked'); }
        if (rowChanged.treeNode.parentRow && wasHeaderRowClicked) {
            rowChanged.treeNode.parentRow.setSelected(rowChanged.isSelected);
        }
        console.log(rowChanged.treeLevel);
        if (typeof(rowChanged.treeLevel) !== 'undefined' && rowChanged.treeLevel > -1) {
          var children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
          selectChildren(children, rowChanged.isSelected);
        }
      });

Вот скрипка: https://jsfiddle.net/Lf8p7Luk/1/

Я также хотел бы добавить, благодаря этому сообщению , что согласно пользовательскому интерфейсу -Grid documentation: Строки заголовка группы не могут быть отредактированы, и если вы используете функцию выбора, выбрать нельзя. Однако они могут быть экспортированы.

Так что это намеренно, что так сложно заставить это работать, потому что это не предполагаемый дизайн. Моя рекомендация состояла в том, чтобы изменить вашу логику либо использовать уровни деревьев, либо обойти логику выбора, потому что хотя моя вилка в настоящее время выбирает все, вы, скорее всего, столкнетесь с другими проблемами в будущем. Например: я не мог получить автоматический отбор для работы в сетке при нажатии на другой заголовок группы.