这周的工作是研究dojo grid 的树状gird。但是大部分时间用来改各种各样的bug了,一共没有两天来调查这个东西，从网上找了一些例子，分享一下。 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transi
这周的工作是研究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', type:'continent', population:'', area:''},
{name:'Asia', type:'continent', population:'', area:''},
{name:'Oceania', type:'continent', population:'', area:''},
{name:'Europe', type:'continent', population:'', 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', population:'', area:''},
{name: 'Kenya', type: 'country', population:'', area:''},
{name:'Sudan', type:'country', population:'', area:''},
{name:'China', type:'country' , population:'', area:''},
{name:'India', type:'country' , population:'', area:''},
{name:'Russia', type:'country' , population:'', area:''},
{name:'Mongolia', type:'country', population:'', area:'' },
{name:'Australia', type:'country', population:'21 million', area:''},
{name:'Germany', type:'country', population:'', area:'' },
{name:'France', type:'country', population:'', area:'' },
{name:'Spain', type:'country', population:'', area:'' },
{name:'Italy', type:'country', population:'', area:'' },
{name:'Mexico', type:'country', population:'108 million', area:'1,972,550 sq km'},
{name:'Canada', type:'country', population:'33 million', area:'9,984,670 sq km'},
{name:'United States of America', type:'country', population:'', area:'' },
{name:'Brazil', type:'country', population:'186 million', area:'' },
{name:'Argentina', type:'country', 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', population:'', area:''},
{name:'Mombasa', type:'city', population:'', area:''},
{name:'Khartoum', type:'city', population:'', area:''},
{name:'Mexico City', type:'city', population:'19 million', area:'', timezone:'-6 UTC'},
{name:'Guadalajara', type:'city', population:'4 million', area:'', timezone:'-6 UTC' },
{name:'Ottawa', type:'city', population:'0.9 million', area:'', timezone:'-5 UTC'},
{name:'Toronto', type:'city', population:'2.5 million', area:'', 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:"", population: '', area: '', children: countryChildrenList},
{id:"City", name:"City", type:"", population: '', area: '', 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', width: 'auto'},
{name: 'Population', field: 'population', width: 'auto'},
{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++), type:'', population: '', 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++), type:'', population: '', 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',
label: 'name',
items: [
{ name:'Africa', type:'continent', children:[
{ name:'Egypt', type:'country' },
{ name:'Kenya', type:'country', children:[
{ name:'Nairobi', type:'city', adults: 70400, popnum: 2940911 },
{ name:'Mombasa', type:'city', adults: 294091, popnum: 707400 } ]
},
{ name:'Sudan', type:'country', children:
{ name:'Khartoum', type:'city', adults: 480293, popnum: 1200394 }
} ]
},
{ name:'Asia', type:'continent', children:[
{ name:'China', type:'country' },
{ name:'India', type:'country' },
{ name:'Russia', type:'country' },
{ name:'Mongolia', type:'country' } ]
},
{ name:'Australia', type:'continent', population:'21 million', children:
{ name:'Commonwealth of Australia', type:'country', population:'21 million'}
},
{ name:'Europe', type:'continent', children:[
{ name:'Germany', type:'country' },
{ name:'France', type:'country' },
{ name:'Spain', type:'country' },
{ name:'Italy', type:'country' } ]
},
{ name:'North America', type:'continent', children:[
{ name:'Mexico', type:'country', population:'108 million', area:'1,972,550 sq km', children:[
{ name:'Mexico City', type:'city', adults: 120394, popnum: 19394839, population:'19 million', timezone:'-6 UTC'},
{ name:'Guadalajara', type:'city', adults: 1934839, popnum: 4830293, population:'4 million', timezone:'-6 UTC' } ]
},
{ name:'Canada', type:'country', population:'33 million', area:'9,984,670 sq km', children:[
{ name:'Ottawa', type:'city', adults: 230493, popnum: 9382019, population:'0.9 million', timezone:'-5 UTC'},
{ name:'Toronto', type:'city', adults: 932019, popnum: 2530493, population:'2.5 million', timezone:'-5 UTC' }]
},
{ name:'United States of America', type:'country' } ]
},
{ name:'South America', type:'continent', children:[
{ name:'Brazil', type:'country', population:'186 million' },
{ name:'Argentina', type:'country', population:'40 million' } ]
} ]
}
上面的例子是dojo grid的延迟加载，是读取json文件。我做的例子从后台传回数据与json文件的数据格式一样了，但是还没有绑定到grid中，还需要在查找一些资料