mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
160 lines
5.0 KiB
HTML
160 lines
5.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>jQuery plugin: Tablesorter 2.0 - Content Editable</title>
|
||
|
|
|
||
|
|
<!-- jQuery -->
|
||
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Demo stuff -->
|
||
|
|
<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() {
|
||
|
|
|
||
|
|
// call the tablesorter plugin
|
||
|
|
$("table").tablesorter({
|
||
|
|
theme : 'blue',
|
||
|
|
|
||
|
|
widgets: ['editable'],
|
||
|
|
widgetOptions: {
|
||
|
|
editable_columns : [0,1,2], // point to the columns to make editable (zero-based index)
|
||
|
|
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 no editable
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});</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">
|
||
|
|
|
||
|
|
<p class="tip">
|
||
|
|
<em>NOTE!</em>
|
||
|
|
<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>Additional CSS is needed to highlight a focused editable table cell. See the CSS block below.</li>
|
||
|
|
<li>Editable widget options include (defaults in parenthesis):
|
||
|
|
<ul>
|
||
|
|
<li><code>editable_column</code> (<code>[]</code>) - Contains an array of columns numbers you want to have editable content (zero-based index). <code>contenteditable="true"</code> is added to cells within these columns.</li>
|
||
|
|
<li><code>editable_enterToAccept</code> (<code>true</code>) - Makes the user press enter to accept the content within the editable table cell; if <code>false</code>, clicking outside the cell will accept the content.</li>
|
||
|
|
<li><code>editable_autoResort</code> (<code>false</code>) - If <code>true</code> the column will resort (only if already sorted) after the content has been changed.</li>
|
||
|
|
<li><code>editable_noEdit</code> (<code>'no-edit'</code>) - Class name on table cells to search for that are not to become editable. The search is only done within the columns set by the <code>editable_column</code> option.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<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>
|
||
|
|
<li>To prevent a table cell from becoming editable, add the class name <code>"no-edit"</code> to the cell.</li>
|
||
|
|
<li>Edited content will be accepted in the following circumstances:
|
||
|
|
<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>
|
||
|
|
<li>Edited content will not be accepted in the following circumstances:
|
||
|
|
<ul>
|
||
|
|
<li>Pressing Escape within the editable content.</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<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>
|
||
|
|
<td>Parker</td>
|
||
|
|
<td>28</td>
|
||
|
|
<td>$9.99</td>
|
||
|
|
<td>20%</td>
|
||
|
|
<td>Jul 6, 2006 8:14 AM</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>John</td>
|
||
|
|
<td>Hood</td>
|
||
|
|
<td>33</td>
|
||
|
|
<td>$19.99</td>
|
||
|
|
<td>25%</td>
|
||
|
|
<td>Dec 10, 2002 5:14 AM</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Clark</td>
|
||
|
|
<td>Kent</td>
|
||
|
|
<td>18</td>
|
||
|
|
<td>$15.89</td>
|
||
|
|
<td>44%</td>
|
||
|
|
<td>Jan 12, 2003 11:14 AM</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Bruce</td>
|
||
|
|
<td>Almighty</td>
|
||
|
|
<td>45</td>
|
||
|
|
<td>$153.19</td>
|
||
|
|
<td>44%</td>
|
||
|
|
<td>Jan 18, 2001 9:12 AM</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>Bruce</td>
|
||
|
|
<td>Evans</td>
|
||
|
|
<td>22</td>
|
||
|
|
<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>
|
||
|
|
|