一个Basic dgrid:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Dgrid Test</title>
<meta name="viewport" content="width=570">
<style>
@import "dojoroot/dojo/resources/dojo.css";
@import "dojoroot/css/skins/claro.css";
@import "dojoroot/dijit/themes/claro/claro.css";
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}
.dgrid {
width: 70%;
margin: 10px;
}
.field-col1 {
width: 40px;
}
#grid-complex .dgrid-cell-padding {
height: 2em; /* force consistent heights across columnset cells */
}
.dgrid-column-set-0 {
width: 42px;
}
#dgrid .dgrid-scroller
{
position: relative;
overflow:hidden;
}
#dgrid {
height: auto;
}
</style>
<script src="dojoroot/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script>
require([
"dojo/on",
"dgrid/Grid",
"dgrid/selector",
"dgrid/Selection",
"dgrid/Keyboard",
"dgrid/ColumnSet",
"dojo/_base/declare",
"dojo/_base/array",
"dgrid/test/data/base",
"dgrid/extensions/Pagination",
"dgrid/editor",
"dijit/form/DateTextBox",
"dojo/domReady!"],
function(on, Grid, selector, Selection, Keyboard, ColumnSet, declare, arrayUtil, myStore, Pagination, editor, DateTextBox){
var myGrid = declare([Grid, Selection, Pagination]);
var dgrid = new myGrid ({
store:testStore,
columns:
{
col1:selector({label:"Col1",sortable:1}),
col2:{label:"Column2",sortable:1},
col3:{label:"Column3",sortable:1},
col4:{label:"Column4",sortable:0},
col5:{label:"Column5",sortable:0},
col6:editor({label:"Date Select",
editorArgs:{constraints:{datePattern:"dd/MM/yyyy"}}},DateTextBox)
},
allowSelectAll:true,
rowsPerPage:5,
pagingLinks:1,
pageSizeOptions:[5,10,15]
},"dgrid");
});
</script>
</head>
<body class="claro">
<h2>A grid with checkbox selectors</h2>
<div id="dgrid"></div>
对于dgrid的Pagination组件,一直没有搞定分页的页面跳转功能,在网上看到的例子,放到自己机器上测试时,页面跳转功能就无效,不知道有没有熟练dgrid的大神指导一下,如何解决。(问题原来是作者提交的代码有问题,已经解决了)