Topic: mifTree: reload full tree an reselect and reopen with CookieStorage
Hi,
i've a little problem with the mifTree:
i've a selectbox with countries (filter for the tree) and the mifTree (filled with php/ajax).
to select and open the tree after browser-reload i'm using the cookiestorage (like in the example).
Here it comes: after changing the select box i've to reload the whole tree, reopen it (if possible) and select the node (if possibble).
could someone help me, please.
thanks a lot.
sascha
PS: this is an example code
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="demo.css" type="text/css" />
<script type="text/javascript" src="mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="mootools-1.2.4.2-more.js"></script>
<script type="text/javascript" src="mif.tree-v1.2.3.js"></script>
<script type="text/javascript" src="demo.js"></script>
<title>Mif.Tree Demo</title>
</head>
<body>
<h1>Simple Tree example</h1>
<form action="javascript:void(null)" id="jsMonthlyDataRegions" name="jsMonthlyDataRegions" method="post">
<select name="jsRegion" id="jsRegion" size="1">
<option value="1">Filter 1</option>
<option value="2">Filter 2</option>
<option value="3">Filter 3</option>
<option value="4">Filter 4</option>
<option value="5">Filter 5</option>
</select>
</form>
<div id="tree_container"></div>
</body>
</html>demo.js
Mif.Tree.Node.implement({
switchSelect: function(state){
this.tree[state ? 'select' : 'unselect'](this);
}
});
var storage= null;
var selectStorage= null;
var json = [
{
"property": {
"name": "root",
"id": "root"
},
"children": [
{
"property": {
"name": "node1",
"id": "node1"
}
},
{
"property": {
"name": "node2",
"id": "node2"
},
"children":[
{
"property": {
"name": "node2.1",
"id": "node2.1"
}
},
{
"property": {
"name": "node2.2",
"id": "node2.2"
},
"children":[
{
"property": {
"name": "node2.2.1",
"id": "node2.2.1"
}
},
{
"property": {
"name": "node2.2.2",
"id": "node2.2.2"
}
}
]
}
]
}
]
}
];
function reload() {
tree.$index=null;
tree.mouse.node=false;
//tree.unselect();
var current = tree.selected;
if (current) {
tree.selected = false;
current.select(false);
}
tree.forest ? tree.wrapper.getElement('.mif-tree-children-root').destroy() : tree.root.getDOM('node').destroy();
tree.updateHover();
//storage.restored = null;
//selectStorage.restored = null;
tree.load({
json: json
});
}
window.addEvent('domready',function(){
$('jsRegion').addEvent('change',reload);
tree = new Mif.Tree({
id: 'tree1',
container: $('tree_container'),// tree container
initialize: function(){
storage=new Mif.Tree.CookieStorage(this);
selectStorage=new Mif.Tree.CookieStorage(this, {event: 'selectChange', action: 'switchSelect'});
this.addEvent('load', function(){
storage.restore();
selectStorage.restore();
}).addEvent('loadChildren', function(){
storage.restore();
selectStorage.restore();
});
},
types: {// node types
folder:{
openIcon: 'mif-tree-open-icon',//css class open icon
closeIcon: 'mif-tree-close-icon'// css class close icon
}
},
dfltType:'folder',//default node type
height: 18//node height
});
// load tree from json.
tree.load({
json: json
});
});Last edited by wojewsky (2010-01-29 15:57:15)
