Defining Tree-like Data in XML, JavaScript Programming Example of Defining Tree-like Data in XML

Home
Examples
Defining Tree-like Data in XML

JavaScript Programming Example of Defining Tree-like Data in XML

Check out our free programming sample to learn how to define tree-like data in XML. The structure of the XML tree consists of a root element (one that is the parent of all other elements), child elements, text, and attributes, etc. The Webix team hopes that this sample code will be useful to you.

JS Code

/*
  The sample demonstrates different ways you can load XML data to Tree:
  
  1) Plain XML data ("item" tags; 1st tree) and custom tags (2nd tree)
  2) Via custom parsing logic (3rd tree) and loading from a file (4th tree).
*/


var myxml = webix.DataDriver.myxml = webix.copy(webix.DataDriver.xml);
myxml.records = "/*/book";
myxml.child = "part";


var myxml2 = webix.DataDriver.myxml2 = webix.copy(webix.DataDriver.xml);
myxml2.records = "/*/book";
myxml2.child = function(obj){
  if (obj.$level == 1)
    return obj.part;
  if (obj.$level == 2)
    return obj.page;
}

webix.ui({
  rows:[
    {cols:[
      { // plain xml data based on <item> tags
        view:"tree",
        scheme:{ $parseChild:"item" },
        data: document.getElementById('data1').value,
        datatype:"xml"
      },
      { // mixed xml data, custom tags
        view:"tree",
        data: document.getElementById('data2').value,
        datatype:"myxml"
      }
    ]},
    {cols:[
      { // custom xml format
        view:"tree",
        data: document.getElementById('data3').value,
        datatype:"myxml2"
      },      
      { // loading from a file
        view:"tree",
        url:"//docs.webix.com/samples/17_datatree/01_loading/data/data.xml",
        datatype:"xml"}
    ]}
  ]
});

HTML Code

<textarea id='data1' style='display:none;'>
	<data>
		<item value='The Shawshank Redemption' open='1'>
			<item value='part1'></item>
			<item value='part2'></item>
		</item>
	</data>
</textarea>

<textarea id='data2' style='display:none;'>
	<response>
		<book value='The Shawshank Redemption' open='1'>
			<part value='part1'></part>
			<part value='part2'></part>
		</book>
	</response>
</textarea>

<textarea id='data3' style='display:none;'>
	<response>
		<book value='The Shawshank Redemption' open='1'>
			<part value='part1'>
				<page>Page 15</page>
				<page>Page 16</page>
			</part>
			<part value='part2'></part>
		</book>
	</response>
</textarea>

How to facilitate working with tree-like data?

Download Webix UI Framework

Study Tree Documentation

Check out Tree Widget Features