Dojo TreeGrid 懒加载

最新推荐文章于 2020-06-25 17:22:22 发布

nsecn

最新推荐文章于 2020-06-25 17:22:22 发布

阅读量468

点赞数

分类专栏： dojo 文章标签： dojo

本文链接：https://blog.csdn.net/nsecn/article/details/42915009

版权

dojo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

效果图

nsecn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dojo TreeGrid 懒加载

JSdojo.require("dojox.grid.TreeGrid");dojo.require("dijit.tree.ForestStoreModel");dojo.require("dojox.data.JsonRestStore");dojo.require("dijit.form.Button");dojo.require("dojo.parser");jsonSto
复制链接

扫一扫