library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2025-01-12 15:24:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editable: Add editable_focus, editable_blur, and editable_selectAll options. See #708

Browse Source
This commit is contained in:
Mottie 2014-08-26 16:19:47 -05:00
parent 8ddd3c76f2
commit 3a290109ef
2 changed files with 127 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,6 +52,9 @@ td.no-edit, span.no-edit {
editable_autoAccept : true, // accepts any changes made to the table cell automatically (v2.17.6)
editable_autoResort : false, // auto resort after the content has changed.
editable_validate : null, // return a valid string: function(text, original){ return text; }
editable_focused : null, // function(txt, columnIndex, $element) { }
editable_blur : null, // function(txt, columnIndex, $element) { }
editable_selectAll : null, // function(txt, columnIndex, $element) { return true; }
editable_noEdit : 'no-edit', // class name of cell that is not editable
editable_editComplete : 'editComplete' // event fired after the table content has been edited
}
@ -241,6 +244,90 @@ td.no-edit, span.no-edit {
</td>
</tr>
<tr id="editable-focused">
<td><a href="#" class="permalink">editable_focused</a></td>
<td>Callback function that is executeed when the contenteditable cell is focused (<span class="version">v2.17.8</span>)
<div class="collapsible">
<br>
Set this function to manipulate or adjust the content when the content editable is focused
<pre class="prettyprint lang-js">$(function(){
$('#table').tablesorter({
widgets : ['editable'],
widgetOptions : {
editable_focused : function(txt, columnIndex, $element){
// note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
$element.closest('td').addClass('focused');
},
editable_blur : function(txt, columnIndex, $element){
$element.closest('td').removeClass('focused');
}
}
});
});</pre>
Default value: <code>null</code>
</div>
</td>
</tr>
<tr id="editable-blur">
<td><a href="#" class="permalink">editable_blur</a></td>
<td>Callback function that is executeed when the contenteditable cell is no longer focused (<span class="version">v2.17.8</span>)
<div class="collapsible">
<br>
Set this function to manipulate or adjust the content when the content editable is blurred
<pre class="prettyprint lang-js">$(function(){
$('#table').tablesorter({
widgets : ['editable'],
widgetOptions : {
editable_focused : function(txt, columnIndex, $element){
// note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
$element.closest('td').addClass('focused');
},
editable_blur : function(txt, columnIndex, $element){
$element.closest('td').removeClass('focused');
}
}
});
});</pre>
Default value: <code>null</code>
</div>
</td>
</tr>
<tr id="editable-selectall">
<td><a href="#" class="permalink">editable_selectAll</a></td>
<td>Set to automatically select all content when the contenteditable cell is focused (<span class="version">v2.17.8</span>)
<div class="collapsible">
<br>
Set this option to a boolean, or a function that returns a boolean:
<ul>
<li>When <code>true</code>, all of the text within the current contenteditable element will be selected.</li>
<li>When <code>false</code>, no selection is made.</li>
<li>When this option contains a function, return either <code>true</code> to select all of the text within the element, or <code>false</code> to not select any text.</li>
</ul>
<pre class="prettyprint lang-js">$(function(){
$('#table').tablesorter({
widgets : ['editable'],
widgetOptions : {
editable_selectAll : function(txt, columnIndex, $element){
// note $element is the div inside of the table cell, so use $element.closest('td') to get the cell
// only select everthing within the element when the content starts with the letter "B"
return /^b/i.test(txt) && columnIndex === 0;
}
}
});
});</pre>
Default value: <code>null</code>
</div>
</td>
</tr>
<tr id="editable-validate">
<td><a href="#" class="permalink">editable_validate</a></td>
<td>Validate the content change (<span class="version updated">v2.17.8</span>)

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

@ -14,7 +14,10 @@
editable_enterToAccept : true,
editable_autoAccept : true,
editable_autoResort : false,
editable_validate : null, // function(text, originalText){ return text; }
editable_validate : null, // function(text, originalText){ return text; }
editable_focused : null, // function(text, columnIndex, $element) {}
editable_blur : null, // function(text, columnIndex, $element) { }
editable_selectAll : false, // true/false or function(text, columnIndex, $element) { return true; }
editable_noEdit : 'no-edit',
editable_editComplete : 'editComplete'
},
@ -30,6 +33,17 @@
setTimeout(function(){
$cell.focus();
}, 50);
},
selectAll = function(cell){
setTimeout(function(){
// select all text in contenteditable
// see http://stackoverflow.com/a/6150060/145346
var range = document.createRange();
range.selectNodeContents(cell);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}, 100);
};
if ( $.type(wo.editable_columns) === "string" && wo.editable_columns.indexOf('-') >= 0 ) {
@ -64,9 +78,12 @@
}
})
.on('focus.tseditable', '[contenteditable]', function(e){
clearTimeout( $(this).data('timer') );
c.$table.data( 'contentFocused', e.target );
var $this = $(this),
v = $this.html();
selAll = wo.editable_selectAll,
column = $this.closest('td').index(),
txt = $this.html();
if (wo.editable_enterToAccept) {
// prevent enter from adding into the content
$this.on('keydown.tseditable', function(e){
@ -75,7 +92,21 @@
}
});
}
$this.data({ before : v, original: v });
$this.data({ before : txt, original: txt });
if (typeof wo.editable_focused === 'function') {
wo.editable_focused( txt, column, $this );
}
if (selAll) {
if (typeof selAll === 'function') {
if ( selAll( txt, column, $this ) ) {
selectAll($this[0]);
}
} else {
selectAll($this[0]);
}
}
})
.on('blur focusout keydown '.split(' ').join('.tseditable '), '[contenteditable]', function(e){
if ( !c.$table.data('contentFocused') ) { return; }
@ -124,6 +155,12 @@
return false;
}
} else if ( !valid && e.type !== 'keydown' ) {
clearTimeout( $this.data('timer') );
$this.data('timer', setTimeout(function(){
if ($.isFunction(wo.editable_blur)) {
wo.editable_blur( $this.text(), column, $this );
}
}, 100));
// restore original content on blur
$this.html( $this.data('original') );
}