dijit.tree.TreeStoreModel和dijit.tree.ForestStoreModel--dojo学习

dijit.tree.TreeStoreModel

 

TreeStoreModel把只有一个根Item的data store连接到digit.Tree上。
一个例子比如一个员工数据库，公司的CEO是根结点，其他所有员工都要直接或间接向CEO汇报工作。

下面是一个例子了：

<div dojoType="dojo.data.ItemFileWriteStore" jsId="store"
        url="../tests/_data/treeTest.json"></div>
<div dojoType="dijit.tree.TreeStoreModel" jsId="model"
        childrenAttrs="kids"
        store="store" query="{id:'root'}"></div>

下面是一个更复杂点的例子，我们覆盖了getChildren()方法，因为在data store中一个child引用了它的父item

<div dojoType="dijit.tree.TreeStoreModel" jsId="model" store="store">
        <script type="dojo/method" event="getChildren" args="item, onComplete">
                return store.fetch({query: {parent: store.getIdentity(item)}, onComplete: onComplete});
        </script>
        <script type="dojo/method" event="mayHaveChildren" args="item">
                var type = store.getValue(item, "type");
                return (type == "continent" || type == "country");
        </script>
</div>

dijit.tree.ForestStoreModel

 

ForestStoreModel把一个数据存储data store连接到一棵dijit.Tree的多个根结点上（"root" items）。
一个例子如：一个地理数据库，有多块大陆，但是没有一个"单独"顶级的叫"world"的Item。
由于树必须要求有一个顶级结点，ForestStoreModel会自动创建一个结点，并将从ForestStoreModel的构造函

数中指定的查询中查询出的结点作为其顶级结点的孩子。
下面是一个例子

<div dojoType="dojo.data.ItemFileReadStore" jsId="continentStore"
        url="_data/countries.json"></div>
<div dojoType="dijit.tree.ForestStoreModel" jsId="continentModel"
        store="continentStore" query="{type:'continent'}"
        rootId="continentRoot" rootLabel="Continents" childrenAttrs="children"></div>

监视Items的改变

ForestStoreModel本身是很复杂的，因为当顶级结点的孩子发生改变时，很难告知这个顶级结点。
比如新增一块大陆到数据存储或新增一个国家到数据存储等。用户需要定义onNewItem()方法

For example:

var model = new dijit.tree.ForestStoreModel({
        store: continentStore,
        query: {type: 'continent'},
        rootLabel: "The World",
        onNewItem: function(item, parentInfo){
                if(this.store.getValue(item, 'type') == 'continent'){
                        this._requeryTop();
                }
                this.inherited(arguments);
        }
});

 

移动结点到根结点或将结点从根结点移走

这也是比较复杂，开发者应覆盖onAddToRoot()和onLeaveRoot()方法

 

onAddToRoot: function(/* item */ item){
      // summary
      //            Called when item added to root of tree; user must override
      //            to modify the item so that it matches the query for top level items
      // example
      //      |     store.setValue(item, "root", true);
      console.log(this, ": item ", item, " added to root");
},
onLeaveRoot: function(/* item */ item){
      // summary
      //            Called when item removed from root of tree; user must override
      //            to modify the item so it doesn't match the query for top level items
      // example
      //      |    store.unsetAttribute(item, "root");
      console.log(this, ": item ", item, " removed from root");
}