jQuery UI Widgets › Forums › Navigation › Tree › JSON tree view
Tagged: jqxtree, local data, Tree, url
This topic contains 3 replies, has 3 voices, and was last updated by bobmazzo 10 years, 1 month ago.
-
AuthorJSON tree view Posts
-
hi,
i copied an example of JSON tree and edited it. instead of using local data, i tried to call the data from another page using JSON method.
but the tree view is not populating. can anyone help me on this.
here is my code.
<script type="text/javascript"> $(document).ready(function () { var theme = 'ui-redmond'; // prepare the data var source = { datatype: 'json', datafields: [ { name: 'id' }, { name: 'parentid' }, { name: 'text' }, { name: 'value' } ], //theme: theme, url: 'tree_view_data.php', id: 'id', root: 'data', 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 item's id. The second parameter is the parent item's id. The 'items' parameter represents // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter // specifies the mapping between the 'text' and 'label' fields. var records = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items', [{ name: 'text', map: 'label'}]); $('#jqxWidget').jqxTree({ source: records, width: '300px'}); }); </script>
Hello sathiyaseelan8,
Please, find below an example which shows how to call data from another JSON file. I suggest you to take out the “root: ‘data'” because you don’t use it in your code.
<!DOCTYPE html> <html lang="en"> <head> <title></title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../scripts/demos.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 = 'ui-redmond'; // prepare the data var source = { datatype: 'json', datafields: [ { name: 'CompanyName' }, { name: 'Address' }, { name: 'City' } ], //theme: theme, url: "../sampledata/customers.txt", id: 'id', 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 item's id. The second parameter is the parent item's id. The 'items' parameter represents // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter // specifies the mapping between the 'text' and 'label' fields. var records = dataAdapter.getRecordsHierarchy('CompanyName', 'Address', 'items', [{ name: 'City', map: 'label' }]); $('#jqxWidget').jqxTree({ source: records, width: '300px' }); }); </script> <div id='jqxWidget'> </div> </div> </body> </html>
customers.txt
[{"CompanyName":"Alfreds Futterkiste","ContactName":"Maria Anders","ContactTitle":"Sales Representative","Address":"Obere Str. 57","City":"Berlin","Country":"Germany"},{"CompanyName":"Ana Trujillo Emparedados y helados","ContactName":"Ana Trujillo","ContactTitle":"Owner","Address":"Avda. de la Constitucin 2222","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Antonio Moreno Taquera","ContactName":"Antonio Moreno","ContactTitle":"Owner","Address":"Mataderos 2312","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Around the Horn","ContactName":"Thomas Hardy","ContactTitle":"Sales Representative","Address":"120 Hanover Sq.","City":"London","Country":"UK"},{"CompanyName":"Berglunds snabbkp","ContactName":"Christina Berglund","ContactTitle":"Order Administrator","Address":"Berguvsvgen 8","City":"Lule","Country":"Sweden"},{"CompanyName":"Blauer See Delikatessen","ContactName":"Hanna Moos","ContactTitle":"Sales Representative","Address":"Forsterstr. 57","City":"Mannheim","Country":"Germany"},{"CompanyName":"Blondesddsl pre et fils","ContactName":"Frdrique Citeaux","ContactTitle":"Marketing Manager","Address":"24, place Klber","City":"Strasbourg","Country":"France"},{"CompanyName":"Blido Comidas preparadas","ContactName":"Martn Sommer","ContactTitle":"Owner","Address":"C\/ Araquil, 67","City":"Madrid","Country":"Spain"},{"CompanyName":"Bon app'","ContactName":"Laurence Lebihan","ContactTitle":"Owner","Address":"12, rue des Bouchers","City":"Marseille","Country":"France"},{"CompanyName":"Bottom-Dollar Markets","ContactName":"Elizabeth Lincoln","ContactTitle":"Accounting Manager","Address":"23 Tsawassen Blvd.","City":"Tsawassen","Country":"Canada"},{"CompanyName":"B's Beverages","ContactName":"Victoria Ashworth","ContactTitle":"Sales Representative","Address":"Fauntleroy Circus","City":"London","Country":"UK"},{"CompanyName":"Cactus Comidas para llevar","ContactName":"Patricio Simpson","ContactTitle":"Sales Agent","Address":"Cerrito 333","City":"Buenos Aires","Country":"Argentina"},{"CompanyName":"Centro comercial Moctezuma","ContactName":"Francisco Chang","ContactTitle":"Marketing Manager","Address":"Sierras de Granada 9993","City":"Mxico D.F.","Country":"Mexico"},{"CompanyName":"Chop-suey Chinese","ContactName":"Yang Wang","ContactTitle":"Owner","Address":"Hauptstr. 29","City":"Bern","Country":"Switzerland"},{"CompanyName":"Comrcio Mineiro","ContactName":"Pedro Afonso","ContactTitle":"Sales Associate","Address":"Av. dos Lusadas, 23","City":"Sao Paulo","Country":"Brazil"},{"CompanyName":"Consolidated Holdings","ContactName":"Elizabeth Brown","ContactTitle":"Sales Representative","Address":"Berkeley Gardens 12 Brewery","City":"London","Country":"UK"},{"CompanyName":"Drachenblut Delikatessen","ContactName":"Sven Ottlieb","ContactTitle":"Order Administrator","Address":"Walserweg 21","City":"Aachen","Country":"Germany"},{"CompanyName":"Du monde entier","ContactName":"Janine Labrune","ContactTitle":"Owner","Address":"67, rue des Cinquante Otages","City":"Nantes","Country":"France"},{"CompanyName":"Eastern Connection","ContactName":"Ann Devon","ContactTitle":"Sales Agent","Address":"35 King George","City":"London","Country":"UK"},{"CompanyName":"Ernst Handel","ContactName":"Roland Mendel","ContactTitle":"Sales Manager","Address":"Kirchgasse 6","City":"Graz","Country":"Austria"}]
I hope it would be helpful.
Best Regards,
NadezhdajQWidgets team
http://www.jqwidgets.com/hi nadezhda,
thank you so much. it working now.. 🙂
Hello,
I’m looking for an Angular-based example of how to wire up the tree widget from nested Json, with this data sample :`[
{
“group”: “99_HSVaR”,
“kris”: [
{
“kri”: “1D”
},
{
“kri”: “1D CR”
},
{
“kri”: “1D EQ”
}
]
},
{
“group”: “Additive”,
“kris”: [
{
“kri”: “MCS”
}
]
}
]`I have defined an empty object at the top of my Angular controller js file :
‘vm.kriSourceTree = {};’
and my activate code fetches the data form the server :
`activate();
function activate() {
var promises = [ getKriListFromServer() ];
common.activateController(promises, controllerId)
.then(function () { log(‘Activated Report Maint View’); });
}`then further down, I use the $q promise to fetch data then configure the data adapter :
` function getKriListFromServer() {
// Get KRI list from server, transform into Tree Json format.
datacontext.getKriList().then(function (data) {
if (data.status == ‘FAIL’) {
if (data.messages.length > 0) {
logErr(“Error retrieving KRI list: ” + data.messages[0]);
return;
}
}
else {
var jsonData = reportsContext.parseKriJsonData(data.data);
configureKriDataAdapter(jsonData);
}
});
}
function configureKriDataAdapter(data) {
// define the data model
var source = {
id: “id”,
//url: <url>
datafields: [
{ name: ‘group’, type: ‘string’ },
{ name: ‘kri’, type: ‘string’ },
{ name: ‘kris’, type: ‘array’ }
],
hierarchy: {
root: ‘children’
},
localdata: data,
datatype: “json”
};
// bind model to adapter
var dataAdapter = new $.jqx.dataAdapter(source);// configure tree settings (see jqx-settings=”vm.kriSourceTree” in html)
vm.kriSourceTree = {
checkboxes: true,
//height: ‘300px’, width: ‘300px’,
source: dataAdapter
};
}`At this point my jq tree is empty. Perhaps my binding is not in the correct order ?
thanks.
Bob
-
AuthorPosts
You must be logged in to reply to this topic.