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
f0d04d8b22
tablesorter/docs/example-widget-editable.html

253 lines
8.5 KiB
HTML
Raw Normal View History

Added content editable widget
2013-04-13 01:39:07 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Content Editable</title>
<!-- jQuery -->
Docs: switch from CDN to local files (prevents https conflicts) & cleanup
2014-05-21 22:09:23 +00:00
<script src="js/jquery-latest.min.js"></script>
Added content editable widget
2013-04-13 01:39:07 +00:00
<!-- Demo stuff -->
Docs: switch from CDN to local files (prevents https conflicts) & cleanup
2014-05-21 22:09:23 +00:00
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui-latest.min.js"></script>
Added content editable widget
2013-04-13 01:39:07 +00:00
<link rel="stylesheet" href="css/jq.css">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/widgets/widget-editable.js"></script>
<style id="css">.tablesorter tbody > tr > td[contenteditable=true]:focus {
outline: #08f 1px solid;
background: #eee;
resize: none;
}
td.no-edit, span.no-edit {
background-color: rgba(230,191,153,0.5);
}</style>
<script id="js">$(function() {
update editable widget docs
2013-11-25 11:58:03 +00:00
$("table")
.tablesorter({
theme : 'blue',
Added content editable widget
2013-04-13 01:39:07 +00:00
update editable widget docs
2013-11-25 11:58:03 +00:00
widgets: ['editable'],
widgetOptions: {
editable_columns now accepts a range string. Fixes #435
2013-11-25 12:20:12 +00:00
editable_columns : [0,1,2], // or "0-2" (v2.14.2); point to the columns to make editable (zero-based index)
update editable widget docs
2013-11-25 11:58:03 +00:00
editable_enterToAccept : true, // press enter to accept content, or click outside if false
editable_autoResort : false, // auto resort after the content has changed.
editable_noEdit : 'no-edit', // class name of cell that is not editable
editable_editComplete : 'editComplete' // event fired after the table content has been edited
}
})
.children('tbody').on('editComplete', 'td', function(){
var $this = $(this),
$allRows = $this.closest('table')[0].config.$tbodies.children('tr'),
newContent = $this.text(),
cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody
rowIndex = $allRows.index( $this.closest('tr') );
/*
$.post("mysite.php", {
"row" : rowIndex,
"cell" : cellIndex,
"content" : newContent
});
*/
});
Added content editable widget
2013-04-13 01:39:07 +00:00
});</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Content Editable</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
Widget doc updates
2014-04-29 00:19:59 +00:00
<p></p>
<br>
<div id="root" class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
Added content editable widget
2013-04-13 01:39:07 +00:00
<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>
Widget doc updates
2014-04-29 00:19:59 +00:00
<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).</li>
editable widget now works in IE if cell contains a div or span. Fixes #404.
2013-11-02 15:54:11 +00:00
<li>Updated <span class="version updated">v2.13.2</span>, because of the limitation in IE, if a table cell contains any DIV or SPAN immediately inside the cell, it will be targeted instead of the table cell itself and made content editable. So, if you don't care about IE support, there is no need to include the extra markup.</li>
<li>In some browsers, additional CSS is needed to highlight a focused editable table cell. See the CSS block below.</li>
Added content editable widget
2013-04-13 01:39:07 +00:00
<li>Pressing escape while editing will cancel any changes.</li>
<li>In the demo below, click in any of the first three columns to edit the content, except for the cell containing <span class="no-edit">"Peter"</span>.</li>
Widget doc updates
2014-04-29 00:19:59 +00:00
<li>To prevent a table cell from becoming editable, add the class name <code>"no-edit"</code> to the cell. Set by the <code>editable_noEdit</code> option.</li>
<li>Edited content <em>will be accepted</em> in the following circumstances:
Added content editable widget
2013-04-13 01:39:07 +00:00
<ul>
<li>Pressing enter when the <code>editable_enterToAccept</code> option is <code>true</code>.</li>
<li>Clicking outside of the current editable content.</li>
<li>Moving the mouse outside of the current tbody. This is done because if the content editable is still active when the user clicks on the header to sort the column, all sorts of bad things happen.</li>
</ul>
</li>
Widget doc updates
2014-04-29 00:19:59 +00:00
<li>Edited content <em>will not be accepted</em> in the following circumstances:
Added content editable widget
2013-04-13 01:39:07 +00:00
<ul>
<li>Pressing Escape within the editable content.</li>
</ul>
</li>
</ul>
Widget doc updates
2014-04-29 00:19:59 +00:00
</div>
<h3><a href="#">Options</a></h3>
<div>
<h4>Editable widget widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
<div>
<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
</div>
<table class="options tablesorter-blue" data-sortlist="[[0,0]]">
<thead>
<tr><th>Option</th><th class="sorter-false">Description</th></tr>
</thead>
<tbody>
Corrected typeo Caused confusion because it said the option was called "editable_column" when it is actually "editable_columns".
2014-05-30 14:36:35 +00:00
<tr id="editable-columns">
<td><a href="#" class="permalink">editable_columns</a></td>
Widget doc updates
2014-04-29 00:19:59 +00:00
<td>Contains an array (or range string) of columns numbers you want to have editable content (zero-based index).
<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><code>contenteditable="true"</code> is added to cells within these columns.</li>
</ul>
Default value: <code>[]</code> (empty array)
</div>
</td>
</tr>
Added content editable widget
2013-04-13 01:39:07 +00:00
Widget doc updates
2014-04-29 00:19:59 +00:00
<tr id="editable-enter-to-accept">
<td><a href="#" class="permalink">editable_enterToAccept</a></td>
<td>Makes the user press enter to accept the content within the editable table cell
<div class="collapsible">
<br>
if <code>false</code>, clicking outside the cell will accept the content.<br>
<br>
Default value: <code>true</code>
</div>
</td>
</tr>
<tr id="editable-auto-resort">
<td><a href="#" class="permalink">editable_autoResort</a></td>
<td>If <code>true</code>, the column will resort (only if already sorted) after the content has been changed.
<div class="collapsible">
<br>
Default value: <code>false</code>
</div>
</td>
</tr>
<tr id="editable-no-edit">
<td><a href="#" class="permalink">editable_noEdit</a></td>
<td>Class name on table cells to search for that are not to become editable. .</li>
<div class="collapsible">
<br>
Corrected typeo Caused confusion because it said the option was called "editable_column" when it is actually "editable_columns".
2014-05-30 14:36:35 +00:00
The search is only done within the columns set by the <code>editable_columns</code> option.<br>
Widget doc updates
2014-04-29 00:19:59 +00:00
<br>
Default value: <code>'no-edit'</code>
</div>
</td>
</tr>
<tr id="editable-edit-complete">
<td><a href="#" class="permalink">editable_editComplete</a></td>
<td>Event fired after the table content has been edited
<div class="collapsible">
<br>
Default value: <code>'editComplete'</code>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</p>
Added content editable widget
2013-04-13 01:39:07 +00:00
<h1>Demo</h1>
<div id="demo"><table class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="no-edit">Peter</td>
editable widget now works in IE if cell contains a div or span. Fixes #404.
2013-11-02 15:54:11 +00:00
<td><div>Parker</div></td>
<td><div>28</div></td>
Added content editable widget
2013-04-13 01:39:07 +00:00
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
editable widget now works in IE if cell contains a div or span. Fixes #404.
2013-11-02 15:54:11 +00:00
<td><div>John</div></td>
<td><div>Hood</div></td>
<td><div>33</div></td>
Added content editable widget
2013-04-13 01:39:07 +00:00
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
editable widget now works in IE if cell contains a div or span. Fixes #404.
2013-11-02 15:54:11 +00:00
<td><div>Clark</div></td>
<td><div>Kent</div></td>
<td><div>18</div></td>
Added content editable widget
2013-04-13 01:39:07 +00:00
<td>$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
editable widget now works in IE if cell contains a div or span. Fixes #404.
2013-11-02 15:54:11 +00:00
<td><div>Bruce</div></td>
<td><div>Almighty</div></td>
<td><div>45</div></td>
Added content editable widget
2013-04-13 01:39:07 +00:00
<td>$153.19</td>
<td>44%</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
<tr>
editable widget now works in IE if cell contains a div or span. Fixes #404.
2013-11-02 15:54:11 +00:00
<td><div>Bruce</div></td>
<td><div>Evans</div></td>
<td><div>22</div></td>
Added content editable widget
2013-04-13 01:39:07 +00:00
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
</tbody>
</table></div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<h1>CSS</h1>
<div id="css">
<pre class="prettyprint lang-css"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
</div>
</body>
</html>
Reference in New Issue Copy Permalink