2 function SlickColumnPicker(columns, grid, options) {
11 grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
12 grid.onColumnsReordered.subscribe(updateColumnOrder);
13 options = $.extend({}, defaults, options);
15 $menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
17 $menu.bind("mouseleave", function (e) {
18 $(this).fadeOut(options.fadeSpeed)
20 $menu.bind("click", updateColumn);
24 function handleHeaderContextMenu(e, args) {
28 columnCheckboxes = [];
31 for (var i = 0; i < columns.length; i++) {
32 $li = $("<li />").appendTo($menu);
33 $input = $("<input type='checkbox' />").data("column-id", columns[i].id);
34 columnCheckboxes.push($input);
36 if (grid.getColumnIndex(columns[i].id) != null) {
37 $input.attr("checked", "checked");
41 .text(columns[i].name)
46 $("<hr/>").appendTo($menu);
47 $li = $("<li />").appendTo($menu);
48 $input = $("<input type='checkbox' />").data("option", "autoresize");
50 .text("Force fit columns")
53 if (grid.getOptions().forceFitColumns) {
54 $input.attr("checked", "checked");
57 $li = $("<li />").appendTo($menu);
58 $input = $("<input type='checkbox' />").data("option", "syncresize");
60 .text("Synchronous resize")
63 if (grid.getOptions().syncColumnCellResize) {
64 $input.attr("checked", "checked");
68 .css("top", e.pageY - 10)
69 .css("left", e.pageX - 10)
70 .fadeIn(options.fadeSpeed);
73 function updateColumnOrder() {
74 // Because columns can be reordered, we have to update the `columns`
75 // to reflect the new order, however we can't just take `grid.getColumns()`,
76 // as it does not include columns currently hidden by the picker.
77 // We create a new `columns` structure by leaving currently-hidden
78 // columns in their original ordinal position and interleaving the results
79 // of the current column sort.
80 var current = grid.getColumns().slice(0);
81 var ordered = new Array(columns.length);
82 for (var i = 0; i < ordered.length; i++) {
83 if ( grid.getColumnIndex(columns[i].id) === undefined ) {
84 // If the column doesn't return a value from getColumnIndex,
85 // it is hidden. Leave it in this position.
86 ordered[i] = columns[i];
88 // Otherwise, grab the next visible column.
89 ordered[i] = current.shift();
95 function updateColumn(e) {
96 if ($(e.target).data("option") == "autoresize") {
97 if (e.target.checked) {
98 grid.setOptions({forceFitColumns:true});
99 grid.autosizeColumns();
101 grid.setOptions({forceFitColumns:false});
106 if ($(e.target).data("option") == "syncresize") {
107 if (e.target.checked) {
108 grid.setOptions({syncColumnCellResize:true});
110 grid.setOptions({syncColumnCellResize:false});
115 if ($(e.target).is(":checkbox")) {
116 var visibleColumns = [];
117 $.each(columnCheckboxes, function (i, e) {
118 if ($(this).is(":checked")) {
119 visibleColumns.push(columns[i]);
123 if (!visibleColumns.length) {
124 $(e.target).attr("checked", "checked");
128 grid.setColumns(visibleColumns);
132 function getAllColumns() {
139 "getAllColumns": getAllColumns
143 // Slick.Controls.ColumnPicker
144 $.extend(true, window, { Slick:{ Controls:{ ColumnPicker:SlickColumnPicker }}});