(function ($) { // register namespace $.extend(true, window, { "Slick": { "CheckboxSelectColumn": CheckboxSelectColumn } }); function CheckboxSelectColumn(options) { var _grid; var _selectAll_UID = createUID(); var _handler = new Slick.EventHandler(); var _selectedRowsLookup = {}; var _defaults = { columnId: "_checkbox_selector", cssClass: null, hideSelectAllCheckbox: false, toolTip: "全部选择/取消", width: 40, hideInColumnTitleRow: false, hideInFilterHeaderRow: true }; var _isSelectAllChecked = false; var _options = $.extend(true, {}, _defaults, options); function init(grid) { _grid = grid; _handler .subscribe(_grid.onSelectedRowsChanged, handleSelectedRowsChanged) .subscribe(_grid.onClick, handleClick) .subscribe(_grid.onKeyDown, handleKeyDown); if (!_options.hideInFilterHeaderRow) { addCheckboxToFilterHeaderRow(grid); } if (!_options.hideInColumnTitleRow) { _handler.subscribe(_grid.onHeaderClick, handleHeaderClick) } } function destroy() { _handler.unsubscribeAll(); } function getCheckBoxHtml(checked) { if (!checked) { return `` } return `` } function getOptions() { return _options; } function setOptions(options) { _options = $.extend(true, {}, _options, options); if (_options.hideSelectAllCheckbox) { hideSelectAllFromColumnHeaderTitleRow(); hideSelectAllFromColumnHeaderFilterRow(); } else { if (!_options.hideInColumnTitleRow) { if (_isSelectAllChecked) { _grid.updateColumnHeader(_options.columnId, getCheckBoxHtml(true), _options.toolTip); } else { _grid.updateColumnHeader(_options.columnId, getCheckBoxHtml(false), _options.toolTip); } _handler.subscribe(_grid.onHeaderClick, handleHeaderClick); } else { hideSelectAllFromColumnHeaderTitleRow(); } if (!_options.hideInFilterHeaderRow) { var selectAllContainer = $("#filter-checkbox-selectall-container"); selectAllContainer.show(); selectAllContainer.find('.el-checkbox').parent().empty().append(getCheckBoxHtml(_isSelectAllChecked)); } else { hideSelectAllFromColumnHeaderFilterRow(); } } } function hideSelectAllFromColumnHeaderTitleRow() { _grid.updateColumnHeader(_options.columnId, "", ""); } function hideSelectAllFromColumnHeaderFilterRow() { $("#filter-checkbox-selectall-container").hide(); } 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(); _isSelectAllChecked = selectedRows.length && selectedRows.length == _grid.getDataLength(); if (!_options.hideInColumnTitleRow && !_options.hideSelectAllCheckbox) { _grid.updateColumnHeader(_options.columnId, getCheckBoxHtml(_isSelectAllChecked), _options.toolTip); } if (!_options.hideInFilterHeaderRow) { var selectAllElm = $("#header-filter-selector" + _selectAll_UID); selectAllElm.prop("checked", _isSelectAllChecked); } } function handleKeyDown(e, args) { if (e.which == 32) { if (_grid.getColumns()[args.cell].id === _options.columnId) { // if editing, try to commit if (!_grid.getEditorLock().isActive() || _grid.getEditorLock().commitCurrentEdit()) { toggleRowSelection(args.row); } e.preventDefault(); e.stopImmediatePropagation(); } } } 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; } toggleRowSelection(args.row); e.stopPropagation(); e.stopImmediatePropagation(); } } function toggleRowSelection(row) { if (_selectedRowsLookup[row]) { _grid.setSelectedRows($.grep(_grid.getSelectedRows(), function (n) { return n != row })); } else { _grid.setSelectedRows(_grid.getSelectedRows().concat(row)); } _grid.setActiveCell(row, getCheckboxColumnCellIndex()); _grid.focus(); } function selectRows(rowArray) { var i, l=rowArray.length, addRows = []; for(i=0; i${getCheckBoxHtml(false)}`) .appendTo(args.node) .on('click', function(evnt) { handleHeaderClick(evnt, args) }); } }); } function createUID() { return Math.round(10000000 * Math.random()); } function checkboxSelectionFormatter(row, cell, value, columnDef, dataContext) { var UID = createUID() + row; if (dataContext) { return getCheckBoxHtml(!!_selectedRowsLookup[row]); } return null; } $.extend(this, { "init": init, "destroy": destroy, "deSelectRows": deSelectRows, "selectRows": selectRows, "getColumnDefinition": getColumnDefinition, "getOptions": getOptions, "setOptions": setOptions, }); } })(jQuery);