맞춤 선택 모델과 맞춤 확인란 선택 플러그인으로 매끄러운 그리드를 구현했습니다. 또한 최상위 수준에서 선택을 전환 할 수 있도록 그룹 수준 확인란을 추가했습니다. 내 요구 사항 중 하나는 축소 된 그룹화를 여전히 부모 수준 그룹화 확인란을 통해 선택할 수 있다는 것입니다.
내 걸림돌은 현재 그룹에 표시되지 않는 행을 선택하는 방법을 알 수없는 것 같습니다. 매끄러운 그리드는 시각적으로 선택된 항목 세트를 유지하고 그리드 데이터보기는 선택된 항목의 전체 세트를 표시하거나 유지하지 않습니다. 그러나 축소 된 행의 그룹 확인란을 클릭 할 때 데이터로 파이프하는 방법을 알 수 없습니다.
그리드를 다음과 같이 구성하고 있습니다.
let checkboxSelectionModel = new Slick.CheckboxSelectionModel();
this.grid.setSelectionModel(checkboxSelectionModel);
this.grid.registerPlugin(new Slick.Data.GroupItemMetadataProvider());
let onSelectedRowIdsChanged = this.dataProvider.syncGridSelection(this.grid, true, true);
onSelectedRowIdsChanged.subscribe(
function(e: any, args: any)
{
//business logic stuff
}
);
let groupedCheckboxSelector = new Slick.GroupedCheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel",
onSelectedRowIdsChangedHandler: onSelectedRowIdsChanged
});
let columns = this.grid.getColumns();
columns.unshift(groupedCheckboxSelector.getColumnDefinition());
this.grid.setColumns(columns);
this.grid.registerPlugin(groupedCheckboxSelector);
여기에 포함하는 데 시간이 너무 오래, 사용자 정의 플러그인에 GIST
당신이 라인을 보면, 특히 57
의 slick.checkboxselectionmodel
:
$.each(dataItem.rows, function(index, groupRow) {
var groupRowIndex = _self._grid.getData().getRowById(groupRow.id);
if (groupRowIndex) {
selection.push(groupRowIndex);
}
});
숨겨진 행에 대해 groupRowIndex는 분석되지 않으므로 선택되지 않습니다. 클릭 할 때 그룹을 확장하려고 시도한 다음 행을 해결했지만 작동하지만 그룹이 축소되면 그리드에서 잘못된 행이 선택됩니다.
어떤 도움이라도 대단히 감사하겠습니다!
몇 가지 참고 사항 :
- 행을 선택하고 그룹을 축소해도 항목은 선택을 유지합니다.
- 그룹 선택의 기능이 동일하게 구현되지 않은 매끄러운 그리드의 다른 분기가 있습니다.
답변
내가 확신하는 기능적 솔루션은 비슷한 행동을 원하는 사람을 올바른 길에 놓을 수는 있지만 이러한 플러그인 중 어느 것이 독립적으로 작동하는지 잘 모르겠습니다. 내 요구 사항 중 하나는 행 확인란을 통해 행 선택 만 허용하는 것이 었습니다.
한 가지 문제는 (쉽게 향상되었다고 확신합니다) 그룹 수준 확인란을 여전히 그룹 형식 연산자로 정의해야한다는 것입니다
내 문제의 주요 해결책은 그룹 수준 선택 / 선택 취소를 할 때 축소 된 모든 그룹을 확장하고 선택 / 선택 취소 루틴을 수행 한 다음 이전에 확장 된 그룹을 축소하는 것입니다
편집하다:
그리드에 많은 양의 데이터 (10k 행)가 있으면 실패합니다. 현상금으로 다시 열기.
많은 그룹이 문제를 일으키는 확장 및 축소의 성능 저하처럼 보입니다.