1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
(function ($) {
function SlickColumnPicker(columns, grid, options) {
var $menu;
var defaults = {
fadeSpeed:250
};
function init() {
grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
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 handleHeaderContextMenu(e, args) {
e.preventDefault();
$menu.empty();
var $li, $input;
for (var i = 0; i < columns.length; i++) {
$li = $("<li />").appendTo($menu);
$input = $("<input type='checkbox' />")
.attr("id", "columnpicker_" + i)
.data("id", columns[i].id)
.appendTo($li);
if (grid.getColumnIndex(columns[i].id) != null) {
$input.attr("checked", "checked");
}
$("<label for='columnpicker_" + i + "' />")
.text(columns[i].name)
.appendTo($li);
}
$("<hr/>").appendTo($menu);
$li = $("<li />").appendTo($menu);
$input = $("<input type='checkbox' id='autoresize' />").appendTo($li);
$("<label for='autoresize'>Force Fit Columns</label>").appendTo($li);
if (grid.getOptions().forceFitColumns) {
$input.attr("checked", "checked");
}
$li = $("<li />").appendTo($menu);
$input = $("<input type='checkbox' id='syncresize' />").appendTo($li);
$("<label for='syncresize'>Synchronous Resizing</label>").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 updateColumn(e) {
if (e.target.id == 'autoresize') {
if (e.target.checked) {
grid.setOptions({forceFitColumns:true});
grid.autosizeColumns();
} else {
grid.setOptions({forceFitColumns:false});
}
return;
}
if (e.target.id == 'syncresize') {
if (e.target.checked) {
grid.setOptions({syncColumnCellResize:true});
} else {
grid.setOptions({syncColumnCellResize:false});
}
return;
}
if ($(e.target).is(":checkbox")) {
if ($menu.find(":checkbox:checked").length == 0) {
$(e.target).attr("checked", "checked");
return;
}
var visibleColumns = [];
$menu.find(":checkbox[id^=columnpicker]").each(function (i, e) {
if ($(this).is(":checked")) {
visibleColumns.push(columns[i]);
}
});
grid.setColumns(visibleColumns);
}
}
init();
}
// Slick.Controls.ColumnPicker
$.extend(true, window, { Slick:{ Controls:{ ColumnPicker:SlickColumnPicker }}});
})(jQuery);
|
