You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

153 lines
4.4 KiB

  1. (function ($) {
  2. // register namespace
  3. $.extend(true, window, {
  4. "Slick": {
  5. "CheckboxSelectColumn": CheckboxSelectColumn
  6. }
  7. });
  8. function CheckboxSelectColumn(options) {
  9. var _grid;
  10. var _self = this;
  11. var _handler = new Slick.EventHandler();
  12. var _selectedRowsLookup = {};
  13. var _defaults = {
  14. columnId: "_checkbox_selector",
  15. cssClass: null,
  16. toolTip: "Select/Deselect All",
  17. width: 30
  18. };
  19. var _options = $.extend(true, {}, _defaults, options);
  20. function init(grid) {
  21. _grid = grid;
  22. _handler
  23. .subscribe(_grid.onSelectedRowsChanged, handleSelectedRowsChanged)
  24. .subscribe(_grid.onClick, handleClick)
  25. .subscribe(_grid.onHeaderClick, handleHeaderClick)
  26. .subscribe(_grid.onKeyDown, handleKeyDown);
  27. }
  28. function destroy() {
  29. _handler.unsubscribeAll();
  30. }
  31. function handleSelectedRowsChanged(e, args) {
  32. var selectedRows = _grid.getSelectedRows();
  33. var lookup = {}, row, i;
  34. for (i = 0; i < selectedRows.length; i++) {
  35. row = selectedRows[i];
  36. lookup[row] = true;
  37. if (lookup[row] !== _selectedRowsLookup[row]) {
  38. _grid.invalidateRow(row);
  39. delete _selectedRowsLookup[row];
  40. }
  41. }
  42. for (i in _selectedRowsLookup) {
  43. _grid.invalidateRow(i);
  44. }
  45. _selectedRowsLookup = lookup;
  46. _grid.render();
  47. if (selectedRows.length && selectedRows.length == _grid.getDataLength()) {
  48. _grid.updateColumnHeader(_options.columnId, "<input type='checkbox' checked='checked'>", _options.toolTip);
  49. } else {
  50. _grid.updateColumnHeader(_options.columnId, "<input type='checkbox'>", _options.toolTip);
  51. }
  52. }
  53. function handleKeyDown(e, args) {
  54. if (e.which == 32) {
  55. if (_grid.getColumns()[args.cell].id === _options.columnId) {
  56. // if editing, try to commit
  57. if (!_grid.getEditorLock().isActive() || _grid.getEditorLock().commitCurrentEdit()) {
  58. toggleRowSelection(args.row);
  59. }
  60. e.preventDefault();
  61. e.stopImmediatePropagation();
  62. }
  63. }
  64. }
  65. function handleClick(e, args) {
  66. // clicking on a row select checkbox
  67. if (_grid.getColumns()[args.cell].id === _options.columnId && $(e.target).is(":checkbox")) {
  68. // if editing, try to commit
  69. if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
  70. e.preventDefault();
  71. e.stopImmediatePropagation();
  72. return;
  73. }
  74. toggleRowSelection(args.row);
  75. e.stopPropagation();
  76. e.stopImmediatePropagation();
  77. }
  78. }
  79. function toggleRowSelection(row) {
  80. if (_selectedRowsLookup[row]) {
  81. _grid.setSelectedRows($.grep(_grid.getSelectedRows(), function (n) {
  82. return n != row
  83. }));
  84. } else {
  85. _grid.setSelectedRows(_grid.getSelectedRows().concat(row));
  86. }
  87. }
  88. function handleHeaderClick(e, args) {
  89. if (args.column.id == _options.columnId && $(e.target).is(":checkbox")) {
  90. // if editing, try to commit
  91. if (_grid.getEditorLock().isActive() && !_grid.getEditorLock().commitCurrentEdit()) {
  92. e.preventDefault();
  93. e.stopImmediatePropagation();
  94. return;
  95. }
  96. if ($(e.target).is(":checked")) {
  97. var rows = [];
  98. for (var i = 0; i < _grid.getDataLength(); i++) {
  99. rows.push(i);
  100. }
  101. _grid.setSelectedRows(rows);
  102. } else {
  103. _grid.setSelectedRows([]);
  104. }
  105. e.stopPropagation();
  106. e.stopImmediatePropagation();
  107. }
  108. }
  109. function getColumnDefinition() {
  110. return {
  111. id: _options.columnId,
  112. name: "<input type='checkbox'>",
  113. toolTip: _options.toolTip,
  114. field: "sel",
  115. width: _options.width,
  116. resizable: false,
  117. sortable: false,
  118. cssClass: _options.cssClass,
  119. formatter: checkboxSelectionFormatter
  120. };
  121. }
  122. function checkboxSelectionFormatter(row, cell, value, columnDef, dataContext) {
  123. if (dataContext) {
  124. return _selectedRowsLookup[row]
  125. ? "<input type='checkbox' checked='checked'>"
  126. : "<input type='checkbox'>";
  127. }
  128. return null;
  129. }
  130. $.extend(this, {
  131. "init": init,
  132. "destroy": destroy,
  133. "getColumnDefinition": getColumnDefinition
  134. });
  135. }
  136. })(jQuery);