cccc/static/sg/controls/slick.columnpicker.js

153 lines
4.4 KiB
JavaScript
Raw Normal View History

2018-12-04 08:50:29 +00:00
(function ($) {
function SlickColumnPicker(columns, grid, options) {
var $menu;
var columnCheckboxes;
var defaults = {
fadeSpeed:250
};
function init() {
grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
grid.onColumnsReordered.subscribe(updateColumnOrder);
options = $.extend({}, defaults, options);
$menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
$menu.bind("mouseleave", function (e) {
$(this).fadeOut(options.fadeSpeed)
});
$menu.bind("click", updateColumn);
}
function destroy() {
grid.onHeaderContextMenu.unsubscribe(handleHeaderContextMenu);
grid.onColumnsReordered.unsubscribe(updateColumnOrder);
$menu.remove();
}
function handleHeaderContextMenu(e, args) {
e.preventDefault();
$menu.empty();
updateColumnOrder();
columnCheckboxes = [];
var $li, $input;
for (var i = 0; i < columns.length; i++) {
$li = $("<li />").appendTo($menu);
$input = $("<input type='checkbox' />").data("column-id", columns[i].id);
columnCheckboxes.push($input);
if (grid.getColumnIndex(columns[i].id) != null) {
$input.attr("checked", "checked");
}
$("<label />")
.text(columns[i].name)
.prepend($input)
.appendTo($li);
}
$("<hr/>").appendTo($menu);
$li = $("<li />").appendTo($menu);
$input = $("<input type='checkbox' />").data("option", "autoresize");
$("<label />")
.text("Force fit columns")
.prepend($input)
.appendTo($li);
if (grid.getOptions().forceFitColumns) {
$input.attr("checked", "checked");
}
$li = $("<li />").appendTo($menu);
$input = $("<input type='checkbox' />").data("option", "syncresize");
$("<label />")
.text("Synchronous resize")
.prepend($input)
.appendTo($li);
if (grid.getOptions().syncColumnCellResize) {
$input.attr("checked", "checked");
}
$menu
.css("top", e.pageY - 10)
.css("left", e.pageX - 10)
.fadeIn(options.fadeSpeed);
}
function updateColumnOrder() {
// Because columns can be reordered, we have to update the `columns`
// to reflect the new order, however we can't just take `grid.getColumns()`,
// as it does not include columns currently hidden by the picker.
// We create a new `columns` structure by leaving currently-hidden
// columns in their original ordinal position and interleaving the results
// of the current column sort.
var current = grid.getColumns().slice(0);
var ordered = new Array(columns.length);
for (var i = 0; i < ordered.length; i++) {
if ( grid.getColumnIndex(columns[i].id) === undefined ) {
// If the column doesn't return a value from getColumnIndex,
// it is hidden. Leave it in this position.
ordered[i] = columns[i];
} else {
// Otherwise, grab the next visible column.
ordered[i] = current.shift();
}
}
columns = ordered;
}
function updateColumn(e) {
if ($(e.target).data("option") == "autoresize") {
if (e.target.checked) {
grid.setOptions({forceFitColumns:true});
grid.autosizeColumns();
} else {
grid.setOptions({forceFitColumns:false});
}
return;
}
if ($(e.target).data("option") == "syncresize") {
if (e.target.checked) {
grid.setOptions({syncColumnCellResize:true});
} else {
grid.setOptions({syncColumnCellResize:false});
}
return;
}
if ($(e.target).is(":checkbox")) {
var visibleColumns = [];
$.each(columnCheckboxes, function (i, e) {
if ($(this).is(":checked")) {
visibleColumns.push(columns[i]);
}
});
if (!visibleColumns.length) {
$(e.target).attr("checked", "checked");
return;
}
grid.setColumns(visibleColumns);
}
}
function getAllColumns() {
return columns;
}
init();
return {
"getAllColumns": getAllColumns,
"destroy": destroy
};
}
// Slick.Controls.ColumnPicker
$.extend(true, window, { Slick:{ Controls:{ ColumnPicker:SlickColumnPicker }}});
})(jQuery);