summaryrefslogtreecommitdiffstats
path: root/examples/example13-getItem-sorting.html
diff options
context:
space:
mode:
authorMichael Leibman <michael.leibman@gmail.com>2012-01-17 12:29:57 -0800
committerMichael Leibman <mleibman@google.com>2012-01-17 12:29:57 -0800
commit061ac59fb6a4c09a49d5abe1fa86c26f9d13bf66 (patch)
tree94f65296e682881a84214cd3ed608cc991ccf666 /examples/example13-getItem-sorting.html
parent6634f168da6a03ce36a4a63c83f9acd1c33cbd5d (diff)
downloadSlickGrid-061ac59fb6a4c09a49d5abe1fa86c26f9d13bf66.zip
SlickGrid-061ac59fb6a4c09a49d5abe1fa86c26f9d13bf66.tar.gz
SlickGrid-061ac59fb6a4c09a49d5abe1fa86c26f9d13bf66.tar.bz2
Reformatted code.
Diffstat (limited to 'examples/example13-getItem-sorting.html')
-rw-r--r--examples/example13-getItem-sorting.html197
1 files changed, 112 insertions, 85 deletions
diff --git a/examples/example13-getItem-sorting.html b/examples/example13-getItem-sorting.html
index 1fb2656..bf693f8 100644
--- a/examples/example13-getItem-sorting.html
+++ b/examples/example13-getItem-sorting.html
@@ -1,97 +1,124 @@
<!DOCTYPE html>
<html lang="en">
- <head>
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>SlickGrid example 13: Indexed Sorting using Functional Data Provider</title>
- <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
- <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
- <style>
- html,body { margin:0; padding:0; background-color:White; overflow:auto; }
- body { font:11px Helvetica,Arial,sans-serif; }
- #container { position:absolute; top:0; left:0; right:0; bottom:0; }
- #description { position:fixed; top:30px; right:30px; width:25em; background-color:beige; border:solid 1px gray; z-index:1000; }
- #description h2 { padding-left:0.5em; }
- </style>
- </head>
- <body>
- <div id="container"></div>
- <div id="description">
- <h2>Demonstrates:</h2>
- <ul>
- <li>Sorting grid items by an index</li>
- <li>Using the getItem method to provide data</li>
- </ul>
- </div>
+<head>
+ <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+ <title>SlickGrid example 13: Indexed Sorting using Functional Data Provider</title>
+ <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
+ <link rel="stylesheet" href="examples.css" type="text/css" />
+ <style>
+ html, body {
+ margin: 0;
+ padding: 0;
+ background-color: White;
+ overflow: auto;
+ }
- <script src="../lib/jquery-1.7.min.js"></script>
- <script src="../lib/jquery.event.drag-2.0.min.js"></script>
- <script src="../slick.core.js"></script>
- <script src="../slick.grid.js"></script>
+ body {
+ font: 11px Helvetica, Arial, sans-serif;
+ }
- <script>
- var grid,
- data = [],
- columns = [
- { id: "title", name: "Title", field: "title", width: 240, sortable: true },
- { id: "c1", name: "Sort 1", field: "c1", width: 240, sortable: true },
- { id: "c2", name: "Sort 2", field: "c2", width: 240, sortable: true },
- { id: "c3", name: "Sort 3", field: "c3", width: 240, sortable: true }
- ],
- options = {
- enableCellNavigation: false,
- enableColumnReorder: false
- }, numberOfItems = 25000, items = [], indices, isAsc = true, currentSortCol = { id: "title" }, i;
+ #container {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ }
+ #description {
+ position: fixed;
+ top: 30px;
+ right: 30px;
+ width: 25em;
+ background-color: beige;
+ border: solid 1px gray;
+ z-index: 1000;
+ }
- function randomize(items) {
- /// <summary>
- /// Copies and shuffles the specified array and returns a new shuffled array.
- /// </summary>
- var randomItems = $.extend(true, null, items), randomIndex, temp, index;
- for (index = items.length; index-- > 0;) {
- randomIndex = Math.round(Math.random() * items.length - 1);
- if (randomIndex > -1) {
- temp = randomItems[randomIndex];
- randomItems[randomIndex] = randomItems[index];
- randomItems[index] = temp;
- }
- }
- return randomItems;
- }
+ #description h2 {
+ padding-left: 0.5em;
+ }
+ </style>
+</head>
+<body>
+<div id="container"></div>
+<div id="description">
+ <h2>Demonstrates:</h2>
+ <ul>
+ <li>Sorting grid items by an index</li>
+ <li>Using the getItem method to provide data</li>
+ </ul>
+</div>
- /// Build the items and indices.
- for (i = numberOfItems; i-- > 0;) {
- items[i] = i;
- data[i] = {
- title: "Task ".concat(i + 1)
- };
- }
- indices = { title: items, c1: randomize(items), c2: randomize(items), c3: randomize(items) };
+<script src="../lib/jquery-1.7.min.js"></script>
+<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+<script src="../slick.core.js"></script>
+<script src="../slick.grid.js"></script>
- // Assign values to the data.
- for (i = numberOfItems; i-- > 0;) {
- data[indices.c1[i]].c1 = "Value ".concat(i + 1);
- data[indices.c2[i]].c2 = "Value ".concat(i + 1);
- data[indices.c3[i]].c3 = "Value ".concat(i + 1);
- }
+<script>
+ var grid,
+ data = [],
+ columns = [
+ { id:"title", name:"Title", field:"title", width:240, sortable:true },
+ { id:"c1", name:"Sort 1", field:"c1", width:240, sortable:true },
+ { id:"c2", name:"Sort 2", field:"c2", width:240, sortable:true },
+ { id:"c3", name:"Sort 3", field:"c3", width:240, sortable:true }
+ ],
+ options = {
+ enableCellNavigation:false,
+ enableColumnReorder:false
+ }, numberOfItems = 25000, items = [], indices, isAsc = true, currentSortCol = { id:"title" }, i;
- // Define function used to get the data and sort it.
- function getItem(index) {
- return isAsc ? data[indices[currentSortCol.id][index]] : data[indices[currentSortCol.id][(data.length - 1) - index]];
- }
- function getLength() {
- return data.length;
- }
- grid = new Slick.Grid("#container", {getLength: getLength, getItem: getItem}, columns, options);
- grid.onSort.subscribe(function(e,args) {
- currentSortCol = args.sortCol;
- isAsc = args.sortAsc;
- grid.invalidateAllRows();
- grid.render();
- });
- </script>
+ function randomize(items) {
+ /// <summary>
+ /// Copies and shuffles the specified array and returns a new shuffled array.
+ /// </summary>
+ var randomItems = $.extend(true, null, items), randomIndex, temp, index;
+ for (index = items.length; index-- > 0;) {
+ randomIndex = Math.round(Math.random() * items.length - 1);
+ if (randomIndex > -1) {
+ temp = randomItems[randomIndex];
+ randomItems[randomIndex] = randomItems[index];
+ randomItems[index] = temp;
+ }
+ }
+ return randomItems;
+ }
- </body>
+ /// Build the items and indices.
+ for (i = numberOfItems; i-- > 0;) {
+ items[i] = i;
+ data[i] = {
+ title:"Task ".concat(i + 1)
+ };
+ }
+ indices = { title:items, c1:randomize(items), c2:randomize(items), c3:randomize(items) };
+
+ // Assign values to the data.
+ for (i = numberOfItems; i-- > 0;) {
+ data[indices.c1[i]].c1 = "Value ".concat(i + 1);
+ data[indices.c2[i]].c2 = "Value ".concat(i + 1);
+ data[indices.c3[i]].c3 = "Value ".concat(i + 1);
+ }
+
+ // Define function used to get the data and sort it.
+ function getItem(index) {
+ return isAsc ? data[indices[currentSortCol.id][index]] : data[indices[currentSortCol.id][(data.length - 1) - index]];
+ }
+ function getLength() {
+ return data.length;
+ }
+
+ grid = new Slick.Grid("#container", {getLength:getLength, getItem:getItem}, columns, options);
+ grid.onSort.subscribe(function (e, args) {
+ currentSortCol = args.sortCol;
+ isAsc = args.sortAsc;
+ grid.invalidateAllRows();
+ grid.render();
+ });
+</script>
+
+</body>
</html> \ No newline at end of file
generated by cgit v1.1 at 2025-05-11 23:18:17 +0000