您的位置：首页 > 其它

Dojo TreeGrid 懒加载

2015-01-20 11:02 197 查看

dojo.require("dojox.grid.TreeGrid");
dojo.require("dijit.tree.ForestStoreModel");
dojo.require("dojox.data.JsonRestStore");
dojo.require("dijit.form.Button");
dojo.require("dojo.parser");

jsonStore = null, childItems = null, dataItems = null, fullItems = null;
dojo.addOnLoad(function() {
childItems = {
'AF' : [ {
id : 'EG',
name : 'Egypt',
type : 'country'
}, {
id : 'KE',
name : 'Kenya',
type : 'country'
}, {
id : 'SD',
name : 'Sudan',
type : 'country'
} ],
'KE' : [ {
id : 'Nairobi',
name : 'Nairobi',
type : 'city'
}, {
id : 'Mombasa',
name : 'Mombasa',
type : 'city'
} ],
'SD' : [ {
id : 'Khartoum',
name : 'Khartoum',
type : 'city'
} ],
'AS' : [ {
id : 'CN',
name : 'China',
type : 'country'
}, {
id : 'IN',
name : 'India',
type : 'country'
}, {
id : 'RU',
name : 'Russia',
type : 'country'
}, {
id : 'MN',
name : 'Mongolia',
type : 'country'
} ],
'OC' : [ {
id : 'AU',
name : 'Australia',
type : 'country',
population : '21 million'
} ],
'EU' : [ {
id : 'DE',
name : 'Germany',
type : 'country'
}, {
id : 'FR',
name : 'France',
type : 'country'
}, {
id : 'ES',
name : 'Spain',
type : 'country'
}, {
id : 'IT',
name : 'Italy',
type : 'country'
} ]
};
dataItems = [ {
id : 'AF',
name : 'Africa',
type : 'continent',
population : '900 million',
area : '30,221,532 sq km',
timezone : '-1 UTC to +4 UTC',
children : true,
'$ref' : 'AF'
}, {
id : 'AS',
name : 'Asia',
type : 'continent',
children : true,
'$ref' : 'AS'
}, {
id : 'OC',
name : 'Oceania',
type : 'continent',
population : '21 million',
children : true,
'$ref' : 'OC'
}, {
id : 'EU',
name : 'Europe',
type : 'continent',
children : true,
'$ref' : 'EU'
} ];
fullItems = {};
dojo.forEach(dataItems, function(item) {
var full = fullItems[item.id] = dojo.mixin({}, item, {
children : childItems[item.id]
});
delete full['$ref'];
});
var mockService = function(query) {
var d = new dojo.Deferred();
if (typeof query == 'string') {
setTimeout(function() {
d.callback(fullItems[query]);
}, 500);
} else {
d.fullLength = dataItems.length;
d.callback(dataItems);
}
return d;
};
jsonStore = new dojox.data.JsonRestStore({
service : mockService,
target : '/some/url'
});
dojo.parser.parse();
});

HTML

<body class="tundra">
<h1 class="testTitle">Test: dojox.grid.TreeGrid - Model-based lazy loading</h1>
<div dojoType="dijit.tree.ForestStoreModel" data-dojo-id="continentModel"
store="jsonStore" query="{type:'continent'}"
deferItemLoadingUntilExpand="true"
rootId="continentRoot" rootLabel="Continents" childrenAttrs="children">
</div>
<h4 class="testSubtitle">dojox.grid.TreeGrid n-Level</h4>
<table data-dojo-id="grid" dojoType="dojox.grid.TreeGrid" class="grid" treeModel="continentModel">
<thead>
<tr>
<th field="name" width="auto">Name</th>
</tr>
</thead>
</table>
</body>

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dojo

相关文章推荐

新的分享

章节导航