Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: f646576a5e
Fetching contributors…

Cannot retrieve contributors at this time

223 lines (204 sloc) 8.583 kB
<!DOCTYPE HTML>
<html>
<head>
<title>jQuery tableSelect Plugin</title>
<!-- <script type="text/javascript" src="jquery-1.2.min.js"></script> -->
<script type="text/javascript" src="jquery-1.4.3.min.js"></script>
<!-- <script type="text/javascript" src="jquery.tableSelect.min.js"></script> -->
<script type="text/javascript" src="jquery.tableSelect.js"></script>
<style type="text/css">
table {
border: 1px solid black;
border-collapse: collapse;
width: 200px;
}
th, td {
border-bottom: 1px solid black;
cursor: pointer;
text-align: left;
}
th {
background-color: lightgrey;
}
tr.selected > * {
background-color: #FFFF00;
}
</style>
</head>
<body>
<h1>jQuery tableSelect Plugin &ndash; Row Selection made easy</h1>
<ol>
<li><strong>Current Version:</strong> 1.2.0</li>
<li><strong>License:</strong> MIT/GPL</li>
</ol>
<h2>Dependencies</h2>
<h3>Required</h3>
<ul>
<li><a href="http://jquery.com/">jQuery 1.2+ (<em>jQuery 1.4.3 recommended</em>)</a></li>
</ul>
<h2>tableSelectOne()</h2>
<table id="tableSelectOne">
<thead>
<tr>
<th></th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="one" /></td>
<td>Example 1</td>
</tr>
<tr>
<td><input type="radio" name="two" /></td>
<td>Example 2</td>
</tr>
<tr>
<td><input type="radio" name="three" /></td>
<td>Example 3</td>
</tr>
<tr>
<td><input type="radio" name="four" /></td>
<td>Example 4</td>
</tr>
<tr>
<td><input type="radio" name="five" /></td>
<td>Example 5</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
var tableOne = $("#tableSelectOne").tableSelectOne();
$("#tableSelectOne input").each(function() { this.checked = null; });
$(document).bind('rowchange', function(event, table) {
if(tableOne == table) {
var row = table.getFocusedRow();
table.isSelected(row) ?
$(row).find('input').attr('checked', 'checked') :
$(row).find('input').removeAttr('checked');
}
});
});
</script>
<h2>tableSelectMany()</h2>
<table id="tableSelectMany">
<thead>
<tr>
<th><input id="tableManyCbAll" type="checkbox" name="all" /></th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="one" /></td>
<td>Example 1</td>
</tr>
<tr>
<td><input type="checkbox" name="two" /></td>
<td>Example 2</td>
</tr>
<tr class="three">
<td><input type="checkbox" name="three" /></td>
<td>Example 3</td>
</tr>
<tr>
<td><input type="checkbox" name="four" /></td>
<td>Example 4</td>
</tr>
<tr>
<td><input type="checkbox" name="five" /></td>
<td>Example 5</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
var tableMany = $("#tableSelectMany").tableSelectMany();
$("#tableSelectMany input").each(function() { this.checked = null; });
// Select/Deselect all rows
$("input#tableManyCbAll").bind("click", function() {
this.checked ? tableMany.selectAll() : tableMany.clearSelections();
});
// Do something once a row has changed
$(document).bind('rowchange', function(event, table) {
if(tableMany == table) {
var row = table.getFocusedRow();
table.isSelected(row) ?
$(row).find('input').attr('checked', 'checked') :
$(row).find('input').removeAttr('checked');
table.allSelected() ?
$("input#tableManyCbAll").attr('checked', 'checked') :
$("input#tableManyCbAll").removeAttr('checked');
}
});
});
</script>
<h3>Listeners</h3>
<ul>
<li><strong>beforerowselect</strong> fires before a row is selected</li>
<li><strong>afterrowselect</strong> fires after a row is selected</li>
<li><strong>beforerowdeselect</strong> fires before a row is deselected</li>
<li><strong>afterrowdeselect</strong> fires after a row is deselected</li>
</ul>
<table id="tableSelectListeners">
<thead>
<tr>
<th><input id="tableSelectListenersCbAll" type="checkbox" name="all" /></th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="one" /></td>
<td><a href="#tableSelectListeners">Example 1</a></td>
</tr>
<tr>
<td><input type="checkbox" name="two" /></td>
<td><a href="#tableSelectListeners">Example 2</a></td>
</tr>
<tr class="three">
<td><input type="checkbox" name="three" /></td>
<td><a href="#tableSelectListeners">Example 3</a></td>
</tr>
<tr>
<td><input type="checkbox" name="four" /></td>
<td><a href="#tableSelectListeners">Example 4</a></td>
</tr>
<tr>
<td><input type="checkbox" name="five" /></td>
<td><a href="#tableSelectListeners">Example 5</a></td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
var tableMany = $("#tableSelectListeners").tableSelectMany({
listeners : {
beforerowselect : function(event) {
this.preventChange = (this.target === "a") ? true : false;
},
beforerowdeselect : function(event) {
this.preventChange = (this.target === "a") ? true : false;
},
afterrowselect : function(event) {
if(this.parentThis.allSelected()) $("input#tableSelectListenersCbAll").attr('checked', 'checked');
var toggle = $(this).find('input');
if(toggle.not(":checked")) toggle.attr('checked', 'checked');
},
afterrowdeselect : function(event) {
if(!this.parentThis.allSelected()) $("input#tableSelectListenersCbAll").removeAttr('checked');
var toggle = $(this).find('input');
if(toggle.is(":checked")) toggle.removeAttr('checked');
}
}
});
$("#tableSelectListeners input").each(function() { this.checked = null; });
// Select/Deselect all rows
$("input#tableSelectListenersCbAll").bind("click", function() {
this.checked ? tableMany.selectAll() : tableMany.clearSelections();
});
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.