Listing 1
<script defer>
function window::onload() {
var tvi = new TreeViewItem("XMLSP Examples",
"Objects.gif");
tvi.dataURL="examplesTV.xml";
tv_1.insertItemLast( null, tvi );
tv_1.expandAll( tvi.handle );
tv_1.selectItem( tvi );
}
function tv_1::onItemPopulate() {
var e = window.event.item;
// item to populate
if ( typeof e.dataURL != "undefined" ) {
var xmlTreel = XML(e.dataURL);
var nodes = xmlTree.selectNodes("*/*");
for (var i = 0; i < nodes.length ; i++) {
var newItem = new Object();
var attr = nodes.item(i).selectNodes("*");
for (var j = 0; j < attr.length; j++)
eval("nI."+attr.item(j).nodeName +"='"+
attr.item(j).text+"'");
insertItemLast(e, newItem);
} } }
</script>
<xsp:treeview fontText="20pt " id="tv_1"
style="overflow-y:scroll;background-color:white;
width:300px; height:200px;Border:inset 2px;">
</xsp:treeview>
Listing 2
<html xmlns:xsp="www.xmlsp.com">
<head><title>Data Explorer</title>
<LINK TYPE="text/css" HREF="xmlsp.css"/>
<SCRIPT SRC="ctiLib.js"></SCRIPT>
<SCRIPT >
function showSalesRep(tvi) {
dw_1.setViewFilter('sales_rep_id='+
tvi.sales_rep_id);}
function showCustomer(tvi) {
showSalesRep(tv_1.findItem("parent", tvi));
if ( typeof dw_2.sales_rep_id == "undefined"||
dw_2.sales_rep_id != tvi.sales_rep_id) {
dw_2.sales_rep_id = tvi.sales_rep_id;
dw_2.loadFromXML( tv_1.findItem("parent",
tvi).xmlData ); }
dw_2.setViewFilter('customer_id='+
tvi.customer_id);
}
function showOrder(tvi) {
showCustomer(tv_1.findItem("parent", tvi));
if ( typeof dw_3.customer_id == "undefined" ||
dw_3.customer_id != tvi.customer_id ) {
dw_3.customer_id = tvi.customer_id;
dw_3.loadFromXML( tv_1.findItem(
"parenttreeitem", tvi).xmlData ); }
dw_3.setViewFilter("id='"+tvi.id+"'");
}
function showLineItem(tvi) {
showOrder(tv_1.findItem("parenttreeitem",tvi));
if ( typeof dw_4.order_id == "undefined" ||
dw_4.order_id != tvi.order_id ) {
dw_4.order_id = tvi.order_id;
dw_4.loadFromXML( tv_1.findItem(
"parenttreeitem", tvi).xmlData ); }
dw_4.setViewFilter('line_id='+tvi.line_id +
" and id="+tvi.id);
}
</SCRIPT>
<script for="window" event="onload">
dw_1.retrieve();
tv_1.expandNodeFromDS( null,
dw_1, false );//create tree roots
</script></head>
<body bgcolor="silver" text="#000000" scroll="no"
padding="0" margin="0">
<xsp:menu id="m" class="menucontainer"
style="position:absolute;top:0px;"
menuUrl="menu/dataExplorerMenu.xml" />
<xsp:splitter id="sp_1" min=".1" max=".9"
style="top:25px;width:1024px;height:700px;
left:5px;position:absolute;background:silver;"
value=".3" controlmin="tv_1" controlmax="data" >
<xsp:treeview id="tv_1" style="FONT:8pt"/>
<DIV id="data" >
<xsp:xmlcontrol dataSource="d_sales_reps"
id="dw_1" appUrl="/Examples" />
<xsp:xmlcontrol id="dw_2" appUrl="/Examples"
dataSource="d_sales_rep_customers"/>
<xsp:xmlcontrol appUrl="/Examples" id="dw_3"
dataSource="d_sales_rep_customer_orders" />
<xsp:xmlcontrol id="dw_4" appUrl="/Examples"
dataSource="d_salesorder_items" />
</DIV>
</xsp:splitter>
<xsp:xmlcontrol type="dataonly" id="ds_2"
dataSource="d_sales_rep_customers"
appUrl="/Examples"/>
<xsp:xmlcontrol type="dataonly" id="ds_3"
dataSource="d_sales_rep_customer_orders"
appUrl="/Examples"/>
<xsp:xmlcontrol type="dataonly" id="ds_4"
dataSource="d_salesorder_items"
appUrl="/Examples"/>
</body>
<SCRIPT>
function tv_1::onSelectionChanged() {
var tvi = window.event.item;
for (var i = tvi.level + 1; 4 >= i; i++ )
eval('dw_'+i+'.style.display="none";');
switch ( tvi.level) {
case 4: showLineItem(tvi); break;
case 3: showOrder(tvi); break;
case 2: showCustomer(tvi); break;
case 1: showSalesRep(tvi); break;
}
for (var i = 1; tvi.level >= i; i++ )
eval('dw_'+i+'.style.display="";');
}
function tv_1::onItemPopulate() {
var tviParent = window.event.item;
switch ( tviParent.level ) {
case 1:ds_2.retrieve(tviParent.sales_rep_id);
tv_1.expandNodeFromDS( tviParent, ds_2, true );
break;
case 2: ds_3.retrieve(tviParent.customer_id,
tviParent.sales_rep_id);
tv_1.expandNodeFromDS( tviParent, ds_3, true );
break;
case 3: ds_4.retrieve(tviParent.id);
tv_1.expandNodeFromDS( tviParent, ds_4, true );
}
}
</SCRIPT>
</html>