PureJS TreeGrid인 경우 Selector 제어 및 스타일처리
페이지 정보
작성자 지수 작성일 2024-04-12 16:55 조회 54회 댓글 1건본문
관련링크
안녕하세요
TreeGrid + Selector를 이용하는 중 궁금한 점이 있어 문의드립니다.
1. 자식노드가 한개인 경우 자식노드 선택 시 부모노드 체크박스가 checked 된 것으로 보이는데 이것을 indeterminate로 보이게 하는 방법 문의드립니다.
=> 아래 데모페이지에서 샘플코드로 넣어서 테스트 진행했습니다.
2행체크박스(check1) 클릭 시 1행체크박스(Jack Smith)도 함께 checked 된 것처럼 보이지만 실제 Selector로 확인해보면 선택되지 않았습니다
이때 선택되지 않았지만 모든 자식노드가 선택된 부모 노드의 체크박스를 아래 이미지와 같이 indeterminate 형태로 보이게 하고싶습니다
- 데모페이지: https://demo.mescius.co.kr/wijmo/learn-wijmo/Grid/TreeGrid/EditableTreeGrid
- 샘플코드:
import 'bootstrap.css'; import '@grapecity/wijmo.styles/wijmo.css'; import './styles.css'; import * as wjGrid from '@grapecity/wijmo.grid'; import { Selector } from '@grapecity/wijmo.grid.selector'; // document.readyState === 'complete' ? init() : window.onload = init; // function init() { // // workers tree data (heterogeneous collection) var workers = [{ name: 'Jack Smith', checks: [{ name: 'check1', earnings: [ { name: 'hourly', hours: 30.0, rate: 15.0 }, { name: 'overtime', hours: 10.0, rate: 20.0 }, { name: 'bonus', hours: 5.0, rate: 30.0 } ] }] }]; // // workers tree var workersGrid = new wjGrid.FlexGrid('#workersGrid', { headersVisibility: 'Column', selectionMode: 'Row', childItemsPath: ['checks', 'earnings'], autoGenerateColumns: false, columns: [ { binding: 'name', isReadOnly: true }, { binding: 'hours', dataType: 'Number', format: 'n2' }, { binding: 'rate', dataType: 'Number', format: 'n2' } ], loadedRows: function (s, e) { s.rows.forEach(function (row) { row.isReadOnly = false; }); }, beginningEdit: function (s, e) { var item = s.rows[e.row].dataItem, binding = s.columns[e.col].binding; if (!(binding in item)) { // property not on this item? e.cancel = true; // can't edit! } }, itemsSource: workers }); let selector = new Selector(workersGrid, { itemChecked: (s, e) => { console.log('checked -> ', s._grid.rows.filter(o => o.isSelected)); } }); selector.column = workersGrid.rowHeaders.columns[0]; workersGrid.headersVisibility = wjGrid.HeadersVisibility.All; }
2. 부모-자식노드 체크박스 연결 해제하는 방법
=> 자식노드의 체크박스가 모두 선택되면 부모노드의 체크박스가 자동으로 선택되는데,
이를 자식노드 선택여부와 상관없이 수동으로 체크박스를 클릭했을때 선택되도록 할 수 있을까요?
도움주셔서 감사합니다