summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--examples/example-checkbox-row-select.html125
-rw-r--r--plugins/slick.checkboxselectcolumn.js139
2 files changed, 157 insertions, 107 deletions
diff --git a/examples/example-checkbox-row-select.html b/examples/example-checkbox-row-select.html
index d326e71..9ce8132 100644
--- a/examples/example-checkbox-row-select.html
+++ b/examples/example-checkbox-row-select.html
@@ -32,6 +32,7 @@
<script src="../lib/jquery.event.drag-2.0.min.js"></script>
<script src="../slick.core.js"></script>
+<script src="../plugins/slick.checkboxselectcolumn.js"></script>
<script src="../plugins/slick.autotooltips.js"></script>
<script src="../plugins/slick.cellrangedecorator.js"></script>
<script src="../plugins/slick.cellrangeselector.js"></script>
@@ -42,7 +43,6 @@
<script src="../slick.grid.js"></script>
<script>
- var selectedRowsLookup = {};
var grid;
var data = [];
var options = {
@@ -51,43 +51,7 @@
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;
- }
+ var columns = [];
$(function()
@@ -97,80 +61,27 @@
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");
- }
+ var checkboxSelector = new Slick.CheckboxSelectColumn({
+ cssClass: "slick-cell-checkboxsel"
});
- 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;
- }
+ columns.push(checkboxSelector.getColumnDefinition());
- 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();
- }
- });
+ for (var i = 0; i < 5; i++) {
+ columns.push({
+ id: i,
+ name: String.fromCharCode("A".charCodeAt(0) + i),
+ field: i,
+ width: 100,
+ editor: TextCellEditor
+ });
+ }
- 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();
- }
- })
+ grid = new Slick.Grid("#myGrid", data, columns, options);
+ grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow:false}));
+ grid.registerPlugin(checkboxSelector);
+
})
</script>
</body>
diff --git a/plugins/slick.checkboxselectcolumn.js b/plugins/slick.checkboxselectcolumn.js
new file mode 100644
index 0000000..768d395
--- /dev/null
+++ b/plugins/slick.checkboxselectcolumn.js
@@ -0,0 +1,139 @@
+(function($) {
+ // register namespace
+ $.extend(true, window, {
+ "Slick": {
+ "CheckboxSelectColumn": CheckboxSelectColumn
+ }
+ });
+
+
+ function CheckboxSelectColumn(options) {
+ var _grid;
+ var _self = this;
+ var _selectedRowsLookup = {};
+ var _defaults = {
+ columnId: "_checkbox_selector",
+ cssClass: null,
+ toolTip: "Select/Deselect All",
+ width: 30
+ };
+
+ var _options = $.extend(true,{},_defaults,options);
+
+ function init(grid) {
+ _grid = grid;
+ _grid.onSelectedRowsChanged.subscribe(handleSelectedRowsChanged);
+ _grid.onClick.subscribe(handleClick);
+ _grid.onHeaderClick.subscribe(handleHeaderClick);
+ }
+
+ function destroy() {
+ _grid.onSelectedRowsChanged.unsubscribe(handleSelectedRowsChanged);
+ _grid.onClick.unsubscribe(handleClick);
+ _grid.onHeaderClick.unsubscribe(handleHeaderClick);
+ }
+
+ function handleSelectedRowsChanged(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 == _grid.getDataLength()) {
+ _grid.updateColumnHeader(_options.columnId, "<input type='checkbox' checked='checked'>", _options.toolTip);
+ }
+ else {
+ _grid.updateColumnHeader(_options.columnId, "<input type='checkbox'>", _options.toolTip);
+ }
+ }
+
+ function handleClick(e, args) {
+ // clicking on a row select checkbox
+ if (_grid.getColumns()[args.cell].id === _options.columnId && $(e.target).is(":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();
+ }
+ }
+
+ function handleHeaderClick(e, args) {
+ if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) {
+ // 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 < _grid.getDataLength(); 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();
+ }
+ }
+
+ function getColumnDefinition() {
+ return {
+ id: _options.columnId,
+ name: "<input type='checkbox'>",
+ toolTip: _options.toolTip,
+ field: "sel",
+ width: _options.width,
+ unselectable: true,
+ resizable: false,
+ sortable: false,
+ cssClass: _options.cssClass,
+ formatter: checkboxSelectionFormatter
+ };
+ }
+
+ function checkboxSelectionFormatter(row, cell, value, columnDef, dataContext) {
+ if (dataContext) {
+ return _selectedRowsLookup[row]
+ ? "<input type='checkbox' checked='checked'>"
+ : "<input type='checkbox'>";
+ }
+ return null;
+ }
+
+ $.extend(this, {
+ "init": init,
+ "destroy": destroy,
+
+ "getColumnDefinition": getColumnDefinition
+ });
+ }
+})(jQuery); \ No newline at end of file
generated by cgit v1.1 at 2025-06-05 20:35:08 +0000