diff options
| author | mleibman <michael.leibman@gmail.com> | 2010-11-28 04:02:32 -0800 |
|---|---|---|
| committer | mleibman <michael.leibman@gmail.com> | 2010-11-28 04:02:32 -0800 |
| commit | 6fe438fbd5efdef171031d3141c3cefa5fbebe27 (patch) | |
| tree | c8d3758cf43b47dbf36d23748e01f376dc4eaaca /examples/example-checkbox-row-select.html | |
| parent | 4e6859b47e2064b6a9e16f868509336ea64069bd (diff) | |
| download | SlickGrid-6fe438fbd5efdef171031d3141c3cefa5fbebe27.zip SlickGrid-6fe438fbd5efdef171031d3141c3cefa5fbebe27.tar.gz SlickGrid-6fe438fbd5efdef171031d3141c3cefa5fbebe27.tar.bz2 | |
Added "updateColumnHeader" grid method.
Added selected row caching and de-duplication to the grid.
Added an option to selection models on whether to select active cell/row.
Added an example of a checkbox select column implementation.
Diffstat (limited to 'examples/example-checkbox-row-select.html')
| -rw-r--r-- | examples/example-checkbox-row-select.html | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/examples/example-checkbox-row-select.html b/examples/example-checkbox-row-select.html new file mode 100644 index 0000000..f014a8f --- /dev/null +++ b/examples/example-checkbox-row-select.html @@ -0,0 +1,176 @@ +<!DOCTYPE HTML> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> + <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="examples.css" type="text/css" media="screen" charset="utf-8" /> + <style> + .slick-cell-checkboxsel { + background: #f0f0f0; + border-right-color: silver; + border-right-style: solid; + } + </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> + </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="../plugins/slick.autotooltips.js"></script> + <script src="../plugins/slick.cellrangedecorator.js"></script> + <script src="../plugins/slick.cellrangeselector.js"></script> + <script src="../plugins/slick.cellcopymanager.js"></script> + <script src="../plugins/slick.cellselectionmodel.js"></script> + <script src="../plugins/slick.rowselectionmodel.js"></script> + <script src="../slick.editors.js"></script> + <script src="../slick.grid.js"></script> + + <script> + var selectedRowsLookup = {}; + var grid; + var data = []; + var options = { + editable: true, + enableCellNavigation: true, + asyncEditorLoading: false, + autoEdit: false + }; + + var columns = [{ + id: "selector", + name: "<input type='checkbox'>", + toolTip: "Select All", + field: "sel", + width: 30, + unselectable: true, + resizable: false, + sortable: false, + cssClass: "slick-cell-checkboxsel", + formatter: CheckboxSelectionFormatter + }]; + + for (var i = 0; i < 5; i++) { + columns.push({ + id: i, + name: String.fromCharCode("A".charCodeAt(0) + i), + field: i, + width: 100, + editor: TextCellEditor + }); + } + + /*** + * A simple cell formatter that uses a lookup global variable (selectedRowsLookup) to + * identify whether a row is selected. The lookup is updated in an onSelectedRowsChanged handler. + * The onClick handler toggles row selection. + */ + function CheckboxSelectionFormatter(row, cell, value, columnDef, dataContext) { + if (dataContext) { + return selectedRowsLookup[row] + ? "<input type='checkbox' checked='checked'>" + : "<input type='checkbox'>"; + } + return null; + } + + + $(function() + { + for (var i=0; i<100; i++) { + var d = (data[i] = {}); + d[0] = "Row " + i; + } + + grid = new Slick.Grid("#myGrid", data, columns, options); + grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false})); + + grid.onSelectedRowsChanged.subscribe(function(e,args) { + var selectedRows = grid.getSelectedRows(); + var lookup = {}, row, i; + for (i = 0; i < selectedRows.length; i++) { + row = selectedRows[i]; + lookup[row] = true; + if (lookup[row] !== selectedRowsLookup[row]) { + grid.invalidateRow(row); + delete selectedRowsLookup[row]; + } + } + for (i in selectedRowsLookup) { + grid.invalidateRow(i); + } + selectedRowsLookup = lookup; + grid.render(); + + if (selectedRows.length == data.length) { + grid.updateColumnHeader("selector", "<input type='checkbox' checked='checked'>", "Unselect All"); + } + else { + grid.updateColumnHeader("selector", "<input type='checkbox'>", "Select All"); + } + }); + + grid.onClick.subscribe(function(e, args) { + // clicking on a row select checkbox + if ($(e.target).is(".slick-cell-checkboxsel :checkbox")) { + // if editing, try to commit + if (grid.getEditorLock().isActive() && !grid.getEditorLock().commitCurrentEdit()) { + e.preventDefault(); + e.stopImmediatePropagation(); + return; + } + + if (selectedRowsLookup[args.row]) { + grid.setSelectedRows($.grep(grid.getSelectedRows(),function(n) { return n != args.row })); + } + else { + grid.setSelectedRows(grid.getSelectedRows().concat(args.row)); + } + e.stopPropagation(); + e.stopImmediatePropagation(); + } + }); + + grid.onHeaderClick.subscribe(function(e, args) { + if (args.column.id == "selector") { + // if editing, try to commit + if (grid.getEditorLock().isActive() && !grid.getEditorLock().commitCurrentEdit()) { + e.preventDefault(); + e.stopImmediatePropagation(); + return; + } + + if ($(e.target).is(":checked")) { + var rows = []; + for (var i = 0; i < data.length; i++) { + rows.push(i); + } + grid.setSelectedRows(rows); + } + else { + grid.setSelectedRows([]); + } + // could update the existing dom nodes instead, but whatever + grid.invalidate(); + e.stopPropagation(); + e.stopImmediatePropagation(); + } + }) + }) + </script> + </body> +</html> |