Tree Lazy Loading
There is no need to initially load all of the datasets to be displayed in the tree view. When the user expands a tree row, child rows of that row can be retrieved and added to the tree view.
Mark a tree row as having children even though it currently has no children. To add children when expanding a row. First, when adding a row, the Has Children setting must be set to true.
The fourth field of setRows() is the name of the field that specifies whether there are children. A value greater than 0 is considered to mean "there are children," and the imported data displays + even though there is no child data.
The example below shows that only Seoul Metropolitan City has additional data.
Data retrieved upon first view
var data = [
{
"treeId": "11",
"treeName": "Seoul",
"area1code": "11",
"area1name": "Seoul",
"hasChild": 1, // + in front
"iconField": 0
},
{
"treeId": "20",
"treeName": "Jeju Island",
"area1code": "22",
"area1name": "Jeju Island",
"hasChild": 0, //no indication in front because it was specified that there is no child data
"iconField": 8
}
];
treeProvider.setRows(data, "treeId", true, "hasChild", "iconField")Get the next data when expanding
treeView.onTreeItemExpanding = function (tree, itemIndex, rowId) {
// If false is returned, it will not be expanded.
// return false;
// If the row being expanded has no children, it is a row with hasChildren set.
// Get the children and add them to that row.
if (treeProvider.getChildCount(rowId) <= 0) {
//Get the key value of the row you want to expand, retrieve the children of that row from the db, and then add them using addChildRow().
//var key = treeProivder.getValue(rowId, "treeId");
var datas = [{
"treeId": "11.010",
"treeName": "Jongno-gu",
"area1code": "11",
"area1name": "Seoul",
"area2code": "11010",
"area2name": "Jongno-gu",
"iconField": 1
},
{
"treeId": "11.020",
"treeName": "Jung-gu",
"area1code": "11",
"area1name": "Seoul",
"area2code": "11020",
"area2name": "Jung-gu",
"iconField": 2
},
{
"treeId": "11.030",
"treeName": "Yongsan-gu",
"area1code": "11",
"area1name": "Seoul",
"area2code": "11030",
"area2name": "Yongsan-gu",
"iconField": 3
} ];
datas.forEach(function(el) {
var childId = treeProvider.addChildRow(rowId, el, el.iconField, true);
})
}
return true;
}