Угловая ui-сетка выбирая все под группировку
https://jsfiddle.net/4byyuqtc/1/
Я смотрю, чтобы ui-grid выделил все "потомки" под группировкой, когда выделена линия группировки. В этом случае 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);
}
});
}
});
На данный момент я недостаточно опытен с пользовательским интерфейсом, чтобы выяснить, как прокручивать дочерние элементы выбранной строки и выбирать все из них.
[РЕДАКТИРОВАТЬ]
С кодом Пола ниже он не выбирает группировки, но он ближе. На этом скриншоте я выбираю первую 337 запись. Обратите внимание, что он выбирает эту запись и все самые нижние дочерние записи (что хорошо, потому что в конечном счете это те, которые имеют значение), но визуально сгруппированные записи (MFG и Item Desc group) не выбраны и должны быть такими, как пользователь не будет всегда открывайте самые низкие записи данных, чтобы они могли видеть выбранные группы.
2 ответа
Я проверил документацию, и я не думаю, что есть какой-либо открытый метод 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 не очень хорошо справляется с этим.
ОБНОВИТЬ
Поэтому я проверил 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/
Я также хотел бы добавить, благодаря этому сообщению, что в соответствии с документацией UI-Grid: строки заголовка группы не могут быть отредактированы, и, если используется функция выбора, не могут быть выбраны. Однако они могут быть экспортированы.
Так что намеренно так сложно заставить это работать, потому что это не заданный дизайн. Я бы порекомендовал изменить вашу логику, чтобы использовать древовидные уровни или обойти логику выбора, потому что, хотя мой форк в настоящее время выбирает все, вы, скорее всего, столкнетесь с другими проблемами в будущем. Например: я не могу настроить автоматический отбор для работы в сетке, когда вы нажимаете на заголовок другой группы.
Если у вас все еще есть проблема, посмотрите на это..