<html>
<head>
<script type="text/javascript" src="activewidgets/runtime/lib/aw.js"></script>
<link href="activewidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>
<style>
.aw-image-symbol-minus {
background:url(activewidgets/runtime/styles/xp/tree.png) -84px 50%;
}
.aw-image-symbol-plus {
background:url(activewidgets/runtime/styles/xp/tree.png) -44px 50%;
}
.aw-image-symbol-leaf {
background:url(activewidgets/runtime/styles/xp/tree.png) -124px 50%;
}
</style>
</head>
<body>
<script>
// decides which rows are to be displayed based on the images (+ or -) in column 0
function setupTree() {
var rowIndices = new Array();
for (var i = 0; i < tree["root"].length; i++) {
rowIndices[rowIndices.length] = tree["root"][i];
// if image in column 0 is symbol-minus, node should be open and should display the children
if (obj.getCellImage(0, tree["root"][i]) == "symbol-minus") {
rowIndices = rowIndices.concat(tree[ tree["root"][i] ]);
}
}
obj.setRowCount(rowIndices.length);
obj.setRowIndices(rowIndices);
}
var myData = [
["1","1", "1", "a", "a", "a"],
["","2", "2", "b", "b", "b"],
["","3", "3", "c", "c", "c"],
["","4", "4", "d", "d", "d"],
["2","1", "5", "e", "e", "e"],
["","2", "6", "f", "f", "f"],
["3","1", "7", "g", "g", "g"],
["4","1", "8", "h", "h", "h"],
["","2", "9", "i", "i", "i"],
["","3", "10", "j", "j", "j"]
];
var myColumns = [
"key", "item1", "item2", "item3", "item4", "item5"
];
var tree = {
"root": [0, 4, 6, 7],
0: [1, 2, 3],
4: [5],
6: [],
7: [8, 9]
}
var obj = new AW.Grid.Extended;
obj.setId("myGrid");
obj.setCellTemplate(new AW.Templates.ImageText);
obj.setFixedLeft(0);
obj.setCellText(myData);
obj.setHeaderText(myColumns);
obj.setRowCount(myData.length);
obj.setColumnCount(myColumns.length);
for (var i = 0; i < tree["root"].length; i++) {
if (tree[ tree["root"][i] ].length != 0) {
obj.setCellImage("symbol-plus", 0, tree["root"][i]);
} else {
obj.setCellImage("symbol-leaf", 0, tree["root"][i]);
}
}
setupTree();
obj.onCellClicked = function(event, column, row){
// we are checking only for clicks on column 0 which has the + or - image
if (column == 0) {
var targetID = "";
if (event.target)
targetID = event.target.id;
else
targetID = event.srcElement.id;
// check if the cell image was clicked
if (targetID === "myGrid-cell-" + column + "-" + row + "-box-image") {
// toggle the image and call setupTree
if (obj.getCellImage(column, row) == "symbol-plus") {
obj.setCellImage("symbol-minus", column, row)
setupTree();
} else if (obj.getCellImage(column, row) == "symbol-minus") {
obj.setCellImage("symbol-plus", column, row);
setupTree();
}
}
}
}
document.write(obj);
</script>
</body>
</html>
This topic is archived.