Treeview demo
Instructions:
This control should show a treeview with the ana.example.org/Databases/asimov node selected by default.
Treeview 1
Treeview 2 (via ajax)
HTML source
<h4>Treeview 1</h4>
<div id="treeview-1" style="margin-left: 2em"></div>
<h4>Treeview 2 (via ajax)</h4>
<div id="treeview-2" style="margin-left: 2em"></div>
<div id="treeview-1" style="margin-left: 2em"></div>
<h4>Treeview 2 (via ajax)</h4>
<div id="treeview-2" style="margin-left: 2em"></div>
Javascript source
Meteora.uses('Meteora.Treeview');
Meteora.onStart(
function () {
new Treeview(
'treeview-1',
[
{
'label': 'ana.example.org',
'items': [
{
'label': 'Databases',
'items': [
{
'label': 'asimov',
'onSelect': function() { alert('onclick on asimov') }
},
{
'label': 'aeris',
'items': [
{
'label': 'sql prompt'
},
{
'label': 'visual management'
}
]
}
]
}
]
},
{
'label': 'joe.example.org',
'items': [
{
'label': 'HTTP Servers',
'items': [
{
'label': 'eric'
},
{
'label': 'maria (ajax treeview)',
'items': '/demo/ajax_treeview_test'
},
{
'label': 'ricky'
}
]
}
]
}
],
{
'selected': [ 'ana.example.org', 'Databases', 'aeris', 'sql prompt']
}
);
new Treeview(
'treeview-2',
'/demo/ajax_treeview_test'
);
}
);
Meteora.onStart(
function () {
new Treeview(
'treeview-1',
[
{
'label': 'ana.example.org',
'items': [
{
'label': 'Databases',
'items': [
{
'label': 'asimov',
'onSelect': function() { alert('onclick on asimov') }
},
{
'label': 'aeris',
'items': [
{
'label': 'sql prompt'
},
{
'label': 'visual management'
}
]
}
]
}
]
},
{
'label': 'joe.example.org',
'items': [
{
'label': 'HTTP Servers',
'items': [
{
'label': 'eric'
},
{
'label': 'maria (ajax treeview)',
'items': '/demo/ajax_treeview_test'
},
{
'label': 'ricky'
}
]
}
]
}
],
{
'selected': [ 'ana.example.org', 'Databases', 'aeris', 'sql prompt']
}
);
new Treeview(
'treeview-2',
'/demo/ajax_treeview_test'
);
}
);