트리 그리드에 사용되는 데이터의 순서만 다르고 내용은 서로 똑같은 2개의 데이터 셋인데 하나는 트리 그리드가 정상적으로 출력되는 반면 다른 하나는 오류가 나옵니다.
정상출력 데이터셋
[{"categoryId":{"categoryType":"01","categoryCode":"A"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"원자재","upperCategoryCode":null,"terminalYn":"N","orderNo":1,"csrSectorCode":"C02","eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A"},
{"categoryId":{"categoryType":"01","categoryCode":"A01"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"농산물","upperCategoryCode":"A","terminalYn":"N","orderNo":2,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A01"},
{"categoryId":{"categoryType":"01","categoryCode":"A0101"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"A0101","upperCategoryCode":"A01","terminalYn":"Y","orderNo":1,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A0101"},
{"categoryId":{"categoryType":"01","categoryCode":"A02"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"A02","upperCategoryCode":"A","terminalYn":"Y","orderNo":1,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A02"}
]
에러 데이터 셋
[{"categoryId":{"categoryType":"01","categoryCode":"A"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"원자재","upperCategoryCode":null,"terminalYn":"N","orderNo":1,"csrSectorCode":"C02","eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A"},
{"categoryId":{"categoryType":"01","categoryCode":"A0101"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"A0101","upperCategoryCode":"A01","terminalYn":"Y","orderNo":1,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A0101"},
{"categoryId":{"categoryType":"01","categoryCode":"A02"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"A02","upperCategoryCode":"A","terminalYn":"Y","orderNo":1,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A02"},
{"categoryId":{"categoryType":"01","categoryCode":"A01"},"categoryType":{"codeName":"표준 산업 분류 코드","orderNo":null,"typeCode":"FS.0001","codeEnumClass":null,"code":"01","codeId":{"typeCode":"FS.0001","code":"01"}},"categoryName":"농산물","upperCategoryCode":"A","terminalYn":"N","orderNo":2,"csrSectorCode":null,"eqSectorCode":null,"defaultCsrBucketCode":null,"modifyUserId":null,"modifyTime":null,"categoryCode":"A01"}
]
아래는 트리 그리드 config 입니다.
var mdGrid = new ax5.ui.grid();
mdGrid.setConfig({
target: $('[data-ax5grid="first-grid"]'),
header : {align:"center"},
showRowSelector: true,
columns: [
{key: "categoryId.categoryType", width: 150, align: 'left', label: '<spring:message code="fsstcm004.categoryType" />',
formatter : function() {
return '['+this.value+'] ' + this.item.categoryType.codeName;
}
},
{key: "categoryId.categoryCode", width: 150, align: 'left', label: '<spring:message code="fsstcm004.categoryCode" />' ,
treeControl: true
},
{key: "categoryName", width: 100, align: 'left', label: '<spring:message code="fsstcm004.categoryName" />',
editor: {type: "text"},
},
{key: "terminalYn", width: 100, align: 'left', label: '<spring:message code="fsstcm004.terminalYn" />',
editor: {type: "select",
config: {
columnKeys: {
optionValue: "CD", optionText: "NM"
},
options: [
{CD: 'Y', NM: '<spring:message code="button.yes"/>'},
{CD: 'N', NM: '<spring:message code="button.no"/>'},
]}
},
},
{key: "orderNo", width: 100, align: 'left', label: '<spring:message code="fsstcm004.orderNo" />',
editor: {type: "text"},
},
{key: "csrSectorCode", width: 100, align: 'left', label: '<spring:message code="fsstcm004.csrSectorCode" />',
editor: {type: "select",
config: {
columnKeys: {
optionValue: "CD", optionText: "NM"
},
options: csrSectors}
},
formatter : function() {
var val = this.value;
var item = csrSectors.find(function(item){return item.CD == val});
if (item)
return item.NM;
else
return '';
}
},
{key: "eqSectorCode", width: 100, align: 'left', label: '<spring:message code="fsstcm004.eqSectorCode" />',
editor: {type: "select",
config: {
columnKeys: {
optionValue: "CD", optionText: "NM"
},
options: equitySectors}
},
formatter : function() {
var val = this.value;
var item = equitySectors.find(function(item){return item.CD == val});
if (item)
return item.NM;
else
return '';
}
},
{key: "defaultCsrBucketCode", width: 100, align: 'left', label: '<spring:message code="fsstcm004.defaultCsrBucketCode" />',
editor: {type: "select",
config: {
columnKeys: {
optionValue: "CD", optionText: "NM"
},
options: defaultBuckets}
},
formatter : function() {
var val = this.value;
var item = defaultBuckets.find(function(item){return item.CD == val});
if (item)
return item.NM;
else
return '';
}
},
{key: "modifyUserId", width: 120, align: 'center', label: '<spring:message code="fs.grid.modifyUserId" />'},
{key: "modifyTime", width: 150, align: 'center', label: '<spring:message code="fs.grid.modifyTime" />' ,
formatter : function() {
if (this.value) {
var d = new Date(this.value);
return d.format('yyyy-mm-dd HH:MM:ss');
} else
return "";
}
}
],
tree: {
use: true,
indentWidth: 10,
arrowWidth: 15,
iconWidth: 18,
icons: {
openedArrow: '<i class="fa fa-minus" aria-hidden="true"></i>',
collapsedArrow: '<i class="fa fa-plus" aria-hidden="true"></i>',
groupIcon: '',
collapsedGroupIcon: '',
itemIcon: ''
},
columnKeys: {
parentKey: "upperCategoryCode",
selfKey: "categoryCode"
}
},
body: {
onDataChanged: function () {
if (this.key == 'csrSectorCode') {
this.self.updateChildRows(
this.dindex,
{csrSectorCode: this.item.csrSectorCode},
{filter: function(){
return this.item.csrSectorCode == undefined;
}});
}
else if (this.key == 'eqSectorCode') {
this.self.updateChildRows(
this.dindex,
{eqSectorCode: this.item.eqSectorCode},
{filter: function(){
return this.item.eqSectorCode == undefined;
}});
}
else if (this.key == 'defaultCsrBucketCode') {
this.self.updateChildRows(
this.dindex,
{defaultCsrBucketCode: this.item.defaultCsrBucketCode},
{filter: function(){
return this.item.defaultCsrBucketCode == undefined;
}});
}
else if(this.key == '__selected__'){
this.self.updateChildRows(this.dindex, {__selected__: this.item.__selected__});
}
}
},
});
정상 출력화면
개발자도구 오류 로그 캡처
혹시 데이터 순서를 지켜야 하는 건지 아니면 버그인지 알고 싶습니다.