Toast Grid Tree 조회데이터 문의

Question

안녕하세요.Toast Grid 내에 Tree로 데이터를 조회하려고 합니다.그런데 이상하게도 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 } } } ] });조회 데이터 구성을 아래와 같이 하였을 경우에는 정상적으로 동작을 합니다.var gridData = [ { mngrMenuId: '1', mngrPmenuId: 'ROOT', mngrMenuDepth: '0', col1: 'Root row1', col2: 'Root row1', col3: 'Root row1', maxLen : "2", _children: [ { 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", _children: [ { mngrMenuId: '4', mngrPmenuId: '3', mngrMenuDepth: '2', col1: 'leaf row1', col2: 'leaf row1', col3: 'leaf row1', maxLen : "2" } ] } ], }, { mngrMenuId: '1', mngrPmenuId: 'ROOT', mngrMenuDepth: '0', col1: 'Root row2', col2: 'Root row2', col3: 'Root row2', maxLen : "2", _children: [ { 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", _children: [ { mngrMenuId: '4', mngrPmenuId: '3', mngrMenuDepth: '2', col1: 'leaf row1', col2: 'leaf row1', col3: 'leaf row1', maxLen : "2" } ] } ] } ];그러나 아래와 같이 하여 treeDataSetting 함수를 통해 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 데이터 형식에 맞게 셋팅합니다. 구성할 때 메뉴 뎁스별로 제일 마지막 뎁스부터 상위 뎁스로 올라가면서 추가하는 형식으로 되어 있습니다. //tree 데이터 구성 treeDataSetting = function(orgData){ /* var jLastArray = new Array(); for (var i = orgData[0].maxLen; i > -1; i--) { var jSubArray = new Array(); for (var j = 0; j < orgData.length; j++) { if (i == orgData[j].mngrMenuDepth) { jLastArray.push(orgData[j]); if (i != orgData[0].maxLen) { jSubArray[jSubArray.length - 1]._children.push(jLastArray[l]); } } } jLastArray = jSubArray; } */ 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 mngrPmenuId = orgData[k].mngrPmenuId; 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]._leaf = false; } else { if (cnt == 0) { jSubArray.push(orgData[k]); jSubArray[jSubArray.length - 1]._leaf = false; } } } } } jLastArray = jSubArray; } } return jLastArray; };도대체 무엇이 문제인지 좀 알려주시면 감사하겠습니다.자세한 설명 부탁드립니다.

-ChatGPT- · Answer

데이터 구성에서 보이지 않는 부분이 있어서 정확한 원인 파악이 어렵습니다만, 일반적으로 Tree 구조를 Toast Grid에 렌더링할 때는 데이터를 _children 프로퍼티를 사용하여 부모-자식 관계로 구성해야 합니다. 그리드 셋팅에서도 treeColumnOptions 옵션에 name 속성을 설정하여 Tree 구조로 보여줄 열을 지정해야 합니다.먼저, 데이터 구성에서 _children 프로퍼티를 추가하여 부모-자식 관계로 데이터를 구성해보세요. 예를 들어, 아래와 같이 구성할 수 있습니다.var gridData = [ { id: '1', name: 'Root row1', _children: [ { id: '2', name: 'Sub row1' }, { id: '3', name: 'Sub row2', _children: [ { id: '4', name: 'leaf row1' } ]}, { id: '5', name: 'Sub row3' } ]}, { id: '6', name: 'Root row2', _children: [ { id: '7', name: 'Sub row4' }, { id: '8', name: 'Sub row5' } ]} ];그리고 그리드 셋팅에서 treeColumnOptions 옵션의 name 속성을 'name'으로 지정하여 데이터의 name 프로퍼티를 사용하여 Tree 구조로 보여줄 열을 지정해주세요. 그 외에는 위에서 작성한 코드와 동일합니다.const grid = new tui.Grid({ el: document.getElementById('toastGrid'), data: gridData, editingEvent: 'click', bodyHeight: 600, rowHeaders: ['checkbox'], pageOptions: { useClient: true, perPage: 10 }, scrollX: true, scrollY: true, minRowHeight: 20, treeColumnOptions: { name: 'name', useCascadingCheckbox: true }, columns: [ { header: 'id', name: 'id', hidden: 1 }, { header: 'name', name: 'name' }, { header: 'cellButton', name: 'cellButton', align: "center", renderer: { type: CustomButtonRenderer, options: { width: 90, height: 20 } } } ] });위와 같이 수정하고 실행해보시면 원하는 Tree 구조가 그리드에 출력될 것입니다.-ChatGPT-

kjn4345 · Answer

treeColumnOptions 과 _children 프로퍼티 안에 자식을 넣어 부모 자식간의 상태를 만드는 것은 알고 있고 위 데이터를 그대로 넣고 돌리시면 정상적으로 만들어 집니다. 그럼에도 불구하고 정상 동작하지 않습니다.두번째로 나오는 gridData를 treeDataSetting 함수의 파라미터로 던지시고 생성된 json array를 생성된 toast grid에 넣어보시면 알 수 있을 것 같습니다.데이터 구성을 이미지로 보여드리면 아래와 같습니다.그리고 json array에 _attributes.tree.parentRowKey까지 일일히 맞춰서 입력 해줘야 하는 건가요??

kjn4345 · Answer

해결하였는데 원인은 부모-자식 간의 데이터를 단순히 _children만 유지하면 안되고 실제로 rowKey 프로퍼티까지 순차적으로 입력되어야 하네요.. 자세히 말씀드리자면, DB에서 조회해서 데이터를 가져올 경우에는 아예 부모 밑에 자식ROW를 맞춰서 조회해야하며, 그 상태로 VIEW로 가져와서 _children로 자식 노드를 감싸 재구성해야 하네요.이런 중요한 것을 toast grid 메뉴얼에도 없고 어디에도 없다니... 단순히 데이터 예제만 나와있고.. 기가 차네요

Toast Grid Tree 조회데이터 문의

3개의 답변

#toastgrid 목록