gridx的使用
gridx的使用，主要是绑定事件，给grid的pagination插件绑定事件。
效果如下：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'gridxTest.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" type="text/css" href="js/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="js/gridx/resources/claro/Gridx.css" />
<style type="text/css">
/*applied to a single gridx instance by ID*/
#gridContainer {
width: 600px;
height: 300px;
}
</style>
<script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
require([
"dojo/on",
"gridx/Grid",
"gridx/core/model/cache/Async",
"gridx/modules/VirtualVScroller",
"gridx/modules/ColumnResizer",
"gridx/modules/extendedSelect/Row",
"gridx/modules/SingleSort",
"gridx/modules/RowHeader",
"gridx/modules/IndirectSelect",
"gridx/modules/Pagination",
"gridx/modules/pagination/PaginationBar",
"dojo/store/JsonRest",
"dojo/data/ItemFileWriteStore",
'dojo/_base/lang',
"dojo/domReady!"
], function(on, Grid, Cache,
VirtualVScroller, ColumnResizer, SelectRow,
SingleSort, RowHeader, IndirectSelect,
Pagination, PaginationBar, Store, ItemFileWriteStore, lang){
//Create store here...
//var store = new Store({
// target:"student/list"
//});
var data = {
identifier: "id",
items: []
};
var data_list = [
{ col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
{ col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
{ col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
];
var rows = 60;
for(var i = 0, l = data_list.length; i < rows; i++){
data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
}
var store = new ItemFileWriteStore({
data: data
});
var grid = new Grid({
store: store,
cacheClass: Cache,
structure:[
//{field:"id", name:"id", width:"50px"},
//{field:"name", name:"用户名", width:"50px"},
{'name': 'Column 1', 'field': 'id', 'width': '100px'},
{'name': 'Column 2', 'field': 'col2', 'width': '100px'},
{'name': 'Column 3', 'field': 'col3', 'width': '200px'},
{'name': 'Column 4', 'field': 'col4', 'width': '150px'}
],
selectRowTriggerOnCell: true,
modules: [
VirtualVScroller,
ColumnResizer,
SelectRow,
SingleSort,
RowHeader,
IndirectSelect,
Pagination,
PaginationBar,
]
});
grid.placeAt("gridContainer");
grid.startup();
//这段代码可行，但感觉方法不够合适
//grid.pagination.onSwitchPage = function(currentPage, originalPage){
// this.grid.paginationBar.refresh();
//}
//console.log(grid);
//on(grid, "switchPage", function(){
// alert("123456");
//});
//console.log(grid);
//console.log(grid);
//console.log("Pagination.grid::::::"+grid.pagination.grid);
//grid.pagination.connect("onSwitchPage", function(){
// alert("5555555");
//});
//console.log(grid);
//这段代码会好点，但是换成on的话就更好了
grid.pagination.connect(grid.pagination, "onSwitchPage", function(){
alert("aaaaaaaa");
});
});
</script>
</head>
<body class="claro">
<div id="gridContainer"></div>
</body>
</html>