2009-11-02 12 views
1

J'essaie de créer une table qui est triable en utilisant JQuery tablesorter et aussi avec une case à cocher select all/none pour les cases à cocher des lignes individuelles. Tablesorter est désactivant la bascule.JQuery tablesorter est en conflit avec la bascule checkall

Sur un post similaire, j'ai lu "tablesorter détruit/recréer l'élément Dom d'origine" - cela dit je ne sais toujours pas comment le réparer.

Mon code est:

<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <link rel='stylesheet' href='css/simple.css' type='text/css'/> 
    <script type='text/javascript' src='js/jquery.js'></script> 
    <script type='text/javascript' src='js/tablesorter.js'></script> 
    <script type='text/javascript'> 
     function checkAll(checkname, exby) { 
     for (i = 0; i < checkname.length; i++) 
     checkname[i].checked = exby.checked? true:false 
     } 
    </script> 
    <script type="text/javascript">$(document).ready(function() {$("#dataGrid").tablesorter({ widgets: ['zebra'] });});</script> 
    <title>test</title> 
    </head> 

<body> 
<form id='dataGridForm' name='mylist' action='test.php' method='post'> 
<table id='dataGrid' class='tablesorter'> 
<thead> 
<tr> 
<th><input type="checkbox" name="all" onClick="checkAll(document.getElementsByName('checkGroup[]'),this)"></th> 
<th>col1</th> 
<th>col2</th> 
</tr> 
</thead> 
<tbody> 
<tr><td><input type="checkbox" name="checkGroup[]" value="1"></td><td>1</td><td>4</td></tr> 
<tr><td><input type="checkbox" name="checkGroup[]" value="2"></td><td>2</td><td>3</td></tr> 
<tr><td><input type="checkbox" name="checkGroup[]" value="3"></td><td>3</td><td>2</td></tr> 
<tr><td><input type="checkbox" name="checkGroup[]" value="4"></td><td>4</td><td>1</td></tr> 
</tbody> 
</table> 
<div> 
<input id='submit' type='submit' name='submit' value='submit'/></div> 
</form> 

    </body> 
</html> 

toutes les idées seraient appréciées.

Répondre

0

il semble que vous les allumer si hors tension et hors tension si sur ....

utilisent ce

function toggleAll(selector){ 
    $(selector).each(function(){ 
     this.checked = !this.checked; 
    }) 
} 

puis utilisez un sélecteur jquery qui vous donnera toutes les cases nécessaires.

onclick="toggleAll('input[type:checkbox]')" 

(non testé)

0

je devais faire une solution de contournement qui devait tirer la case checkall de la table tablesorter - il a travaillé. Cependant, je n'ai toujours aucun moyen de le faire fonctionner pendant que je suis dans la table.

1

l'option d'en-tête Ajouter comme ci-dessous:

$("#dataGrid").tablesorter({ widgets: ['zebra'], headers:{0:{sorter:false}} });