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

Editable: modify trimContent option & use html to modify text. Fixes #886

Browse Source
This commit is contained in:
Mottie 2015-04-25 20:27:57 -05:00
parent 27567178d7
commit 9a178c05b2
3 changed files with 23 additions and 15 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

@ -1,2 +1,2 @@
/*! Widget: editable - updated 2/9/2015 (v2.19.1) */ /*! Widget: editable - updated 2/9/2015 (v2.19.1) */
!function(a){"use strict";var b=a.tablesorter.editable={editComplete:function(a,b,c,d){c.removeClass("tseditable-last-edited-cell").trigger(b.editable_editComplete,[a]),d&&setTimeout(function(){c.focus()},50)},selectAll:function(a){setTimeout(function(){var b,c=document.createRange();c.selectNodeContents(a),b=window.getSelection(),b.removeAllRanges(),b.addRange(c)},100)},update:function(b,c){var d,e,f,g=[],h=[];if(!c.editable_columnsArray&&"string"===a.type(c.editable_columns)&&c.editable_columns.indexOf("-")>=0)for(e=c.editable_columns.split(/\s*-\s*/),d=parseInt(e[0],10)||0,e=parseInt(e[1],10)||b.columns-1,e>b.columns&&(e=b.columns-1);e>=d;d++)g.push(d),h.push("td:nth-child("+(d+1)+")");else a.isArray(c.editable_columns)&&a.each(c.editable_columnsArray||c.editable_columns,function(a,c){c<b.columns&&(g.push(c),h.push("td:nth-child("+(c+1)+")"))});c.editable_columnsArray||(c.editable_columnsArray=g,c.editable_columnsArray.sort(function(a,b){return a-b})),e=a("<div>").wrapInner(c.editable_wrapContent).children().length||a.isFunction(c.editable_wrapContent),b.$tbodies.find(h.join(",")).not("."+c.editable_noEdit).each(function(){f=a(this),e&&0===f.children().length&&f.wrapInner(c.editable_wrapContent),f.children().length?f.children().not("."+c.editable_noEdit).each(function(){var b=a(this);c.editable_trimContent&&b.text(function(b,c){return a.trim(c)}),b.prop("contenteditable",!0)}):(c.editable_trimContent&&f.text(function(b,c){return a.trim(c)}),f.prop("contenteditable",!0))})},bindEvents:function(c,d){c.$table.off("updateComplete pagerComplete ".split(" ").join(".tseditable ").replace(/\s+/g," ")).on("updateComplete pagerComplete ".split(" ").join(".tseditable "),function(){b.update(c,c.widgetOptions)}),c.$tbodies.off("mouseleave focus blur focusout keydown ".split(" ").join(".tseditable ").replace(/\s+/g," ")).on("mouseleave.tseditable",function(){c.$table.data("contentFocused")&&(c.$table.data("contentFocused",!0),a(":focus").trigger("focusout"))}).on("focus.tseditable","[contenteditable]",function(e){clearTimeout(a(this).data("timer")),c.$table.data("contentFocused",e.target);var f=a(this),g=d.editable_selectAll,h=f.closest("td").index(),i=a.trim(f.text());d.editable_enterToAccept&&f.on("keydown.tseditable",function(a){13===a.which&&a.preventDefault()}),f.data({before:i,original:i}),"function"==typeof d.editable_focused&&d.editable_focused(i,h,f),g&&("function"==typeof g?g(i,h,f)&&b.selectAll(f[0]):b.selectAll(f[0]))}).on("blur focusout keydown ".split(" ").join(".tseditable "),"[contenteditable]",function(e){if(c.$table.data("contentFocused")){var f,g,h=!1,i=a(e.target),j=a.trim(i.text()),k=i.closest("td").index();if(27===e.which)return i.html(a.trim(i.data("original"))).trigger("blur.tseditable"),c.$table.data("contentFocused",!1),!1;if(f=13===e.which&&(d.editable_enterToAccept||e.altKey)||d.editable_autoAccept&&"keydown"!==e.type,f&&i.data("before")!==j){if(g=d.editable_validate,h=j,"function"==typeof g?h=g(j,i.data("original"),k,i):"function"==typeof(g=a.tablesorter.getColumnData(c.table,g,k))&&(h=g(j,i.data("original"),k,i)),f&&h!==!1)return c.$table.find(".tseditable-last-edited-cell").removeClass("tseditable-last-edited-cell"),i.addClass("tseditable-last-edited-cell").html(a.trim(h)).data("before",h).data("original",h).trigger("change"),c.$table.trigger("updateCell",[i.closest("td"),!1,function(){d.editable_autoResort?setTimeout(function(){c.$table.trigger("sorton",[c.sortList,function(){b.editComplete(c,d,c.$table.find(".tseditable-last-edited-cell"),!0)},!0])},10):b.editComplete(c,d,c.$table.find(".tseditable-last-edited-cell"))}]),!1}else h||"keydown"===e.type||(clearTimeout(i.data("timer")),i.data("timer",setTimeout(function(){a.isFunction(d.editable_blur)&&d.editable_blur(a.trim(i.text()),k,i)},100)),i.html(a.trim(i.data("original"))))}})}};a.tablesorter.addWidget({id:"editable",options:{editable_columns:[],editable_enterToAccept:!0,editable_autoAccept:!0,editable_autoResort:!1,editable_wrapContent:"<div>",editable_trimContent:!0,editable_validate:null,editable_focused:null,editable_blur:null,editable_selectAll:!1,editable_noEdit:"no-edit",editable_editComplete:"editComplete"},init:function(a,c,d,e){e.editable_columns.length&&(b.update(d,e),b.bindEvents(d,e))}})}(jQuery); !function(a){"use strict";var b=a.tablesorter.editable={editComplete:function(a,b,c,d){c.removeClass("tseditable-last-edited-cell").trigger(b.editable_editComplete,[a]),d&&setTimeout(function(){c.focus()},50)},selectAll:function(a){setTimeout(function(){var b,c=document.createRange();c.selectNodeContents(a),b=window.getSelection(),b.removeAllRanges(),b.addRange(c)},100)},update:function(b,c){var d,e,f,g=[],h=[];if(!c.editable_columnsArray&&"string"===a.type(c.editable_columns)&&c.editable_columns.indexOf("-")>=0)for(e=c.editable_columns.split(/\s*-\s*/),d=parseInt(e[0],10)||0,e=parseInt(e[1],10)||b.columns-1,e>b.columns&&(e=b.columns-1);e>=d;d++)g.push(d),h.push("td:nth-child("+(d+1)+")");else a.isArray(c.editable_columns)&&a.each(c.editable_columnsArray||c.editable_columns,function(a,c){c<b.columns&&(g.push(c),h.push("td:nth-child("+(c+1)+")"))});c.editable_columnsArray||(c.editable_columnsArray=g,c.editable_columnsArray.sort(function(a,b){return a-b})),e=a("<div>").wrapInner(c.editable_wrapContent).children().length||a.isFunction(c.editable_wrapContent),b.$tbodies.find(h.join(",")).not("."+c.editable_noEdit).each(function(){f=a(this),e&&0===f.children().length&&f.wrapInner(c.editable_wrapContent),f.children().length?f.children().not("."+c.editable_noEdit).each(function(){var b=a(this);c.editable_trimContent&&b.html(function(b,c){return a.trim(c)}),b.prop("contenteditable",!0)}):(c.editable_trimContent&&f.html(function(b,c){return a.trim(c)}),f.prop("contenteditable",!0))})},bindEvents:function(c,d){c.$table.off("updateComplete pagerComplete ".split(" ").join(".tseditable ").replace(/\s+/g," ")).on("updateComplete pagerComplete ".split(" ").join(".tseditable "),function(){b.update(c,c.widgetOptions)}),c.$tbodies.off("mouseleave focus blur focusout keydown ".split(" ").join(".tseditable ").replace(/\s+/g," ")).on("mouseleave.tseditable",function(){c.$table.data("contentFocused")&&(c.$table.data("contentFocused",!0),a(":focus").trigger("focusout"))}).on("focus.tseditable","[contenteditable]",function(e){clearTimeout(a(this).data("timer")),c.$table.data("contentFocused",e.target);var f=a(this),g=d.editable_selectAll,h=f.closest("td").index(),i=f.html();d.editable_trimContent&&(i=a.trim(i)),f.off("keydown.tseditable").on("keydown.tseditable",function(a){d.editable_enterToAccept&&13===a.which&&a.preventDefault()}),f.data({before:i,original:i}),"function"==typeof d.editable_focused&&d.editable_focused(i,h,f),g&&("function"==typeof g?g(i,h,f)&&b.selectAll(f[0]):b.selectAll(f[0]))}).on("blur focusout keydown ".split(" ").join(".tseditable "),"[contenteditable]",function(e){if(c.$table.data("contentFocused")){var f,g,h=!1,i=a(e.target),j=i.html(),k=i.closest("td").index();if(d.editable_trimContent&&(j=a.trim(j)),27===e.which)return i.html(i.data("original")).trigger("blur.tseditable"),c.$table.data("contentFocused",!1),!1;if(f=13===e.which&&(d.editable_enterToAccept||e.altKey)||d.editable_autoAccept&&"keydown"!==e.type,f&&i.data("before")!==j){if(g=d.editable_validate,h=j,"function"==typeof g?h=g(j,i.data("original"),k,i):"function"==typeof(g=a.tablesorter.getColumnData(c.table,g,k))&&(h=g(j,i.data("original"),k,i)),f&&h!==!1)return c.$table.find(".tseditable-last-edited-cell").removeClass("tseditable-last-edited-cell"),i.addClass("tseditable-last-edited-cell").html(h).data("before",h).data("original",h).trigger("change"),c.$table.trigger("updateCell",[i.closest("td"),!1,function(){d.editable_autoResort?setTimeout(function(){c.$table.trigger("sorton",[c.sortList,function(){b.editComplete(c,d,c.$table.find(".tseditable-last-edited-cell"),!0)},!0])},10):b.editComplete(c,d,c.$table.find(".tseditable-last-edited-cell"))}]),!1}else h||"keydown"===e.type||(clearTimeout(i.data("timer")),i.data("timer",setTimeout(function(){a.isFunction(d.editable_blur)&&(j=i.html(),d.editable_blur(d.editable_trimContent?a.trim(j):j,k,i))},100)),i.html(i.data("original")))}})}};a.tablesorter.addWidget({id:"editable",options:{editable_columns:[],editable_enterToAccept:!0,editable_autoAccept:!0,editable_autoResort:!1,editable_wrapContent:"<div>",editable_trimContent:!0,editable_validate:null,editable_focused:null,editable_blur:null,editable_selectAll:!1,editable_noEdit:"no-edit",editable_editComplete:"editComplete"},init:function(a,c,d,e){e.editable_columns.length&&(b.update(d,e),b.bindEvents(d,e))}})}(jQuery);

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

@ -71,6 +71,7 @@ td.no-edit, span.no-edit {
return /^b/i.test(txt) && columnIndex === 0; return /^b/i.test(txt) && columnIndex === 0;
}, },
editable_wrapContent : '<div>', // wrap all editable cell content... makes this widget work in IE, and with autocomplete editable_wrapContent : '<div>', // wrap all editable cell content... makes this widget work in IE, and with autocomplete
editable_trimContent : true, // trim content ( removes outer tabs & carriage returns )
editable_noEdit : 'no-edit', // class name of cell that is not editable editable_noEdit : 'no-edit', // class name of cell that is not editable
editable_editComplete : 'editComplete' // event fired after the table content has been edited editable_editComplete : 'editComplete' // event fired after the table content has been edited
} }
@ -420,7 +421,7 @@ td.no-edit, span.no-edit {
When a table cell is formatted as follows: When a table cell is formatted as follows:
<pre class="prettyprint lang-html">&lt;td&gt; <pre class="prettyprint lang-html">&lt;td&gt;
John John
&lt;/td&gt;</pre>All carriage returns and tab(s) within the table cell would be included before editing. Once the contenteditable element has focus, the content is cleaned up.<br> &lt;/td&gt;</pre>Carriage returns and tab(s) at the beginning &amp; end of the contenteditable table cells will be removed initially and after editing.<br>
<br> <br>
If this option is <code>true</code>, this widget will trim content <em>upon initialization</em>; this is necessary if you need cleaned it up content before editing, like with an autocomplete script.<br> If this option is <code>true</code>, this widget will trim content <em>upon initialization</em>; this is necessary if you need cleaned it up content before editing, like with an autocomplete script.<br>
<br> <br>

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

@ -76,7 +76,7 @@ var tse = $.tablesorter.editable = {
$t.children().not( '.' + wo.editable_noEdit ).each( function() { $t.children().not( '.' + wo.editable_noEdit ).each( function() {
var $this = $( this ); var $this = $( this );
if ( wo.editable_trimContent ) { if ( wo.editable_trimContent ) {
$this.text( function( i, txt ) { $this.html( function( i, txt ) {
return $.trim( txt ); return $.trim( txt );
}); });
} }
@ -84,7 +84,7 @@ var tse = $.tablesorter.editable = {
}); });
} else { } else {
if ( wo.editable_trimContent ) { if ( wo.editable_trimContent ) {
$t.text( function( i, txt ) { $t.html( function( i, txt ) {
return $.trim( txt ); return $.trim( txt );
}); });
} }
@ -115,15 +115,18 @@ var tse = $.tablesorter.editable = {
var $this = $( this ), var $this = $( this ),
selAll = wo.editable_selectAll, selAll = wo.editable_selectAll,
column = $this.closest( 'td' ).index(), column = $this.closest( 'td' ).index(),
txt = $.trim( $this.text() ); txt = $this.html();
if ( wo.editable_enterToAccept ) { if ( wo.editable_trimContent ) {
// prevent enter from adding into the content txt = $.trim( txt );
$this.on( 'keydown.tseditable', function( e ){ }
if ( e.which === 13 ) { // prevent enter from adding into the content
$this
.off( 'keydown.tseditable' )
.on( 'keydown.tseditable', function( e ){
if ( wo.editable_enterToAccept && e.which === 13 ) {
e.preventDefault(); e.preventDefault();
} }
}); });
}
$this.data({ before : txt, original: txt }); $this.data({ before : txt, original: txt });
if ( typeof wo.editable_focused === 'function' ) { if ( typeof wo.editable_focused === 'function' ) {
@ -145,11 +148,14 @@ var tse = $.tablesorter.editable = {
var t, validate, var t, validate,
valid = false, valid = false,
$this = $( e.target ), $this = $( e.target ),
txt = $.trim( $this.text() ), txt = $this.html(),
column = $this.closest( 'td' ).index(); column = $this.closest( 'td' ).index();
if ( wo.editable_trimContent ) {
txt = $.trim( txt );
}
if ( e.which === 27 ) { if ( e.which === 27 ) {
// user cancelled // user cancelled
$this.html( $.trim( $this.data( 'original' ) ) ).trigger( 'blur.tseditable' ); $this.html( $this.data( 'original' ) ).trigger( 'blur.tseditable' );
c.$table.data( 'contentFocused', false ); c.$table.data( 'contentFocused', false );
return false; return false;
} }
@ -171,7 +177,7 @@ var tse = $.tablesorter.editable = {
c.$table.find( '.tseditable-last-edited-cell' ).removeClass( 'tseditable-last-edited-cell' ); c.$table.find( '.tseditable-last-edited-cell' ).removeClass( 'tseditable-last-edited-cell' );
$this $this
.addClass( 'tseditable-last-edited-cell' ) .addClass( 'tseditable-last-edited-cell' )
.html( $.trim( valid ) ) .html( valid )
.data( 'before', valid ) .data( 'before', valid )
.data( 'original', valid ) .data( 'original', valid )
.trigger( 'change' ); .trigger( 'change' );
@ -192,11 +198,12 @@ var tse = $.tablesorter.editable = {
clearTimeout( $this.data( 'timer' ) ); clearTimeout( $this.data( 'timer' ) );
$this.data( 'timer', setTimeout( function() { $this.data( 'timer', setTimeout( function() {
if ( $.isFunction( wo.editable_blur ) ) { if ( $.isFunction( wo.editable_blur ) ) {
wo.editable_blur( $.trim( $this.text() ), column, $this ); txt = $this.html();
wo.editable_blur( wo.editable_trimContent ? $.trim( txt ) : txt, column, $this );
} }
}, 100 ) ); }, 100 ) );
// restore original content on blur // restore original content on blur
$this.html( $.trim( $this.data( 'original' ) ) ); $this.html( $this.data( 'original' ) );
} }
}); });
} }