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.
278 lines
8.7 KiB
278 lines
8.7 KiB
4 years ago
|
(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 `<label class="el-checkbox" id="header-selector${_selectAll_UID}"><span class="el-checkbox__input"><span class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="false" class="el-checkbox__original" value=""></span></label>`
|
||
|
}
|
||
|
|
||
|
return `<label class="el-checkbox is-checked" id="header-selector${_selectAll_UID}"><span class="el-checkbox__input is-checked"><span class="el-checkbox__inner"></span><input type="checkbox" aria-hidden="false" class="el-checkbox__original" value=""></span><!----></label>`
|
||
|
}
|
||
|
|
||
|
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<l; i++) {
|
||
|
if (!_selectedRowsLookup[rowArray[i]]) {
|
||
|
addRows[addRows.length] = rowArray[i];
|
||
|
}
|
||
|
}
|
||
|
_grid.setSelectedRows(_grid.getSelectedRows().concat(addRows));
|
||
|
}
|
||
|
|
||
|
function deSelectRows(rowArray) {
|
||
|
var i, l=rowArray.length, removeRows = [];
|
||
|
for(i=0; i<l; i++) {
|
||
|
if (_selectedRowsLookup[rowArray[i]]) {
|
||
|
removeRows[removeRows.length] = rowArray[i];
|
||
|
}
|
||
|
}
|
||
|
_grid.setSelectedRows($.grep(_grid.getSelectedRows(), function (n) {
|
||
|
return removeRows.indexOf(n)<0
|
||
|
}));
|
||
|
}
|
||
|
|
||
|
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([]);
|
||
|
}
|
||
|
e.stopPropagation();
|
||
|
e.stopImmediatePropagation();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
var _checkboxColumnCellIndex = null;
|
||
|
|
||
|
function getCheckboxColumnCellIndex() {
|
||
|
if (_checkboxColumnCellIndex === null) {
|
||
|
_checkboxColumnCellIndex = 0;
|
||
|
var colArr = _grid.getColumns();
|
||
|
for (var i=0; i < colArr.length; i++) {
|
||
|
if (colArr[i].id == _options.columnId) {
|
||
|
_checkboxColumnCellIndex = i;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
return _checkboxColumnCellIndex;
|
||
|
}
|
||
|
|
||
|
function getColumnDefinition() {
|
||
|
|
||
|
|
||
|
|
||
|
return {
|
||
|
id: _options.columnId,
|
||
|
name: (_options.hideSelectAllCheckbox || _options.hideInColumnTitleRow) ? "" : getCheckBoxHtml(false),
|
||
|
toolTip: _options.toolTip,
|
||
|
field: "sel",
|
||
|
width: _options.width,
|
||
|
resizable: false,
|
||
|
sortable: false,
|
||
|
cssClass: _options.cssClass,
|
||
|
hideSelectAllCheckbox: _options.hideSelectAllCheckbox,
|
||
|
formatter: checkboxSelectionFormatter
|
||
|
};
|
||
|
}
|
||
|
|
||
|
function addCheckboxToFilterHeaderRow(grid) {
|
||
|
grid.onHeaderRowCellRendered.subscribe(function(e, args) {
|
||
|
if (args.column.field === "sel") {
|
||
|
$(args.node).empty();
|
||
|
$(`<span id='filter-checkbox-selectall-container'>${getCheckBoxHtml(false)}</label></span>`)
|
||
|
.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);
|