Core: add removeWidget & refreshComplete

Updated addWidget, applyWidget & refreshWidgets
This commit is contained in:
Mottie 2015-01-23 22:44:57 -06:00
parent a0f09f484b
commit 857e275aab
5 changed files with 116 additions and 36 deletions

View File

@ -890,7 +890,7 @@
changeHeight(table, p);
updatePageDisplay(table, p, true);
})
.bind('pageSize.pager', function(e,v){
.bind('pageSize.pager refreshComplete.pager', function(e,v){
e.stopPropagation();
setPageSize(table, parseInt(v, 10) || p.settings.size || 10, p);
hideRows(table, p);

View File

@ -4854,19 +4854,41 @@ $('table').trigger( 'search', [['', '', '', '', 'orange']] ); // find orange in
<tr id="updatecomplete">
<td><a href="#" class="permalink">updateComplete</a></td>
<td>This event fires after tablesorter has completed updating. (v.2.3.9)
<td>This event fires after tablesorter has completed updating (v2.3.9).
<div class="collapsible">
This occurs after an "update", "updateAll", "updateCell" or "addRows" method was called, but before any callback functions are executed.
<pre class="prettyprint lang-js">$(function(){
// initialize the tablesorter plugin
$("table").tablesorter();
$('table')
.tablesorter()
// bind to sort events
// bind to sort events
$("table")
.bind("updateComplete",function(e, table) {
.bind('updateComplete', function(e, table) {
// do something after the table has been altered;
});
});</pre></div>
</td>
<td></td>
</tr>
<tr id="refreshcomplete">
<td><a href="#" class="permalink">refreshComplete</a></td>
<td>This event fires after tablesorter has completed executing the <a href="#refreshwidgets">refreshWidget</a> method (<span class="version">v2.18.5</span>)
<div class="collapsible">
<br>
Use it as follows:
<pre class="prettyprint lang-js">$(function(){
// initialize the tablesorter plugin
$('table')
.tablesorter()
// bind to sort events
.bind('refreshComplete', function(e, table) {
// do something after the 'refreshWidgets' has refreshed
});
});</pre></div>
</td>
<td></td>
@ -5922,13 +5944,18 @@ $.tablesorter.isValueInArray(2, sortList);</pre>
<tr id="function-addwidget">
<td><a href="#" class="permalink">addWidget</a></td>
<td>This function allows the adding of custom widget scripts to the tablesorter core (<span class="version updated">v2.18.5</span>).
<div class="collapsible"><br>
<div class="collapsible">
<br>
In <span class="version updated">v2.18.5</span>, a <code>"temp"</code> parameter was added to the <code>remove</code> widget function to indicate that the widget will be refreshed so it will only be temporarily removed (see <a href="example-widgets.html">this demo</a> for more details).<br>
<br>
Access it as follows:
<pre class="prettyprint lang-js">$.tablesorter.addWidget(myWidget);</pre>
<ul>
<li><code>myWidget</code> - object containing widget code.</li>
</ul>
The <code>myWidget</code> object must contain a proper template. The template must include an <code>id</code> and <code>format</code> blocks. The <code>priority</code>, <code>options</code>, <code>init</code> and <code>remove</code> blocks are optional. Please refer to the <a href="example-widgets.html">writing custom widgets</a> demo page for more details &amp; an example.
The <code>myWidget</code> object must contain a proper template. The template must include an <code>id</code> and <code>format</code> blocks. The <code>priority</code>, <code>options</code>, <code>init</code> and <code>remove</code> blocks are optional.<br>
<br>
Please refer to the <a href="example-widgets.html">writing custom widgets</a> demo page for more details &amp; an example.
</div>
</td>
</tr>
@ -5954,13 +5981,14 @@ widget.format( table, table.config, table.config.widgetOptions );</pre>
<tr id="function-applywidget">
<td><a href="#" class="permalink">applyWidget</a></td>
<td>This function applys (refreshes) all currently selected widgets on a table (<span class="version updated">v2.16.0</span>).
<td>This function applys (refreshes) all currently selected widgets on a table (<span class="version updated">v2.16.0</span>; <span class="version updated">v2.18.5</span>).
<div class="collapsible"><br>
Use it as follows:
<pre class="prettyprint lang-js">$.tablesorter.applyWidget( table, init );</pre>
<pre class="prettyprint lang-js">$.tablesorter.applyWidget( table, init, callback );</pre>
<ul>
<li><code>table</code> - table DOM element (or jQuery object) of table.</li>
<li><code>init</code> - optional, boolean initialization flag.</li>
<li><code>callback</code> - optional, a function executed after all widgets have been applied; the only parameter is <code>table</code> (<span class="version">v2.18.5</span>).</li>
</ul>
The <code>init</code> flag is only set to <code>true</code> to extend the default option values from the widget options block. If the widget(s) have already been applied to the table, just leave this parameter undefined.<br>
<br>
@ -5971,8 +5999,11 @@ widget.format( table, table.config, table.config.widgetOptions );</pre>
<tr id="function-refreshwidgets">
<td><a href="#" class="permalink">refreshWidgets</a></td>
<td>This function removes, then reapplies all currently selected widgets on a table (v2.4).
<div class="collapsible"><br>
<td>This function removes, then reapplies all currently selected widgets on a table (v2.4; <span class="version updated">v2.18.5</span>).
<div class="collapsible">
<br>
In <span class="version updated">v2.18.5</span>, this function was modified to internally use the <a href="#function-removewidget">removeWidget</a> function &amp; a <a href="#refreshcomplete"><code>"refreshComplete"</code></a> event is now triggered after the refresh is complete.<br>
<br>
Use it as follows:
<pre class="prettyprint lang-js">$.tablesorter.refreshWidgets( table, doAll, dontapply );</pre>
<ul>
@ -5987,6 +6018,21 @@ widget.format( table, table.config, table.config.widgetOptions );</pre>
</td>
</tr>
<tr id="function-removewidget">
<td><a href="#" class="permalink">removeWidget</a></td>
<td>This function removes selected widgets (<span class="version">v2.18.5</span>).
<div class="collapsible"><br>
Use it as follows:
<pre class="prettyprint lang-js">$.tablesorter.removeWidget( table, names );</pre>
<ul>
<li><code>table</code> - table DOM element (or jQuery object) of table.</li>
<li><code>names</code> - string (space or comma separated widget names) or an array of widget names.</li>
</ul>
This function is used by the <a href="#function-refreshwidgets">refreshWidgets</a> function.
</div>
</td>
</tr>
<tr id="function-getdata">
<td><a href="#" class="permalink">getData</a></td>
<td>This functions gets the sorter, string, empty, etc options for each column from jQuery data, metadata, header option or header class name ("sorter-false") (v2.1.16).

View File

@ -1597,7 +1597,7 @@
}
};
ts.applyWidget = function(table, init) {
ts.applyWidget = function(table, init, callback) {
table = $(table)[0]; // in case this is called externally
var c = table.config,
wo = c.widgetOptions,
@ -1660,6 +1660,10 @@
}
}
});
// callback executed on init only
if (!init && typeof callback === 'function') {
callback(table);
}
}
setTimeout(function(){
table.isApplyingWidgets = false;
@ -1671,24 +1675,53 @@
}
};
ts.refreshWidgets = function(table, doAll, dontapply, temp) {
table = $(table)[0]; // see issue #243
var i, c = table.config,
cw = c.widgets,
w = ts.widgets, l = w.length;
// remove previous widgets
for (i = 0; i < l; i++){
if ( w[i] && w[i].id && (doAll || $.inArray( w[i].id, cw ) < 0) ) {
if (c.debug) { log( 'Refeshing widgets: Removing "' + w[i].id + '"' ); }
// only remove widgets that have been initialized - fixes #442
if (w[i].hasOwnProperty('remove') && c.widgetInit[w[i].id]) {
w[i].remove(table, c, c.widgetOptions, temp);
c.widgetInit[w[i].id] = false;
}
ts.removeWidget = function(table, name, refresh, temp){
table = $(table)[0];
// name can be either an array of widgets names,
// or a space/comma separated list of widget names
name = ( $.isArray(name) ? name.join(',') : name || '' ).toLowerCase().split( /[\s,]+/ );
var i, widget, indx,
c = table.config,
len = name.length;
for (i = 0; i < len; i++) {
widget = ts.getWidgetById(name[i]);
indx = $.inArray( name[i], c.widgets );
if ( widget && 'remove' in widget ) {
if (c.debug && indx >= 0) { log( 'Removing "' + name[i] + '" widget' ); }
widget.remove(table, c, c.widgetOptions, temp);
c.widgetInit[name[i]] = false;
}
// don't remove the widget from config.widget if refreshing
if (indx >= 0 && refresh !== true) {
c.widgets.splice( indx, 1 );
}
}
};
ts.refreshWidgets = function(table, doAll, dontapply, temp) {
table = $(table)[0]; // see issue #243
var c = table.config,
cw = c.widgets,
list = [],
callback = function(table){
$(table).trigger('refreshComplete');
};
// remove widgets not defined in config.widgets, unless doAll is true
$.each( ts.widgets, function(i, w){
if (w && w.id && (doAll || $.inArray( w.id, cw ) < 0)) {
list.push( w.id );
}
});
ts.removeWidget( table, list.join(','), true, temp );
if (dontapply !== true) {
ts.applyWidget(table, doAll);
// call widget init if
ts.applyWidget(table, doAll || false, callback );
if (doAll) {
// apply widget format
ts.applyWidget(table, false, callback);
}
} else {
callback(table);
}
};

View File

@ -2018,7 +2018,7 @@ ts.resizableReset = function(table, nosave) {
if (table && c) {
c.$headers.each(function(i){
$t = $(this);
if (wo.resizable_widths[i]) {
if (wo.resizable_widths && wo.resizable_widths[i]) {
$t.css('width', wo.resizable_widths[i]);
} else if (!$t.hasClass('resizable-false')) {
// don't clear the width of any column that is not resizable

View File

@ -111,8 +111,8 @@ ts.addWidget({
}
tsp.moveToPage(table, c.pager, false);
},
remove: function(table, c){
tsp.destroyPager(table, c);
remove: function(table, c, wo, temp){
tsp.destroyPager(table, c, temp);
}
});
@ -257,9 +257,9 @@ tsp = ts.pager = {
e.stopPropagation();
tsp.enablePager(table, c, true);
})
.on('destroy.pager', function(e){
.on('destroy.pager', function(e, tmp){
e.stopPropagation();
tsp.destroyPager(table, c);
tsp.destroyPager(table, c, tmp);
})
.on('updateComplete.pager', function(e, table, triggered){
e.stopPropagation();
@ -281,7 +281,7 @@ tsp = ts.pager = {
// make sure widgets are applied - fixes #450
c.$table.trigger('applyWidgets');
})
.on('pageSize.pager', function(e,v){
.on('pageSize.pager refreshComplete.pager', function(e,v){
e.stopPropagation();
tsp.setPageSize(table, parseInt(v, 10) || p.setSize || 10, c);
tsp.hideRows(table, c);
@ -997,12 +997,13 @@ tsp = ts.pager = {
tsp.moveToPage(table, p, true);
},
destroyPager: function(table, c){
destroyPager: function(table, c, tmp){
var p = c.pager;
tsp.showAllRows(table, c);
p.initialized = false;
if (tmp) { return; }
p.$container.hide(); // hide pager
c.appender = null; // remove pager appender function
p.initialized = false;
delete table.config.rowsCopy;
c.$table.off(p.events.split(' ').join('.pager '));
if (ts.storage) {