slick.columnpicker.js


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

function SlickColumnPicker(columns,grid)
{
	var $menu;
	
	function init() {
		grid.onHeaderContextMenu = displayContextMenu;
		
		$menu = $("<span class='slick-columnpicker' style='display:none;position:absolute;z-index:20;' />").appendTo(document.body);
		
		$menu.bind("mouseleave", function(e) { $(this).fadeOut() });
		$menu.bind("click", updateColumn);
		
	}
	
	function displayContextMenu(e)
	{
		$menu.empty();
		
		for (var i=0; i<columns.length; i++) {
			var $li = $("<li />").appendTo($menu);
			
			var $input = $("<input type='checkbox' />")
				.attr("id", "columnpicker_" + i)
				.data("id", columns[i].id)
				.appendTo($li)
			
			if (!columns[i].hidden)
				$input.attr("checked","checked");
			
			$("<label for='columnpicker_" + i + "' />")
				.text(columns[i].name)
				.appendTo($li);
		}
		
		$("<hr/><li><a id='autoresize'>Autosize</a></li>").appendTo($menu);
		
		$menu
			.css("top", e.pageY - 10)
			.css("left", e.pageX - 10)
			.fadeIn();
	}
	
	function updateColumn(e) 
	{
		if ($(e.target).is("a")) {
			grid.autosizeColumns();
			$menu.fadeOut();
			return;
		}
		
		if ($(e.target).is(":checkbox")) {
			if ($menu.find(":checkbox:checked").length == 0) {
				$(e.target).attr("checked","checked");
				return;	
			}
			
			var id =$(e.target).data("id");
			for (var i=0; i<columns.length; i++) {
				if (columns[i].id == id) {
					columns[i].hidden = !$(e.target).is(":checked");
					grid.setColumnVisibility(columns[i], $(e.target).is(":checked"));
					return;
				}
			}	
		}
	}
	
	
	init();
}