diff options
| author | mleibman <michael.leibman@gmail.com> | 2010-12-04 19:10:19 -0800 |
|---|---|---|
| committer | mleibman <michael.leibman@gmail.com> | 2010-12-04 19:10:19 -0800 |
| commit | e60c34b2bf3985e02cdf32855ab3d8f61f93bbab (patch) | |
| tree | 916fef01a952af38d91ab007c12a3bff404bcce1 /examples | |
| parent | 677d4a25e7c3c3284fb7a029a5d8c85029d760a2 (diff) | |
| download | SlickGrid-e60c34b2bf3985e02cdf32855ab3d8f61f93bbab.zip SlickGrid-e60c34b2bf3985e02cdf32855ab3d8f61f93bbab.tar.gz SlickGrid-e60c34b2bf3985e02cdf32855ab3d8f61f93bbab.tar.bz2 | |
Added a fixed header row and an example of how to use it to implement inline column filters.
Renamed "secondary header row" to "top panel" for clarity.
Diffstat (limited to 'examples')
| -rw-r--r-- | examples/example-header-row.html | 137 | ||||
| -rw-r--r-- | examples/example4-model.html | 12 | ||||
| -rw-r--r-- | examples/slick-default-theme.css | 10 |
3 files changed, 153 insertions, 6 deletions
diff --git a/examples/example-header-row.html b/examples/example-header-row.html new file mode 100644 index 0000000..bcba6d1 --- /dev/null +++ b/examples/example-header-row.html @@ -0,0 +1,137 @@ +<!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.5.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="width:600px;float:left;"> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> + + <div class="options-panel" style="width:320px;margin-left:650px;"> + <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> + + <script src="../lib/firebugx.js"></script> + + <script src="../lib/jquery-1.4.3.min.js"></script> + <script src="../lib/jquery-ui-1.8.5.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; + } + } + } + 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.rows, columns, options); + + + dataView.onRowCountChanged.subscribe(function(e,args) { + grid.updateRowCount(); + grid.render(); + }); + + dataView.onRowsChanged.subscribe(function(e,rows) { + grid.invalidateRows(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> diff --git a/examples/example4-model.html b/examples/example4-model.html index 5118c2d..260cd63 100644 --- a/examples/example4-model.html +++ b/examples/example4-model.html @@ -118,7 +118,7 @@ enableCellNavigation: true, asyncEditorLoading: true, forceFitColumns: false, - secondaryHeaderRowHeight: 25 + topPanelHeight: 25 }; var sortcol = "title"; @@ -153,10 +153,10 @@ } function toggleFilterRow() { - if ($(grid.getSecondaryHeaderRow()).is(":visible")) - grid.hideSecondaryHeaderRow(); + if ($(grid.getTopPanel()).is(":visible")) + grid.hideTopPanel(); else - grid.showSecondaryHeaderRow(); + grid.showTopPanel(); } @@ -194,9 +194,9 @@ var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options); - // move the filter panel defined in a hidden div into an inline secondary grid header row + // move the filter panel defined in a hidden div into grid top panel $("#inlineFilterPanel") - .appendTo(grid.getSecondaryHeaderRow()) + .appendTo(grid.getTopPanel()) .show(); grid.onCellChange.subscribe(function(e,args) { diff --git a/examples/slick-default-theme.css b/examples/slick-default-theme.css index 797a6ce..0a8d93b 100644 --- a/examples/slick-default-theme.css +++ b/examples/slick-default-theme.css @@ -19,6 +19,16 @@ classes should alter those! background: white url('../images/header-columns-over-bg.gif') repeat-x center bottom; } +.slick-headerrow { + background: #fafafa; +} + +.slick-headerrow-column { + background: #fafafa; + border-bottom: 0; + height: 100%; +} + .slick-row.ui-state-active { background: #F5F7D7; } |