summaryrefslogtreecommitdiffstats
path: root/examples/example-header-row.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/example-header-row.html
parent6634f168da6a03ce36a4a63c83f9acd1c33cbd5d (diff)
downloadSlickGrid-061ac59fb6a4c09a49d5abe1fa86c26f9d13bf66.zip
SlickGrid-061ac59fb6a4c09a49d5abe1fa86c26f9d13bf66.tar.gz
SlickGrid-061ac59fb6a4c09a49d5abe1fa86c26f9d13bf66.tar.bz2
Reformatted code.
Diffstat (limited to 'examples/example-header-row.html')
-rw-r--r--examples/example-header-row.html269
1 files changed, 134 insertions, 135 deletions
diff --git a/examples/example-header-row.html b/examples/example-header-row.html
index 9f03a4f..ba3532a 100644
--- a/examples/example-header-row.html
+++ b/examples/example-header-row.html
@@ -1,139 +1,138 @@
<!DOCTYPE HTML>
<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" />
- <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>
- .slick-headerrow-column {
- background: #87ceeb;
- }
-
- .slick-headerrow-column input {
- margin: 0;
- padding: 0;
- }
- </style>
- </head>
- <body>
- <div style="position:relative">
- <div style="width:600px;">
- <div id="myGrid" style="width:100%;height:500px;"></div>
- </div>
-
- <div class="options-panel">
- <h2>Demonstrates:</h2>
- <ul>
- <li>Using a fixed header row to implement column-level filters</li>
- <li>Type numbers in textboxes to filter grid data</li>
- </ul>
- </div>
- </div>
-
- <script src="../lib/firebugx.js"></script>
-
- <script src="../lib/jquery-1.7.min.js"></script>
- <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
- <script src="../lib/jquery.event.drag-2.0.min.js"></script>
-
- <script src="../slick.core.js"></script>
- <script src="../slick.dataview.js"></script>
- <script src="../slick.grid.js"></script>
-
- <script>
- var dataView;
- var grid;
- var data = [];
- var options = {
- enableCellNavigation: true,
- showHeaderRow: true
- };
- var columns = [];
- var columnFilters = {};
-
- for (var i = 0; i < 10; i++) {
- columns.push({
- id: i,
- name: String.fromCharCode("A".charCodeAt(0) + i),
- field: i,
- width: 60
- });
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+ <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" />
+ <link rel="stylesheet" href="../slick.grid.css" type="text/css" />
+ <link rel="stylesheet" href="examples.css" type="text/css" />
+ <style>
+ .slick-headerrow-column {
+ background: #87ceeb;
+ }
+
+ .slick-headerrow-column input {
+ margin: 0;
+ padding: 0;
+ }
+ </style>
+</head>
+<body>
+<div style="position:relative">
+ <div style="width:600px;">
+ <div id="myGrid" style="width:100%;height:500px;"></div>
+ </div>
+
+ <div class="options-panel">
+ <h2>Demonstrates:</h2>
+ <ul>
+ <li>Using a fixed header row to implement column-level filters</li>
+ <li>Type numbers in textboxes to filter grid data</li>
+ </ul>
+ </div>
+</div>
+
+<script src="../lib/firebugx.js"></script>
+
+<script src="../lib/jquery-1.7.min.js"></script>
+<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
+<script src="../lib/jquery.event.drag-2.0.min.js"></script>
+
+<script src="../slick.core.js"></script>
+<script src="../slick.dataview.js"></script>
+<script src="../slick.grid.js"></script>
+
+<script>
+ var dataView;
+ var grid;
+ var data = [];
+ var options = {
+ enableCellNavigation:true,
+ showHeaderRow:true
+ };
+ var columns = [];
+ var columnFilters = {};
+
+ for (var i = 0; i < 10; i++) {
+ columns.push({
+ id:i,
+ name:String.fromCharCode("A".charCodeAt(0) + i),
+ field:i,
+ width:60
+ });
+ }
+
+
+ function updateHeaderRow() {
+ for (var i = 0; i < columns.length; i++) {
+ if (columns[i].id !== "selector") {
+ var header = grid.getHeaderRowColumn(columns[i].id);
+ $(header).empty();
+ $("<input type='text'>")
+ .data("columnId", columns[i].id)
+ .width($(header).width() - 4)
+ .val(columnFilters[columns[i].id])
+ .appendTo(header);
+ }
+ }
+ }
+
+ function filter(item) {
+ for (var columnId in columnFilters) {
+ if (columnId !== undefined && columnFilters[columnId] !== "") {
+ var c = grid.getColumns()[grid.getColumnIndex(columnId)];
+ if (item[c.field] != columnFilters[columnId]) {
+ return false;
}
-
-
- function updateHeaderRow() {
- for (var i = 0; i < columns.length; i++) {
- if (columns[i].id !== "selector") {
- var header = grid.getHeaderRowColumn(columns[i].id);
- $(header).empty();
- $("<input type='text'>")
- .data("columnId", columns[i].id)
- .width($(header).width() - 4)
- .val(columnFilters[columns[i].id])
- .appendTo(header);
- }
- }
- }
-
- function filter(item) {
- for (var columnId in columnFilters) {
- if (columnId !== undefined && columnFilters[columnId] !== "") {
- var c = grid.getColumns()[grid.getColumnIndex(columnId)];
- if (item[c.field] != columnFilters[columnId]) {
- return false;
- }
- }
- }
- return true;
- }
-
- $(function()
- {
- for (var i=0; i<100; i++) {
- var d = (data[i] = {});
- d["id"] = i;
- for (var j=0; j<columns.length; j++) {
- d[j] = Math.round(Math.random() * 10);
- }
- }
-
- dataView = new Slick.Data.DataView();
- grid = new Slick.Grid("#myGrid", dataView, columns, options);
-
-
- dataView.onRowCountChanged.subscribe(function(e,args) {
- grid.updateRowCount();
- grid.render();
- });
-
- dataView.onRowsChanged.subscribe(function(e,args) {
- grid.invalidateRows(args.rows);
- grid.render();
- });
-
- $(grid.getHeaderRow()).delegate(":input", "change keyup", function(e) {
- columnFilters[$(this).data("columnId")] = $.trim($(this).val());
- dataView.refresh();
- });
-
-
- grid.onColumnsReordered.subscribe(function(e, args) {
- updateHeaderRow();
- });
-
- grid.onColumnsResized.subscribe(function(e, args) {
- updateHeaderRow();
- });
-
- dataView.beginUpdate();
- dataView.setItems(data);
- dataView.setFilter(filter);
- dataView.endUpdate();
-
- updateHeaderRow();
-
- })
- </script>
- </body>
+ }
+ }
+ return true;
+ }
+
+ $(function () {
+ for (var i = 0; i < 100; i++) {
+ var d = (data[i] = {});
+ d["id"] = i;
+ for (var j = 0; j < columns.length; j++) {
+ d[j] = Math.round(Math.random() * 10);
+ }
+ }
+
+ dataView = new Slick.Data.DataView();
+ grid = new Slick.Grid("#myGrid", dataView, columns, options);
+
+
+ dataView.onRowCountChanged.subscribe(function (e, args) {
+ grid.updateRowCount();
+ grid.render();
+ });
+
+ dataView.onRowsChanged.subscribe(function (e, args) {
+ grid.invalidateRows(args.rows);
+ grid.render();
+ });
+
+ $(grid.getHeaderRow()).delegate(":input", "change keyup", function (e) {
+ columnFilters[$(this).data("columnId")] = $.trim($(this).val());
+ dataView.refresh();
+ });
+
+
+ grid.onColumnsReordered.subscribe(function (e, args) {
+ updateHeaderRow();
+ });
+
+ grid.onColumnsResized.subscribe(function (e, args) {
+ updateHeaderRow();
+ });
+
+ dataView.beginUpdate();
+ dataView.setItems(data);
+ dataView.setFilter(filter);
+ dataView.endUpdate();
+
+ updateHeaderRow();
+
+ })
+</script>
+</body>
</html>
generated by cgit v1.1 at 2025-05-12 18:02:18 +0000