Post new reply

2010-02-01 11:00:16

Hi moro,

thanks a lot.
now it works perfect.

2010-01-30 00:37:24

    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();
        tree.root.recursive(function(){
            var id=this.id;
            delete Mif.ids[id];
        });
        tree.$draw=false;
        var storageData = storage.read();
        var selectStorageData = selectStorage.read();
        tree.addEvent('loadChildren', function(){
            storage.restore(storageData);
            selectStorage.restore(selectStorageData);
        }).addEvent('load', function(){
            storage.restore(storageData);
            selectStorage.restore(selectStorageData);
        });
        tree.load({
            json: json
        });
    }

2010-01-27 17:34:07

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
    });
    
});

Post new reply

Post new reply

Compose and post your new reply

Topic review (newest first)

1 Post by wojewsky 2010-02-01 11:00:16

2 Post by moro 2010-01-30 00:37:24

3 Post by wojewsky 2010-01-27 17:34:07