Tree - Xml Data

You can use XML data to implement a TreeView.

XML data structure

The code below is XML format data to implement a tree.

var data =
   "<rows>"+
   " <row icon='0' do='Gyeonggi-do'>"+
   " <row icon='0' do='Gyeonggi-do' si='Seongnam-si'>"+
   " <row icon='0' do='Gyeonggi-do' si='Seongnam-si' gu='Bundang-gu' />"+
   " <row icon='0' do='Gyeonggi-do' si='Seongnam-si' gu='Sujeong-gu'/>"+
   " </row>"+
   " <row icon='0' do='Gyeonggi-do' si='Suwon-si'>"+
   " <row icon='0' do='Gyeonggi-do' si='Suwon-si' gu='Paldal-gu' />"+
   " <row icon='0' do='Gyeonggi-do' si='Suwon-si' gu='Yeongtong-gu' />"+
   " </row>"+
   " <row icon='0' do='Gyeonggi-do' si='Anyang-si' />"+
   " <row icon='0' do='Gyeonggi-do' si='Uijeongbu-si' />"+
   " <row icon='0' do='Gyeonggi-do' si='Gimpo-si' />"+
   " </row>"+
   "</rows>";

Implementing a tree with XML data

You can use the two functions below to implement a tree with XML data.

First, setXmlRows() Let's implement the tree by calling a function.

// Enter XML data
treeDataProvider.setXmlRows(data, "row", "", "icon");
treeView.expandAll();

Same data as fillXmlData() Let's implement a tree using functions.

// clear data
treeDataProvider.clearRows();
 
// Enter XML data
treeDataProvider.fillXmlData(data, {rows: "row", icon: "icon"});
treeView.expandAll();

The results of running both functions are the same.

XML data hierarchy for tree implementation

Nodes in XML must have a start-tag and end-tag pair.

<rows>
   <row field=value> <!-- parent node -->
     <row field=value /> <!-- child nodes -->
     ...
     <row field=value />
   </row>
</rows>

Another node contained between the start and end tags of the parent node (rows tag above) refers to the child node (row tag above).

The notable part of the data in this demo is a node named row. This node is an element to express the hierarchy of the tree.

Below is the definition of the TreeDataProvider.setXmlRows() function. The above property name, 'rows', must be passed as the value of rowsElement, the second argument of this function.

function setXmlRows(xml, rowElement, childrenField, iconField) {}

Below is the definition of the TreeDataProvider.fillXmlData() function. The second argument, options, i.e. DataFillOptions The above property name, 'rows', must be passed as the value of the rows property.

function fillXmlData(data, options) {}

Tree - Object Data Manipulating tree nodes