jQuery UI Widgets › Forums › Navigation › Tree › XML Tree with Four Levels
Tagged: tree xml fourlevel
This topic contains 2 replies, has 2 voices, and was last updated by shimmoril 12 years, 2 months ago.
Viewing 3 posts - 1 through 3 (of 3 total)
-
Author
-
I need to create a tree from XML data with four levels. All of your examples from external data have at most three. Can you please provide example code for a four level tree? I am primarily concerned about defining the records variable, since, as I understand it, that’s where the groups are set up.
Hi shimmoril,
Here’s a sample with four levels:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title id='Description'>In this demo the jqxTree is built from XML data.</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/gettheme.js"></script> <script type="text/javascript" src="../../scripts/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtree.js"></script></head><body> <div id='content'> <script type="text/javascript"> $(document).ready(function () { var theme = getTheme(); // prepare the data var source = { datatype: "xml", datafields: [ { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName' }, { name: 'ContactName', map: 'm\\:properties>d\\:ContactName' }, { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle' }, { name: 'City', map: 'm\\:properties>d\\:City' }, { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode' }, { name: 'Country', map: 'm\\:properties>d\\:Country' } ], root: "entry", record: "content", id: 'm\\:properties>d\\:CustomerID', url: "../sampledata/customers.xml", async: false }; // create data adapter. var dataAdapter = new $.jqx.dataAdapter(source); // perform Data Binding. dataAdapter.dataBind(); // get the tree items. The first parameter is the grouping fields. The second parameter is the sub items collection name. The third parameter is the group's name. // Each jqxTree item has a 'label' property, but in the data source, we have a 'CompanyName' field. The last parameter // specifies the mapping between the 'CompanyName' and 'label' fields. var records = dataAdapter.getGroupedRecords(['Country', 'City', 'ContactName'], 'items', 'label', [{ name: 'CompanyName', map: 'label' }]); $('#jqxWidget').jqxTree({ source: records, height: '300px', width: '300px', theme: theme }); }); </script> <div id='jqxWidget'> </div> </div></body></html>
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks Peter. I thought I had tried that, but I must have gotten something wrong.
-
AuthorPosts
Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.