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

Add resizable_widths option. Fixes #555

Browse Source
This commit is contained in:
Mottie 2014-03-31 06:03:35 -05:00
parent e25de3c0be
commit 5dfc7efba1
3 changed files with 55 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,7 +39,14 @@
$("table:last").tablesorter({
theme : 'blue',
// initialize zebra striping and resizable widgets on the table
widgets: [ "zebra", "resizable" ]
widgets: [ "zebra", "resizable" ],
widgetOptions: {
resizable: true,
// These are the default column widths which are used when the table is
// initialized or resizing is reset; note that the "Age" column is not
// resizable, but the width can still be set to 40px here
resizable_widths : [ '10%', '10%', '40px', '10%', '100px' ]
}
});
});</script>
@ -56,6 +63,7 @@
<p class="tip">
<em>NOTE!</em>
<ul>
<li>In <span class="version">v2.15.12</span>, added <code>resizable_widths</code> option which allows the setting of default &amp; reset header widths.</li>
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
<li>This widget now saves all changed column widths to local storage, or it falls back to a cookie! (v2.1)</li>
<li>Column width saving requires the new "$.tablesorter.storage()" function included with the "jquery.tablesorter.widgets.js" file (v2.1).</li>

25
docs/index.html
View File

@ -1580,6 +1580,8 @@ $(function(){
resizable : true,
// if true, the last column will be resizable (use in non-full width tables)
resizable_addLastColumn: false,
// Add the starting & reset header widths
resizable_widths : [],
// *** savesort widget ***
// if false, the sort will not be saved for next page reload
@ -2584,6 +2586,29 @@ $('table').trigger('search', false);</pre></div>
<td><a href="example-widget-resizable.html">Example</a></td>
</tr>
<tr id="widget-resizable-widths">
<td><a href="#" class="permalink">resizable_widths</a></td>
<td>Array</td>
<td>[]</td>
<td>
Resizable widget: Set this option to the starting &amp; reset header widths (<span class="version">v2.15.12</span>).
<div class="collapsible">
<br>
Use the <a href="#widget-resizable-widths"><code>&quot;resizable_widths&quot;</code></a> option as follows:
<pre class="prettyprint lang-js">$(function(){
$("table").tablesorter({
widgets: ["resizable"],
widgetOptions : {
// headers widths applied at initialization & resizable reset
// this setting includes any non-resizable cells (resizable-false)
resizable_widths : [ '10%', '10%', '50px' ]
}
});
});</pre></div>
</td>
<td><a href="example-widget-resizable.html">Example</a></td>
</tr>
<tr id="widget-savesort">
<td><a href="#" class="permalink">saveSort</a></td>
<td>Boolean</td>

26
js/jquery.tablesorter.widgets.js
View File

@ -1346,11 +1346,13 @@ ts.addWidget({
priority: 40,
options: {
resizable : true,
resizable_addLastColumn : false
resizable_addLastColumn : false,
resizable_widths : []
},
format: function(table, c, wo) {
if (c.$table.hasClass('hasResizable')) { return; }
c.$table.addClass('hasResizable');
ts.resizableReset(table, true); // set default widths
var $rows, $columns, $column, column,
storedSizes = {},
$table = c.$table,
@ -1366,7 +1368,8 @@ ts.addWidget({
$target.width( storedSizes[$target.index()] );
$next.width( storedSizes[$next.index()] );
if (wo.resizable !== false) {
ts.storage(table, 'tablesorter-resizable', storedSizes);
// save all column widths
ts.storage(table, 'tablesorter-resizable', c.$headers.map(function(){ return $(this).width(); }).get() );
}
}
mouseXPosition = 0;
@ -1461,10 +1464,23 @@ ts.addWidget({
ts.resizableReset(table);
}
});
ts.resizableReset = function(table) {
ts.resizableReset = function(table, nosave) {
$(table).each(function(){
this.config.$headers.not('.resizable-false').css('width','');
if (ts.storage) { ts.storage(this, 'tablesorter-resizable', {}); }
var $t,
c = this.config,
wo = c && c.widgetOptions;
if (table && c) {
c.$headers.each(function(i){
$t = $(this);
if (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
$t.css('width','');
}
});
if (ts.storage && !nosave) { ts.storage(this, 'tablesorter-resizable', {}); }
}
});
};