<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Pagination Extension with tree plugin</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../../dojo/resources/dojo.css";
|
@import "../../css/dgrid.css";
|
@import "../../css/skins/claro.css";
|
.heading {
|
font-weight: bold;
|
padding-bottom: 0.25em;
|
}
|
.dgrid {
|
width: 750px;
|
margin: 10px;
|
}
|
|
#grid2 .dgrid-row {
|
height: 22px;
|
}
|
#grid2 .dgrid-cell {
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
</style>
|
<script src="../../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
require(["dgrid/Grid", "dgrid/extensions/Pagination", "dgrid/Selection", "dgrid/Tree",
|
"dojo/_base/lang", "dojo/_base/declare", "dojo/dom-construct", "dojo/dom-form",
|
"dstore/Rest", "dstore/Cache", "dstore/Trackable", "dstore/Tree", "dojo/domReady!"],
|
function(Grid, Pagination, Selection, Tree,
|
lang, declare, domConstruct, domForm,
|
Rest, Cache, Trackable, TreeStore){
|
|
var CustomGrid = declare([Grid, Selection, Pagination, Tree]);
|
var testStore;
|
|
function createStore(config){
|
testStore = new declare([ Rest, Cache, Trackable, TreeStore ])(lang.mixin({
|
target:"../data/rest.php"
|
}, config));
|
}
|
createStore();
|
|
function getColumns(){
|
return [
|
{label:'Name', field:'name', sortable: false, renderExpando: true},
|
{label:'Id', field:'id', sortable: true},
|
{label:'Comment', field:'comment', sortable: false}
|
];
|
}
|
|
window.grid2 = new CustomGrid({
|
className: "dgrid-autoheight",
|
collection: testStore,
|
columns: getColumns(),
|
pagingLinks: false,
|
pagingTextBox: true,
|
firstLastArrows: true,
|
pageSizeOptions: [10, 15, 25]
|
}, "grid2");
|
|
function createGrid(args){
|
window.grid = new CustomGrid(lang.mixin({
|
collection: testStore,
|
columns: getColumns()
|
}, args),
|
"grid");
|
}
|
createGrid();
|
|
var form = document.getElementById("configForm");
|
form.onsubmit = function() {
|
var args = domForm.toObject(form);
|
args.pagingLinks = +args.pagingLinks;
|
if (!args.previousNextArrows) { args.previousNextArrows = false; }
|
if (!args.showLoadingMessage) { args.showLoadingMessage = false; }
|
|
// recreate grid using args from form
|
window.grid.destroy();
|
domConstruct.create("div", { id: "grid" }, form, "after");
|
createStore({ useRangeHeaders: args.useRangeHeaders});
|
args.useRangeHeaders = undefined;
|
createGrid(args);
|
|
return false;
|
};
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>A basic grid with the Pagination extension with tree plugin</h2>
|
<h3>Configuration</h3>
|
<form id="configForm">
|
<div><label><input type="checkbox" name="useRangeHeaders">
|
Use request range headers (rather than limit parameter)</label></div>
|
<div><label><input type="checkbox" name="firstLastArrows">
|
Show first/last page arrows</label></div>
|
<div><label><input type="checkbox" name="previousNextArrows" checked>
|
Show previous/next page arrows</label></div>
|
<div><label><input type="checkbox" name="pagingTextBox">
|
Show "jump-to" textbox</label></div>
|
<div><label><input type="checkbox" name="showLoadingMessage" checked>
|
Show loading message while loading data</label></div>
|
<div>
|
<label><input type="text" name="pagingLinks" value="2" size="1">
|
Number of neighboring page numbers to display to each side of current
|
(0 to disable)</label>
|
</div>
|
<div><button type="submit">Update Grid</button></div>
|
</form>
|
<div id="grid"></div>
|
<h2>An autoheight grid with the Pagination extension,
|
with a rows-per-page drop-down</h2>
|
<div id="grid2"></div>
|
</body>
|
</html>
|
