kjn4345
commented
1 year ago 해결하였는데 원인은 부모-자식 간의 데이터를 단순히 _children만 유지하면 안되고 실제로 rowKey 프로퍼티까지 순차적으로 입력되어야 하네요..
자세히 말씀드리자면, DB에서 조회해서 데이터를 가져올 경우에는 아예 부모 밑에 자식ROW를 맞춰서 조회해야하며, 그 상태로 VIEW로 가져와서 _children로 자식 노드를 감싸 재구성해야 하네요.
javascript에서 데이터를 맞출 경우 rowNum 프로퍼티까지 맞춰야 정상적으로 조회되네요..;;;
이런 중요한 것을 toast grid 메뉴얼에도 없고 어디에도 없다니... 단순히 데이터 예제만 나와있고.. 기가 차네요
IDKNWHORU
YoungHoonZo
안녕하십니까. Toast Grid Tree 데이터를 구성할 때 예제에 나와 있는 것 같이 _children 프로퍼티를 사용하여 부모-자식 형태의 데이터를 구성하였고 하물며 _attributes.tree.parentRowKey를 전부다 맞게 넣어줬고 _attributes.tree.childRowKeys에 자식 노드의 rowKey도 정상적으로 넣어줬음에도 불구하고 정상적으로 조회되지 않아서 질문 드립니다. 이외에 또 맞춰야 하는 것들이 있을까요??
실제로 Toast Grid Tree를 실무에서 사용하셨던 분의 자세한 답변 부탁드립니다. 상세 내용은 아래와 같습니다.
// 데이터 초기화 var gridData = [ { mngrMenuId: '1', mngrPmenuId: 'ROOT', mngrMenuDepth: '0', col1: 'Root row1', col2: 'Root row1', col3: 'Root row1', maxLen : "2"}, { mngrMenuId: '2', mngrPmenuId: '1', mngrMenuDepth: '1', col1: 'Sub row1', col2: 'Sub row1', col3: 'Sub row1', maxLen : "2"}, { mngrMenuId: '3', mngrPmenuId: '1', mngrMenuDepth: '1', col1: 'Sub row2', col2: 'Sub row2', col3: 'Sub row2', maxLen : "2"}, { mngrMenuId: '4', mngrPmenuId: '1', mngrMenuDepth: '1', col1: 'Sub row3', col2: 'Sub row3', col3: 'Sub row3', maxLen : "2"}, { mngrMenuId: '5', mngrPmenuId: '2', mngrMenuDepth: '2', col1: 'leaf row1', col2: 'leaf row1', col3: 'leaf row1', maxLen : "2"}, { mngrMenuId: '6', mngrPmenuId: '2', mngrMenuDepth: '2', col1: 'leaf row2', col2: 'leaf row2', col3: 'leaf row2', maxLen : "2"} ];
// /tree 데이터 구성 var jLastArray = new Array(); for (var i = orgData[0].maxLen; i > -1; i--) { var jSubArray = new Array(); if (i == orgData[0].maxLen) { // leaf node for (var j = 0; j < orgData.length; j++) { if (orgData[0].maxLen == orgData[j].mngrMenuDepth) { jLastArray.push(orgData[j]); } } } else { for (var k = 0; k < orgData.length; k++) { if (i == orgData[k].mngrMenuDepth) { for (var l = 0; l < jLastArray.length; l++) { var mngrMenuId = orgData[k].mngrMenuId; var cnt = 0; for (var m = 0; m < jSubArray.length; m++) { if (mngrMenuId == jSubArray[m].mngrMenuId) { cnt++; } } if (mngrMenuId == jLastArray[l].mngrPmenuId) { if (cnt == 0) { jSubArray.push(orgData[k]); } jSubArray[jSubArray.length - 1]._children.push(jLastArray[l]); jSubArray[jSubArray.length - 1]._attributes.tree.childRowKeys.push(jLastArray[l].rowKey); jSubArray[jSubArray.length - 1]._leaf = false; } else { if (cnt == 0) { jSubArray.push(orgData[k]); jSubArray[jSubArray.length - 1]._attributes.tree.childRowKeys.push(orgData[k].rowKey); jSubArray[jSubArray.length - 1]._leaf = false; } } } } } jLastArray = jSubArray; } }
// Toast Grid 생성 const grid = new tui.Grid({ el: document.getElementById('toastGrid'), // 생성할 element 설정. data: gridData, editingEvent: 'click', bodyHeight: 600, rowHeaders: ['checkbox'], pageOptions: { useClient: true, perPage: 10 }, scrollX: true, scrollY: true, minRowHeight: 20, treeColumnOptions: { name: 'col1', useCascadingCheckbox: true }, columns: [ { header: 'mngrMenuId', name: 'mngrMenuId', hidden: 1 }, { header: 'mngrPmenuId', name: 'mngrPmenuId', hidden: 1 }, { header: 'mngrMenuDepth', name: 'mngrMenuDepth', hidden: 1 }, { header: 'col1', name: 'col1' }, { header: 'col2', name: 'col2' }, { header: 'col3', name: 'col3' }, { header: 'cellButton', name: 'cellButton', align: "center", renderer: { type: CustomButtonRenderer, options: { width: 90, height: 20 } } } ] });
// 데이터 형태