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