153 lines
		
	
	
		
			4.4 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			153 lines
		
	
	
		
			4.4 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| (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);
 |