DOJO grid一个小例子

这周的工作是研究dojo grid 的树状gird。但是大部分时间用来改各种各样的bug了,一共没有两天来调查这个东西，从网上找了一些例子，分享一下。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
        <title>dojox.grid.TreeGrid Lazy-loading for children items test</title>
        <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"></Meta>
        <style type="text/css">
            @import "web/dojo/dojo/resources/dojo.css";
            @import "web/dojo/dijit/themes/claro/claro.css";
            @import "web/dojo/dojox/grid/resources/Grid.css";
			@import "web/dojo/dojox/grid/resources/tundraGrid.css";
            @import "web/dojo/dojox/grid/resources/claroGrid.css";
            body {
				font-size: 0.9em;
				font-family: Geneva,Arial,Helvetica,sans-serif;
				padding: 0.5em;
			}
			.title {
				text-align:center;
				margin:1em;
			}
			#grid1 {
                width: 65em;
                height: 25em;
				border: 1px solid #333333;
            }
			#grid2 {
                width: 65em;
                height: 25em;
				border: 1px solid #333333;
            }
        </style>
        <script type="text/javascript" src="web/dojo/dojo/dojo.js"  djConfig="isDebug:true,parSEOnLoad: true"></script>
        <script type="text/javascript">
            dojo.require("dojox.grid.LazyTreeGrid");
			dojo.require("dojo.data.ItemFileWriteStore");
            dojo.require("dijit.tree.ForestStoreModel");
			dojo.require("dojox.grid.LazyTreeGridStoreModel");
			dojo.require("dijit.form.Button");
			
			// large dataset
			var rows = 5;
			
			//1 -------------->定义一个json字符串continentItems.用来描述大陆
			var continentItems = [
				{name:'South America',type:'continent',population:'',area:''},{name:'North America',{name:'Asia',{name:'Oceania',{name:'Europe',area:''}
			];
			//1 end
			
			//2 -------------定义一个数组continentChildrenList，用来存放5项大陆名称
			var continentChildrenList = [];
			for(var i=0,l=continentItems.length; i<rows; i++){
				continentChildrenList.push(dojo.mixin({ id: 'continent_' + i },continentItems[i%l]));
			}
			//2 end
			
			//3 -------------定义一个json字符串countryItems，用来描述国家名称。
			rows = 100;
			var countryItems = [
				{name:'Egypt',type:'country',{name: 'Kenya',type: 'country',{name:'Sudan',{name:'China',{name:'India',{name:'Russia',{name:'Mongolia',area:'' },{name:'Australia',population:'21 million',{name:'Germany',{name:'France',{name:'Spain',{name:'Italy',{name:'Mexico',population:'108 million',area:'1,972,550 sq km'},{name:'Canada',population:'33 million',area:'9,984,670 sq km'},{name:'United States of America',{name:'Brazil',population:'186 million',{name:'Argentina',population:'40 million',area:'' }
			];
			//3 end
			
			//4 -------------定义一个数组countryChildrenList，用来存放国家名称
			var countryChildrenList = [];
			for(var i=0,l=countryItems.length; i<rows; i++){
				countryChildrenList.push(dojo.mixin({ id: 'country_' + i },countryItems[i%l]));
			}
			//4 end
			
			//5 -------------定义一个json字符串cityItems，用来描述城市名称。
			cityItems = [
				{name:'Nairobi',type:'city',{name:'Mombasa',{name:'Khartoum',{name:'Mexico City',population:'19 million',area:'',timezone:'-6 UTC'},{name:'Guadalajara',population:'4 million',timezone:'-6 UTC' },{name:'Ottawa',population:'0.9 million',timezone:'-5 UTC'},{name:'Toronto',population:'2.5 million',timezone:'-5 UTC' },];
			//5 end
			
			//6 -------------定义一个数组cityChildrenList，用来存放城市名称
			var cityChildrenList = [];
			for(var i=0,l=cityItems.length; i<rows; i++){
				cityChildrenList.push(dojo.mixin({ id: 'city_' + i },cityItems[i%l]));
			}
			//6 end
			
			
			//1,continentChildrenList: 大洲
			//2,countryChildrenList: 国家
			//3,cityChildrenList: 城市
			var dataItems = {
				identifier: 'id',label: 'name',items: [
					{id:'Continent',name:'Continent',type:'',population: '',area: '',children: continentChildrenList},{id:"Country",name:"Country",type:"",children: countryChildrenList},{id:"City",name:"City",children: cityChildrenList}
				]
			};
			
			var readStore = new dojo.data.ItemFileReadStore({data: dataItems});
			//注意countryStore的json数据

			var writeStore = new dojo.data.ItemFileWriteStore({url: "support/countryStore.json?"});
			var model1 = new dijit.tree.ForestStoreModel({store: readStore,childrenAttrs: ['children']})
			var model2 = new dojox.grid.LazyTreeGridStoreModel({store: writeStore,childrenAttrs: ['children']});
			
			var layout = [
				{name: 'Name',field: 'name',width: 'auto'},{name: 'Type',field: 'type',{name: 'Population',field: 'population',{name: 'Area',field: 'area',width: 'auto'}
			]
			
			function refresh(flg){
				grid2.refresh(flg);
			}
			var idx = 0;
			
			//增加一项
			function addItem(){
				var item = {id:'test_' + idx,name:'test_' + (idx++),area: ''};
				grid2.store.newItem(item);
			}
			//增一个子节点
			function addChildItem(){
				var parentItem = grid2.selection.getSelected()[0];
				if(parentItem){
					var item = {id:'test_child_' + idx,name:'test_child_' + (idx++),area: ''};
					grid2.store.newItem(item,{parent: parentItem,attribute: "children"});
				}
			}
			//移除掉一个子节点。 
			function removeSelected(){
				grid2.removeSelectedRows();
			}
			//展开所有节点
			function expandSelected(){
				var item = grid2.selection.getSelected()[0];
				if(item){
					grid2.expand(grid2.store.getIdentity(item));
				}
			}
			//收缩所有节点。 
			function collapseSelected(){
				var item = grid2.selection.getSelected()[0];
				if(item){
					grid2.collapse(grid2.store.getIdentity(item));
				}
			}
			
			
			dojo.addOnLoad( 
				function()
				{
					alert("wawawa1");
				}
			);
			
		</script>
    </head>
    <body class="claro">
        <h1 class="title">Test: dojox.grid.TreeGrid - Lazy-loading for children items</h1>
		<h2>grid 1</h2>
		<div id='grid1' jsid='grid1' dojoType='dojox.grid.LazyTreeGrid' summary="A customized tree grid summary"
				structure='layout' treeModel='model1' rowSelector='true'></div>
				
		<h2>grid 2</h2>
		<div id='grid2' jsid='grid2' dojoType='dojox.grid.LazyTreeGrid'
				structure='layout' treeModel='model2' 
				keepSelection='true' rowSelector='true'></div>
		
		<button dojoType="dijit.form.Button" onClick="refresh(true)">Refresh with state</button>
		<button dojoType="dijit.form.Button" onClick="refresh(false)">Refresh without state</button>
		<button dojoType="dijit.form.Button" onClick="addItem()">Add Item</button>
		<button dojoType="dijit.form.Button" onClick="addChildItem()">Add Child Item</button>
		<button dojoType="dijit.form.Button" onClick="removeSelected()">Delete Selected</button>
		<button dojoType="dijit.form.Button" onClick="expandSelected()">Expand Selected</button>
		<button dojoType="dijit.form.Button" onClick="collapseSelected()">Collapse Selected</button>
    </body>
</html>
countryStore.json数据：

 
 
  
  
{ identifier: 'name',items: [
{ name:'Africa',children:[
{ name:'Egypt',type:'country' },{ name:'Kenya',children:[
{ name:'Nairobi',adults: 70400,popnum: 2940911 },{ name:'Mombasa',adults: 294091,popnum: 707400 } ]
},{ name:'Sudan',children:
{ name:'Khartoum',adults: 480293,popnum: 1200394 }
} ]
},{ name:'Asia',children:[
{ name:'China',{ name:'India',{ name:'Russia',{ name:'Mongolia',type:'country' } ]
},{ name:'Australia',children:
{ name:'Commonwealth of Australia',population:'21 million'}
},{ name:'Europe',children:[
{ name:'Germany',{ name:'France',{ name:'Spain',{ name:'Italy',{ name:'North America',children:[
{ name:'Mexico',550 sq km',children:[
{ name:'Mexico City',adults: 120394,popnum: 19394839,{ name:'Guadalajara',adults: 1934839,popnum: 4830293,timezone:'-6 UTC' } ]
},{ name:'Canada',670 sq km',children:[
{ name:'Ottawa',adults: 230493,popnum: 9382019,{ name:'Toronto',adults: 932019,popnum: 2530493,timezone:'-5 UTC' }]
},{ name:'United States of America',{ name:'South America',children:[
{ name:'Brazil',population:'186 million' },{ name:'Argentina',population:'40 million' } ]
} ]
}

上面的例子是dojo grid的延迟加载，是读取json文件。我做的例子从后台传回数据与json文件的数据格式一样了，但是还没有绑定到grid中，还需要在查找一些资料

DOJO grid一个小例子

猜你在找的Dojo相关文章