library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Resizable: Add resizableComplete event. Fixes #1444

Browse Source
This commit is contained in:
Rob Garrison 2017-08-31 14:22:00 -05:00
parent bb599df7d7
commit 4e54230321
3 changed files with 24 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/example-widget-resizable.html
View File

@ -111,6 +111,7 @@
<li><span class="label label-info">IMPORTANT</span> The resizable will not work properly if the <a href="index.html#widthfixed"><code>widthFixed</code></a> option is set to <code>true</code>. Make sure it is set to <code>false</code> (default setting).</li>
<li><del><span class="label label-info">IMPORTANT</span> The resize div ends up with a zero height if the header cell is empty. Please include at least a <code>&amp;nbsp;</code> in the cell to allow it to render properly (<a href="https://github.com/Mottie/tablesorter/issues/844" title="Thanks gigib82!">ref</a>)</del>. No longer necessary as the resizable widget no longer adds elements inside the table header cells.<br><br></li>
<li>In <span class="version">v2.29.0</span>, added a <a class="intlink" href="#resizablecomplete"><code>resizableComplete</code></a> event.</li>
<li>In <span class="version">v2.28.8</span>, added the <a class="intlink" href="#resizable-include-footer"><code>resizable_includeFooter</code></a> option.</li>
<li>In <span class="version">v2.28.5</span>,
<ul>
@ -239,7 +240,7 @@ resizable_widths : [ '10%', '10%', '40px', '10%', '100px' ]</pre>
</table>
</div>
<h3><a href="#">Events</a></h3>
<h3><a href="#">Methods</a></h3>
<div>
<h3>resizableUpdate</h3>
<blockquote>
@ -255,6 +256,25 @@ $( 'table' ).trigger( 'resizableUpdate' );</pre>
</blockquote>
</div>
<h3><a href="#">Events</a></h3>
<div>
<h3>resizableComplete</h3>
<blockquote>
A <code>resizableComplete</code> event (added <span class="version">v2.29.0</span>) is triggered on the table after the user has resized a column and
<pre class="prettyprint lang-js">$( 'table' ).on( 'resizableComplete', function(event) {
var resizable_vars = this.config.widgetOptions.resizable_vars;
var saved = {
// resizable_vars.storedSizes is an empty array when no resizing was done
// otherwise it contains each column width (padding &amp; border width not included) in pixels
columnWidths: resizable_vars.storedSizes,
// overall table width
tableWidth: resizable_vars.tableWidth
};
// do something with the values
});</pre>
</blockquote>
</div>
</div>
<h1>Demo</h1>

4
docs/index.html
View File

@ -505,7 +505,7 @@
<li><a href="example-widget-print.html">Print widget</a> (<span class="version">v2.16.4</span>; <span class="version updated">v2.25.8</span>).</li>
<li><a href="example-widget-reflow.html">Reflow widget</a> (<span class="version">v2.16</span>; <span class="version updated">v2.19.0</span>).</li>
<li><a href="example-widgets.html">Repeat headers widget</a> (v2.0.5; <span class="version updated">v2.19.0</span>).</li>
<li><span class="results">&dagger;</span> <a href="example-widget-resizable.html">Resizable columns widget</a> (v2.0.23.1; <span class="version updated">v2.28.8</span>).</li>
<li><span class="results">&dagger;</span> <a href="example-widget-resizable.html">Resizable columns widget</a> (v2.0.23.1; <span class="version updated">v2.29.0</span>).</li>
<li><span class="results">&dagger;</span> <a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27; <span class="version updated">v2.24.0</span>).</li>
<li><a href="example-widget-scroller.html">Scroller widget</a> (<span class="version">v2.9</span>; <span class="version updated">v2.28.8</span>).</li>
<li><span class="label label-info">Beta</span> <a href="example-widget-sort-to-hash.html">Sort-to-hash widget</a> (<span class="version">v2.22.4</span>; <span class="version updated">v2.28.15</span>).</li>
@ -2646,7 +2646,7 @@ $(function(){
When the filter row is built, each table cell (<code>&lt;td&gt;</code>) will get the class name from this option.
<ul>
<li>If this option is a plain string, all filter row cells will get the text applied as a class name.
<pre class="prettyprint lang-js">// "table-filter" class added to all filter row td's
<pre class="prettyprint lang-js">// "table-filter-cell" class added to all filter row td's
filter_cellFilter : 'table-filter-cell'</pre>
</li>
<li>If this option is an array, then each filter row cell will get the text from the associate array element applied as a class name.

1
js/widgets/widget-resizable.js
View File

@ -325,6 +325,7 @@
vars.$target = vars.$next = null;
// will update stickyHeaders, just in case, see #912
c.$table.triggerHandler('stickyHeadersUpdate');
c.$table.triggerHandler('resizableComplete');
}
};