fixed column picker in TableAjax

SE/se-lib/TableAjax.php

@@ -277,7 +277,6 @@ class TableAjax extends ViewAjax {
 .AjaxTable input[type=text].filter-active {border-color:#00ACCC;}
 .AjaxTable .date-wrap {width:100%;min-width:115px;}
 .AjaxTable .dateWrap .add-on {margin:0;padding:0;background:none;border:none;float:right;cursor:pointer;}
-.AjaxTableCont .dropdown-menu {max-height:250px;padding:0 20px 0 0;overflow:auto;}
 .AjaxTable .actions a {padding:0;margin:0;}
 .AjaxTableCont .text-right {text-align:right}
 .AjaxTableCont .breadcrumb em {color:#bbb;}
@@ -404,7 +403,7 @@ class TableAjax extends ViewAjax {
 						 onclick="return <?php echo $jsToogleFiltrProcesuFunctionName; ?>(this);">
 						Filtr procesu <span class="caret"></span>
 					</a>
-					<ul class="dropdown-menu pull-left">
+					<ul class="dropdown-menu pull-left" style="max-height:250px;overflow:auto;">
 						<li class="disabled"><a href="#" onclick="return false;"> loading ... </a></li>
 					</ul>
 				</div>
@@ -1595,7 +1594,7 @@ class TableAjax extends ViewAjax {
 				node = $('<div class="btn-group dropup pagesize ' + nodeClass + '"></div>');
 				var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Liczba wierszy&nbsp;</button>').appendTo(node);
 				var span = $('<span class="caret"></span>').appendTo(btn);
-				var ul = $('<ul class="dropdown-menu">').appendTo(node);
+				var ul = $('<ul class="dropdown-menu" style="max-height:250px;overflow:auto;">').appendTo(node);
 
 				$.each(priv.options.pageSizes, function(index, val) {
 					var li = $('<li></li>').appendTo(ul);
@@ -1620,17 +1619,19 @@ class TableAjax extends ViewAjax {
 				node = $('<div class="btn-group dropup columnpicker ' + nodeClass + '"></div>');
 				var btn = $('<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" href="#">Kolumny&nbsp;</button>').appendTo(node);
 				var span = $('<span class="caret"></span>').appendTo(btn);
-				var ul = $('<ul class="dropdown-menu">').appendTo(node);
+				var ul = $('<ul class="dropdown-menu" style="max-height:250px;overflow:auto;">').appendTo(node);
 
 				$.each(_data.cols, function(col, props) {
 					if (props.type != "unique" && col != 'ID') {
 						var li = $('<li></li>').appendTo(ul),
+								a = $('<a href="#" style="padding:0px 20px;"></a>').appendTo(li),
 								label = props.friendly || col;
 						label = label.replace(/<br\/?>/g, ' ');
-						$('<input {0} type="checkbox" title="{1}" value="{1}" >&nbsp;{2}</input>'.f((props.hidden) ? '' : 'checked', col, label)).appendTo(li);
+						$('<input {0} type="checkbox" title="{1}" value="{1}" style="margin:0">&nbsp;{2}</input>'.f((props.hidden) ? '' : 'checked', col, label)).appendTo(a);
 					}
 				});
 				node.on('click', 'input', priv.columnPickerClicked);
+				node.on('click', 'a', priv.columnPickerLinkClicked);
 			} else {
 				node = $('<span class="' + nodeClass + '"></span>');
 			}
@@ -1670,7 +1671,7 @@ class TableAjax extends ViewAjax {
 				node = $('<div class="btn-group dropup pagesize ' + nodeClass + '"></div>');
 				var btn = $('<button class="btn btn-sm dropdown-toggle" data-toggle="dropdown" href="#">Export&nbsp;</button>').appendTo(node);
 				var span = $('<span class="caret"></span>').appendTo(btn);
-				var ul = $('<ul class="dropdown-menu">').appendTo(node);
+				var ul = $('<ul class="dropdown-menu" style="max-height:250px;padding:5px 20px 5px 8px;overflow:auto;">').appendTo(node);
 
 				$.each(_data.cols, function(col, props) {
 					if (-1 !== priv.options.exportFields.indexOf(col)) {
@@ -2572,6 +2573,27 @@ class TableAjax extends ViewAjax {
 			jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
 		};
 
+		priv.columnPickerLinkClicked = function(e) {
+			e.stopPropagation();
+			e.preventDefault();
+
+			var input$ = $(this).find('input');
+			if (input$.length != 1) return;
+
+			var column = input$.val();
+			if (!column) return;
+
+			input$.prop("checked", !input$.is(':checked'));
+
+			//toggle column visibility
+			_data.cols[column].hidden = !_data.cols[column].hidden;
+
+			priv.saveHiddenCols();
+
+			//_data.cols[column].index = new priv.ext.XDate();
+			jQuery(_uiNodeCont).trigger('TableAjax:render', ['head', 'body']);
+		};
+
 		priv.columnHideClicked = function(e) {
 			e.stopPropagation();