2010-07-24 21 views
4

Exemple d'échec:
http://progamonth.com/files/testfile.htmljQuery tablesorter - rowspan les en-têtes provoque un comportement étrange

Comportement souhaité:
Idéalement, les en-têtes avec un colspan ne devrait pas affecter le tri. À l'heure actuelle, ils reçoivent des boutons de tri, et même si je spécifie headers: {index: {sorter: false}} pour chacun des en-têtes colspan, ils affectent encore le tri. Lorsque je clique sur les en-têtes sans rowspan ou colspan (1.1.2 etc), ils semblent provoquer le tri de 4 colonnes vers la droite!

Exemple de ce travail, que je ne peux pas reproduire:
http://lovepeacenukes.com/tablesorter/2.0/docs/

Cette page semble montrer ce comportement de travail, mais je ne peux pas reproduire ce. L'exemple de rowspan ne supprime même pas manuellement ces en-têtes, alors que se passe-t-il ?! Je vois que les en-têtes colspan de l'exemple n'ont pas de classe header, mais cela semble être appliqué par le plugin tablesorter.

Est-ce que quelqu'un sait ce qui se passe?

image travail: alt text http://progamonth.com/files/working.png

image Pas de travail: alt text http://progamonth.com/files/notworking.png

Répondre

2

La fonction a été désactivée comme il est dit ici: link text

J'ai trouvé une autre façon d'avoir le même effet, à l'intérieur des tablesorter js autour de la ligne 298 il y a cette règle de Code:

$tableHeaders = $("thead th",table); 

Modifier à

$tableHeaders = $("thead th:not([colspan])",table); 

et ça marche pour moi!

EDIT: Changé le code et l'emplacement

+0

Cela ne fonctionne pas. Il ajoute toujours des classes aux en-têtes qui ne devraient pas les obtenir et il lance des erreurs lorsque vous cliquez sur les en-têtes étiquetés 3.1 à 4.2. – Borgar

+0

Modifié, l'erreur ne se produit plus. Quelles classes sont ajoutées? Les seules classes qu'ils obtiennent sont la classe "header" qui est ajoutée au html et non par js. –

0

Je n'ai pas entièrement testé, mais je vous suggère de mettre à jour votre type de doc. De trieur de table d'expérience (et jQuery en général) peut être très sensible aux types de doc.

La démo (qui fonctionne) utilise les éléments suivants:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

Edit: Après mise à jour du Doctype ne fonctionne toujours pas pour moi. J'ai ensuite téléchargé la version de TableSorter utilisée sur le site de démonstration et elle fonctionne maintenant comme demo'd. La seule autre différence est que j'ai inclus les scripts et css dans la section head du document mais cela ne devrait faire aucune différence.

Je pensais que la version de jQuery pourrait être un problème, mais j'utilise 1.3.2 en utilisant la même ressource que vous.

3

La démo docs utilise une version (ancienne) différente de jQuery et Tablesorter que vous êtes. En comparant les sources, je constate que la détection automatique de la portée col/row n'est jamais effectuée dans la nouvelle version. La fonction de détection des travées est toujours là - mais juste ne pas être appelée. Aucune idée de pourquoi cette régression s'est produite.

Cela dit, je peux obtenir votre démo pour exécuter en utilisant cette configuration:

$(document).ready(function(){ 
    $('#rowspan').tablesorter({ 
    headers: { 
     4: {sorter: false}, 
     5: {sorter: false}, 
     6: {sorter: false}, 
     7: {sorter: false} 
    } 
    }); 
}); 

qui, si vous savez que le colspan>1 est un critère de sécurité à passer, alors je déduis les indices d'en-tête comme celui-ci :

$(function(){ 
    var headers = {}; 
    $('#rowspan thead th').each(function(i,h){ 
    if (this.colSpan>1) { headers[i] = { sorter: false }; } 
    }); 
    $('#rowspan').tablesorter({ 
    headers: headers 
    }); 
}); 

Mise à jour:

Un "travail" exemple: http://jsbin.com/ucija3

L'exemple ressemble à ce que vous avez demandé ou je ne comprends pas votre question. Cependant, je viens de découvrir que le fait de cliquer sur les en-têtes étiquetés 3.1 - 4.2 génère des exceptions. Donc, je suppose que ma réponse finale à votre question est: La version actuelle de ce plugin ne fonctionne pas avec les lignes ou les colspans.

Mise à jour:

Un simple patch pour faire ce travail:

Dans la fonction buildHeaders (ligne 290), changer la ligne $tableHeaders = $("thead th",table); à:

$tableHeaders = $("thead th:not([colspan]),thead th[colspan=1]",table); 

Un plus complexe un correctif flexible:

Ajouter un paramètre de configuration à buildHeaders (ligne 290):

function buildHeaders(table, config) { # ... 

et un filtre à $tableHeaders (ligne 299):

$tableHeaders = $("thead th",table).filter(config.headerFilter || '*'); 

passer les config à buildHeaders quand il est appelé (ligne 504):

$headers = buildHeaders(this, config); 

Ajouter un filtre lorsque vous initialisez le tablesorter:

$(function(){ 
    $('#rowspan').tablesorter({ 
    headerFilter: function(){ return this.colSpan == 1; } 
    }); 
}); 

Here is a pre-patched version qui inclut l'option headerFilterand a demo of it in action.

+0

Cela ne fonctionne pas, car les colonnes désactivées "contrôlent" toujours les colonnes que les en-têtes internes doivent contrôler. –

1

Pour votre information, le correctif fourni par le rouge-X:

$ = $ Les titres de tableau ("thead th", table); Changez-le en

$ tableHeaders = $ ("thead th: not ([colspan])", tableau);

casse le plug-in tablesorter pour IE6 et IE7. La seule solution que j'ai trouvée (celle que j'ai trouvée ailleurs) est que vous devez avoir une ligne et une seule ligne contenant les balises TH. Vous pouvez avoir d'autres colonnes dans votre THEAD (y compris celles avec des colspans), mais elles doivent utiliser la balise TD. Ce n'est pas idéal en termes de balisage, mais au moins le plugin fonctionne sur IE6 et IE7.