library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-10-08 13:44:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

columnSelector: make column disable, visible, invisible methods consistent. Fixes #519

Browse Source
This commit is contained in:
Mottie 2014-03-01 06:23:44 -06:00
parent ec05cd9ff5
commit cfd2eab774
2 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -79,10 +79,14 @@
/*** Bootstrap popover ***/ /*** Bootstrap popover ***/
#popover-target label { #popover-target label {
margin: 0 5px; margin: 0 5px;
display: block;
} }
#popover-target input { #popover-target input {
margin-right: 5px; margin-right: 5px;
} }
.popover {
margin-top: -65px; /* adjust popover position */
}
</style> </style>
<script id="js">$(function() { <script id="js">$(function() {
@ -222,7 +226,20 @@
2 : true, /* start with column visible; default for undefined columns */ 2 : true, /* start with column visible; default for undefined columns */
} }
}</pre></li> }</pre></li>
<li>
<span class="label label-warning">*NOTE*</span> Prior to v2.15.6, using these extra methods and setting a column to "false" would remove it from the selector. Now, it is more consistent with this columns option - set the appropriate method to "disable" to remove a column, "false" to initially hide a column and "true" to keep the column in an initially visible state.<br>
<br>
In <span class="version">v2.15.6</span>, the following methods in order of priority are now available (set to true, false or disable):
<ul>
<li>jQuery data <code>data-columnSelector="true"</code> or <code>data-columnSelector="false"</code>.</li>
<li>metadata <code>class=&quot;{ columnSelector : true }&quot;</code> or <code>class=&quot;{ columnSelector : false }&quot;</code>.</li>
<li>headers option <code>headers : { 0 : { columnSelector: true } }</code> or <code>headers : { 0 : { columnSelector: false } }</code>.</li>
<li>header class name <code>class=&quot;columnSelector-true&quot;</code> or <code>class=&quot;columnSelector-false&quot;</code>.</li>
</ul>
</li>
</ul> </ul>
<span class="label label-warning">*NOTE*</span> Setting a column to initially be visible (<code>true</code>) or invisible (<code>false</code>) will be overridden by the users saved selections if the <code>columnSelector_saveColumns</code> option is <code>true</code>.<br>
<br>
Default value: <code>{}</code>; empty object Default value: <code>{}</code>; empty object
</td> </td>
</tr> </tr>
@ -297,7 +314,7 @@
<tr> <tr>
<td><code>columnSelector_priority</code></td> <td><code>columnSelector_priority</code></td>
<td> <td>
This is the assigned data-attribute which contains the defined data priority for a table column. This is the assigned data-attribute which contains the defined data priority for a table column
<ul> <ul>
<li>Values of 1 through 6 set the breakpoints of that particular column.</li> <li>Values of 1 through 6 set the breakpoints of that particular column.</li>
<li>A value of 1 has the highest priority, meaning it is the last column(s) to be hidden when the browser width goes below &quot;20em&quot; (320px).</li> <li>A value of 1 has the highest priority, meaning it is the last column(s) to be hidden when the browser width goes below &quot;20em&quot; (320px).</li>
@ -316,19 +333,20 @@
<h3><a href="#">Removing a column from the selector</a></h3> <h3><a href="#">Removing a column from the selector</a></h3>
<div> <div>
This is probably overkill, but there are numerous ways to remove a column from the selection popup: This is probably overkill, but there are numerous ways to remove a column from the selection popup (<span class="version updated">v2.15.6</span>):
<ul> <ul>
<li>Setting the <code>data-priority</code> to any non-numerical name (e.g. "critical" or "persistent").</li> <li>Setting the <code>data-priority</code> to any non-numerical name (e.g. "critical" or "persistent").</li>
<li>Setting the column selector widget columns option <code>columnSelector_columns : { 0 : 'disable' }</code>.</li> <li>Setting the column selector widget columns option <code>columnSelector_columns : { 0 : 'disable' }</code>.</li>
<li>The following methods in order of priority: <li>The following methods in order of priority:
<ul> <ul>
<li>jQuery data <code>data-columnSelector="false"</code>.</li> <li>jQuery data <code>data-columnSelector="disable"</code>.</li>
<li>metadata <code>class=&quot;{ columnSelector : false }&quot;</code>.</li> <li>metadata <code>class=&quot;{ columnSelector : disable }&quot;</code>.</li>
<li>headers option <code>headers : { 0 : { columnSelector: false } }</code>.</li> <li>headers option <code>headers : { 0 : { columnSelector: disable } }</code>.</li>
<li>header class name <code>class=&quot;columnSelector-false&quot;</code>.</li> <li>header class name <code>class=&quot;columnSelector-disable&quot;</code>.</li>
</ul> </ul>
</li> </li>
</ul> </ul>
* Prior to v2.15.6, setting these methods to "false" would remove it from the selector. Now, they must be set to "disable" to remove the column from the selector, this was done to make it more consistent with the <code>columnSelector_columns</code> setting.
</div> </div>
</div> </div>
@ -352,9 +370,10 @@
<tr> <tr>
<th data-priority="critical">Name</th> <th data-priority="critical">Name</th>
<!-- Remove column from selection popup by including --> <!-- Remove column from selection popup by including -->
<!-- data-priority="Anything other than 1-6" OR data-column-selector="false" OR class="columnSelector-false" --> <!-- data-priority="Anything other than 1-6" OR data-column-selector="disable" OR class="columnSelector-disable" -->
<th class="columnSelector-false">Major</th> <th class="columnSelector-disable">Major</th>
<th data-priority="6" data-selector-name="Gender">Sex</th> <!-- columnSelector-false will initially hide the column -->
<th class="columnSelector-false" data-priority="6" data-selector-name="Gender">Sex</th>
<th data-priority="4">English</th> <th data-priority="4">English</th>
<th data-priority="5">Japanese</th> <th data-priority="5">Japanese</th>
<th data-priority="3">Calculus</th> <th data-priority="3">Calculus</th>
@ -445,9 +464,10 @@
&lt;tr&gt; &lt;tr&gt;
&lt;th data-priority=&quot;critical&quot;&gt;Name&lt;/th&gt; &lt;th data-priority=&quot;critical&quot;&gt;Name&lt;/th&gt;
&lt;!-- Remove column from selection popup by including --&gt; &lt;!-- Remove column from selection popup by including --&gt;
&lt;!-- data-priority=&quot;Anything other than 1-6&quot; OR data-column-selector=&quot;false&quot; OR class=&quot;columnSelector-false&quot; --&gt; &lt;!-- data-priority=&quot;Anything other than 1-6&quot; OR data-column-selector=&quot;disable&quot; OR class=&quot;columnSelector-disable&quot; --&gt;
&lt;th class=&quot;columnSelector-false&quot;&gt;Major&lt;/th&gt; &lt;th class=&quot;columnSelector-disable&quot;&gt;Major&lt;/th&gt;
&lt;th data-priority=&quot;6&quot; data-selector-name=&quot;Gender&quot;&gt;Sex&lt;/th&gt; &lt;!-- columnSelector-false will initially hide the column --&gt;
&lt;th class=&quot;columnSelector-false&quot; data-priority=&quot;6&quot; data-selector-name=&quot;Gender&quot;&gt;Sex&lt;/th&gt;
&lt;th data-priority=&quot;4&quot;&gt;English&lt;/th&gt; &lt;th data-priority=&quot;4&quot;&gt;English&lt;/th&gt;
&lt;th data-priority=&quot;5&quot;&gt;Japanese&lt;/th&gt; &lt;th data-priority=&quot;5&quot;&gt;Japanese&lt;/th&gt;
&lt;th data-priority=&quot;3&quot;&gt;Calculus&lt;/th&gt; &lt;th data-priority=&quot;3&quot;&gt;Calculus&lt;/th&gt;

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

@ -62,18 +62,21 @@ tsColSel = ts.columnSelector = {
var $this = $(this), var $this = $(this),
// if no data-priority is assigned, default to 1, but don't remove it from the selector list // if no data-priority is assigned, default to 1, but don't remove it from the selector list
priority = $this.attr(wo.columnSelector_priority) || 1, priority = $this.attr(wo.columnSelector_priority) || 1,
colId = $this.attr('data-column'); colId = $this.attr('data-column'),
state = ts.getData(this, c.headers[colId], 'columnSelector');
// if this column not hidable at all // if this column not hidable at all
// include getData check (includes "columnSelector-false" class, data attribute, etc) // include getData check (includes "columnSelector-false" class, data attribute, etc)
if ( isNaN(priority) && priority.length > 0 || ts.getData(this, c.headers[colId], 'columnSelector') == 'false' || if ( isNaN(priority) && priority.length > 0 || state === 'disable' ||
( wo.columnSelector_columns[colId] && wo.columnSelector_columns[colId] === 'disable') ) { ( wo.columnSelector_columns[colId] && wo.columnSelector_columns[colId] === 'disable') ) {
return true; // goto next return true; // goto next
} }
// set default state // set default state; storage takes priority
colSel.states[colId] = saved && typeof(saved[colId]) !== 'undefined' ? colSel.states[colId] = saved && typeof(saved[colId]) !== 'undefined' ?
saved[colId] : typeof(wo.columnSelector_columns[colId]) !== 'undefined' ? wo.columnSelector_columns[colId] : true; saved[colId] : typeof(wo.columnSelector_columns[colId]) !== 'undefined' ?
wo.columnSelector_columns[colId] : state === 'true' || !(state === 'false');
colSel.$column[colId] = $(this); colSel.$column[colId] = $(this);
// set default col title // set default col title