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

Editable: improve column parsing. Fixes #982 & #979

Browse Source 
Also replace jQuery each functions
This commit is contained in:
Mottie 2015-07-30 20:19:32 -05:00
parent d8fd020d29
commit 1d1e4d72f8
3 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

6
docs/example-widget-editable.html
View File

@ -124,6 +124,7 @@ td.editable_updated {
<ul>
<li>This widget can not be applied to the original plugin and requires jQuery 1.7+ and a browser that supports <a href="http://caniuse.com/#feat=contenteditable"><code>contenteditable</code> attributes</a> (almost all modern browsers).</li>
<li><span class="label warning">Important</span>: In Internet Explorer, please wrap the cell content with a DIV or SPAN as <a href="http://msdn.microsoft.com/en-us/library/ie/ms533690(v=vs.85).aspx">it is not possible to make table cells directly contenteditable</a>. Wrapping the content in the markup is much more efficient than using javascript to do it for you (especially in IE).<br><br></li>
<li>In <span class="version">v2.23.0</span>, the <code>editable_columns</code> option will now accept a string with both ranges and single columns, e.g. <code>'1,3-5,7'</code>.</li>
<li>In <span class="version">v2.22.2</span>,
<ul>
<li><kbd>Shift</kbd>+<kbd>Enter</kbd> can now be used to start a new line even if <code>editable_enterToAccept</code> is <code>true</code>.</li>
@ -232,10 +233,11 @@ td.editable_updated {
<tr id="editable-columns">
<td><a href="#" class="permalink">editable_columns</a></td>
<td>Contains an array (or range string) of columns numbers you want to have editable content (zero-based index).
<td>Contains an array (or range string) of columns numbers you want to have editable content (zero-based index) (<span class="version updated">v2.23.0</span>).
<div class="collapsible">
<ul>
<li>In tablesorter core <span class="version">v2.14.2</span>, this widget was updated to allow passing a range string in this option, i.e. <code>"0-2"</code> instead of <code>[0,1,2]</code>.</li>
<li>In <span class="version">v2.23.0</span>, this option will now accept both range &amp; comma separated values, e.g. <code>'1,3-5,7'</code>.</li>
<li>In tablesorter core <span class="version">v2.14.2</span>, this widget was updated to allow passing a range string in this option, i.e. <code>'0-2'</code> instead of <code>[0,1,2]</code>.</li>
<li><code>contenteditable="true"</code> is added to cells within these columns.</li>
</ul>
Default value: <code>[]</code> (empty array)

75
js/widgets/widget-editable.js
View File

@ -45,38 +45,43 @@
},
getColumns : function( c, wo ) {
var indx, tmp,
colIndex = [],
var list, indx, range, len, tmp,
editableColumns = wo.editable_columns,
cols = [];
if ( !wo.editable_columnsArray && $.type( wo.editable_columns ) === 'string' && wo.editable_columns.indexOf( '-' ) >= 0 ) {
// editable_columns can contain a range string ( i.e. '2-4' )
tmp = wo.editable_columns.split( /\s*-\s*/ );
indx = parseInt( tmp[ 0 ], 10 ) || 0;
tmp = parseInt( tmp[ 1 ], 10 ) || ( c.columns - 1 );
if ( tmp > c.columns ) {
tmp = c.columns - 1;
}
for ( ; indx <= tmp; indx++ ) {
colIndex.push( indx );
cols.push( 'td:nth-child(' + ( indx + 1 ) + ')' );
}
} else if ( $.isArray( wo.editable_columns ) ) {
$.each( wo.editable_columnsArray || wo.editable_columns, function( i, col ) {
if ( col < c.columns ) {
colIndex.push( col );
cols.push( 'td:nth-child(' + ( col + 1 ) + ')' );
if ( typeof editableColumns === 'string' ) {
// editable_columns can contain a range string, or comma separated values (e.g. '1,2-4,7')
list = editableColumns.replace( /\s+/, '' ).split( /,/ );
len = list.length - 1;
while ( len >= 0 ) {
if ( list[ len ].indexOf( '-' ) >= 0 ) {
range = list[ len ].split( '-' );
indx = parseInt( range[ 0 ], 10 ) || 0;
range = parseInt( range[ 1 ], 10) || c.columns - 1;
if ( indx > range ) {
// in case someone does '5-3'
tmp = indx; indx = range; range = tmp;
}
for ( ; indx <= range; indx++ ) {
cols.push( 'td:nth-child(' + ( indx + 1 ) + ')' );
}
} else {
cols.push( 'td:nth-child(' + ( ( parseInt( list[ len ], 10 ) || 0 ) + 1 ) + ')' );
}
});
}
if ( !wo.editable_columnsArray ) {
wo.editable_columnsArray = colIndex;
wo.editable_columnsArray.sort(function(a, b){ return a - b; });
len--;
}
} else if ( $.isArray( editableColumns ) ) {
len = editableColumns.length;
for ( indx = 0; indx < len; indx++ ) {
if ( editableColumns[ indx ] < c.columns ) {
cols.push( 'td:nth-child(' + ( editableColumns[ indx ] + 1 ) + ')' );
}
}
}
return cols;
},
update: function( c, wo ) {
var $t,
var $t, $cells, cellIndex, cellLen, $editable, editableIndex, editableLen,
tmp = $( '<div>' ).wrapInner( wo.editable_wrapContent ).children().length || $.isFunction( wo.editable_wrapContent ),
cols = tse.getColumns( c, wo ).join( ',' );
@ -86,24 +91,28 @@
// IE does not allow making TR/TH/TD cells directly editable ( issue #404 )
// so add a div or span inside ( it's faster than using wrapInner() )
c.$tbodies.find( cols ).not( '.' + wo.editable_noEdit ).each( function() {
$cells = c.$tbodies.find( cols ).not( '.' + wo.editable_noEdit );
cellLen = $cells.length;
for ( cellIndex = 0; cellIndex < cellLen; cellIndex++ ) {
/*jshint loopfunc:true */
// test for children, if they exist, then make the children editable
$t = $( this );
$t = $cells.eq( cellIndex );
if ( tmp && $t.children( 'div, span' ).length === 0 ) {
$t.wrapInner( wo.editable_wrapContent );
}
if ( $t.children( 'div, span' ).length ) {
$editable = $t.children( 'div, span' ).not( '.' + wo.editable_noEdit );
editableLen = $editable.length;
if ( editableLen ) {
// make div/span children content editable
$t.children( 'div, span' ).not( '.' + wo.editable_noEdit ).each( function() {
var $this = $( this );
for ( editableIndex = 0; editableIndex < editableLen; editableIndex++ ) {
var $this = $editable.eq( editableIndex );
if ( wo.editable_trimContent ) {
$this.html( function( i, txt ) {
return $.trim( txt );
});
}
$this.prop( 'contenteditable', true );
});
}
} else {
if ( wo.editable_trimContent ) {
$t.html( function( i, txt ) {
@ -112,7 +121,7 @@
}
$t.prop( 'contenteditable', true );
}
});
}
},
bindEvents: function( c, wo ) {