library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2025-01-12 15:24:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ColumnSelector: Add max/min visible columns settings

Browse Source 
See http://stackoverflow.com/q/38431814/145346
This commit is contained in:
Rob Garrison 2016-07-20 21:06:52 -05:00
parent 440dabd53c
commit 2f80eb209f
No known key found for this signature in database
GPG Key ID: 0A42D160D71978E1
3 changed files with 100 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/js/widgets/widget-columnSelector.min.js vendored
View File

File diff suppressed because one or more lines are too long

44
docs/example-widget-column-selector.html
View File

@ -119,6 +119,10 @@
columnSelector_mediaqueryState: true,
// hide columnSelector false columns while in auto mode
columnSelector_mediaqueryHidden: true,
// set the maximum and/or minimum number of visible columns; use null to disable
columnSelector_maxVisible: null,
columnSelector_minVisible: null,
// responsive table hides columns with priority 1-6 at these breakpoints
// see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
// *** set to false to disable ***
@ -175,6 +179,13 @@
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>In <span class="version">v2.27.0</span>,
<ul>
<li>Added two new options: <code>columnSelector_maxVisible</code> and <code>columnSelector_minVisible</code>.</li>
<li>These settings set a maximum and/or minimum number of visible columns. <strong>Please see the option description for each setting for important details!</strong></li>
<li>The <code>refreshColumnSelector</code> method is not constrained by these limitations. Only user interaction is restricted.</li>
</ul>
</li>
<li>In <span class="version">v2.25.9</span>,
<ul>
<li>Added a <code>columnSelector_maxPriorities</code> setting.</li>
@ -381,6 +392,39 @@
</td>
</tr>
<tr id="column-selector-max-visible">
<td><a href="#" class="permalink">columnSelector_maxVisible</a></td>
<td>Set this option to a number to set a maximum number of visible columns (<span class="version">v2.27.0</span>).
<div class="collapsible">
<br>
<span class="label label-info">Note</span>
<ul>
<li>The setting <em>does not</em> take into account the disabled columns (columns not listed in the column selector).</li>
<li>So, in the first example below, the "Name" and "Major" columns are disabled (not included in the popup).</li>
<li>If this option was set to <code>2</code>, only two additional columns, not counting the "Name" and "Major" columns can be made visible.</li>
</ul>
<p>Set this value to <code>null</code> to disable it.</p>
Default value: <code>null</code>
</div>
</td>
</tr>
<tr id="column-selector-min-visible">
<td><a href="#" class="permalink">columnSelector_minVisible</a></td>
<td>Set this option to a number to set a minimum number of visible columns (<span class="version">v2.27.0</span>).
<div class="collapsible">
<br>
<span class="label label-info">Note</span>
<ul>
<li>The setting <em>does not</em> take into account the disabled columns (columns not listed in the column selector).</li>
<li>So, in the first example below, the "Name" and "Major" columns are disabled (not included in the popup).</li>
<li>If this option was set to <code>1</code>, then one of the columns, not including the "Name" & "Major" columns, must always be visible.</li>
</ul>
<p>Set this value to <code>null</code> to disable it.</p>
Default value: <code>null</code>
</div>
</td>
</tr>
<tr id="column-selector-breakpoints">
<td><a href="#" class="permalink">columnSelector_breakpoints</a></td>
<td>This option defines the media query breakpoints with which to use when a column with the associated priority is hidden or revealed.

73
js/widgets/widget-columnSelector.js
View File

@ -159,17 +159,44 @@
.attr('data-column', colId)
.toggleClass( wo.columnSelector_cssChecked, colSel.states[colId] )
.prop('checked', colSel.states[colId])
.on('change', function(){
// ensure states is accurate
var colId = $(this).attr('data-column');
c.selector.states[colId] = this.checked;
tsColSel.updateCols(c, wo);
.on('change', function() {
if (!colSel.isInitializing) {
// ensure states is accurate
var colId = $(this).attr('data-column');
if (tsColSel.checkChange(c, this.checked)) {
// if (wo.columnSelector_maxVisible)
c.selector.states[colId] = this.checked;
tsColSel.updateCols(c, wo);
} else {
this.checked = !this.checked;
return false;
}
}
}).change();
}
}
},
checkChange: function(c, checked) {
var wo = c.widgetOptions,
max = wo.columnSelector_maxVisible,
min = wo.columnSelector_minVisible,
states = c.selector.states,
indx = states.length,
count = 0;
while (indx-- >= 0) {
if (states[indx]) {
count++;
}
}
if ((checked & max !== null && count >= max) ||
(!checked && min !== null && count <= min)) {
return false;
}
return true;
},
setupBreakpoints: function(c, wo) {
var colSel = c.selector;
@ -423,13 +450,20 @@
.toggleClass( wo.columnSelector_cssChecked, isChecked )
.prop( 'checked', isChecked );
});
colSel.$popup = $popup.on('change', 'input', function(){
// data input
indx = $(this).toggleClass( wo.columnSelector_cssChecked, this.checked ).attr('data-column');
// update original popup
colSel.$container.find('input[data-column="' + indx + '"]')
.prop('checked', this.checked)
.trigger('change');
colSel.$popup = $popup.on('change', 'input', function() {
if (!colSel.isInitializing) {
if (tsColSel.checkChange(c, this.checked)) {
// data input
indx = $(this).toggleClass( wo.columnSelector_cssChecked, this.checked ).attr('data-column');
// update original popup
colSel.$container.find('input[data-column="' + indx + '"]')
.prop('checked', this.checked)
.trigger('change');
} else {
this.checked = !this.checked;
return false;
}
}
});
}
}
@ -461,17 +495,21 @@
// container layout
columnSelector_layout : '<label><input type="checkbox">{name}</label>',
// data attribute containing column name to use in the selector container
columnSelector_name : 'data-selector-name',
columnSelector_name : 'data-selector-name',
/* Responsive Media Query settings */
// enable/disable mediaquery breakpoints
columnSelector_mediaquery: true,
columnSelector_mediaquery : true,
// toggle checkbox name
columnSelector_mediaqueryName: 'Auto: ',
columnSelector_mediaqueryName : 'Auto: ',
// breakpoints checkbox initial setting
columnSelector_mediaqueryState: true,
columnSelector_mediaqueryState : true,
// hide columnSelector false columns while in auto mode
columnSelector_mediaqueryHidden: false,
columnSelector_mediaqueryHidden : false,
// set the maximum and/or minimum number of visible columns
columnSelector_maxVisible : null,
columnSelector_minVisible : null,
// responsive table hides columns with priority 1-6 at these breakpoints
// see http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-column-toggle/#Applyingapresetbreakpoint
// *** set to false to disable ***
@ -488,7 +526,6 @@
columnSelector_cssChecked : 'checked',
// event triggered when columnSelector completes
columnSelector_updated : 'columnUpdate'
},
init: function(table, thisWidget, c, wo) {
tsColSel.init(table, c, wo);