11549 sujets
J'ai avancé quelque peu :
En gros toutes les lignes de mon tableau ont une class .agenda_ligne et le selectable est possible sur toutes les td qui sont dans une ligne ayant cette class et n'ayant pas elle meme la class .unselect. Donc par défaut toutes mes cases sont sélectionnables.
Ce que je cherche à faire maintenant, c'est de supprimer toutes les class .agenda_ligne sauf celles de la ligne sur laquelle se trouve le td sur lequel j'ai cliqué, et ce sur un évènement .click.
L'évènement suivant sera de réactiver la class qd on relache le click. Normalement, ça va me rendre toutes les lignes non sélectionnables sauf celle sur laquelle j'ai commencé ma sélection.
Si vous avez une idée de comment faire ça !!
EDIT : Apriori il existe 2 callback sur selectable qui sont start et stop et qui vont me permettre de lancer mon action au début de ma sélection et d'en lancer une autre à la fin. Je pense que je vais lui dire de me virer la class avec removeClass sur tous les tr qui sont différent du tr sur lequel se trouve mon élément this.
Modifié par Klesk (16 Sep 2012 - 20:08)
$( "#agenda" ).selectable({
filter: "tr.agenda_ligne > td:not(.unselect)",
distance: 1
});
En gros toutes les lignes de mon tableau ont une class .agenda_ligne et le selectable est possible sur toutes les td qui sont dans une ligne ayant cette class et n'ayant pas elle meme la class .unselect. Donc par défaut toutes mes cases sont sélectionnables.
Ce que je cherche à faire maintenant, c'est de supprimer toutes les class .agenda_ligne sauf celles de la ligne sur laquelle se trouve le td sur lequel j'ai cliqué, et ce sur un évènement .click.
L'évènement suivant sera de réactiver la class qd on relache le click. Normalement, ça va me rendre toutes les lignes non sélectionnables sauf celle sur laquelle j'ai commencé ma sélection.
Si vous avez une idée de comment faire ça !!
EDIT : Apriori il existe 2 callback sur selectable qui sont start et stop et qui vont me permettre de lancer mon action au début de ma sélection et d'en lancer une autre à la fin. Je pense que je vais lui dire de me virer la class avec removeClass sur tous les tr qui sont différent du tr sur lequel se trouve mon élément this.
Modifié par Klesk (16 Sep 2012 - 20:08)
$( "#agenda" ).selectable({
filter: "tr.agenda_ligne > td:not(.unselect)",
distance: 0,
start:function(){
$('tr').removeClass('agenda_ligne')
},
stop:function(){
$('tr').addClass('agenda_ligne')
}
});
Il ne me reste plus qu'à lui dire de ne faire ces actions que sur les tr différent de celui sur lequel je suis. Je n'ai pas encore trouvé la syntaxe
. Modifié par Klesk (16 Sep 2012 - 20:43)
J'en suis là, toujours pas de fonctionnement :
Avec ça il me supprime toujours la class de tous mes tr et non de tous sauf celui du td cliqué.
$( "#agenda" ).selectable({
filter: "tr.agenda_ligne > td:not(.unselect)",
distance: 0,
start:function(){
if (('tr.agenda_ligne') != $(this).parents('tr')){
$('tr').removeClass('agenda_ligne')
};
},
stop:function(){
if (('tr.agenda_ligne') != $(this).parents('tr')){
$('tr').addClass('agenda_ligne')
};
}
});
Avec ça il me supprime toujours la class de tous mes tr et non de tous sauf celui du td cliqué.
Testé comme ça :
Ca ne marche toujours pas. Ma condition n'est pas reconnue. HELP !!
$( "#agenda" ).selectable({
filter: "tr.agenda_ligne > td:not(.unselect)",
distance: 0,
start:function(){
$('tr').removeClass('agenda_ligne');
if ('tr.agenda_ligne' == $(this).parents('tr')){
$('tr').addClass('agenda_ligne');
}
},
stop:function(){
$('tr').addClass('agenda_ligne');
}
});
Ca ne marche toujours pas. Ma condition n'est pas reconnue.
HELP !!J'en suis rendu à ça :
Normalement le .not devrait permettre de dire qu'on applique le remove/addClass sur tous les tr qui ne sont pas le parent de l'objet cliqué. Mais hélas ça ne fonctionne pas en l'état.
$( "#agenda" ).selectable({
filter: "tr.agenda_ligne > td:not(.unselect)",
distance: 0,
start:function(){
$("tr").not($(this).parent()).removeClass('agenda_ligne');
},
stop:function(){
$("tr").not($(this).parent()).addClass('agenda_ligne');
}
});
Normalement le .not devrait permettre de dire qu'on applique le remove/addClass sur tous les tr qui ne sont pas le parent de l'objet cliqué. Mais hélas ça ne fonctionne pas en l'état.
Pour récupéré les tr je pense qu'il vaut mieux passer par siblings().
Le problème est que le this fait référence à #agenda. Pour connaître le td cliquer il faut peut-être regarder dans le event passer en paramètre aux méthodes.
Mais pourquoi ne pas mettre le selectable sur les tr ?
Le problème est que le this fait référence à #agenda. Pour connaître le td cliquer il faut peut-être regarder dans le event passer en paramètre aux méthodes.
Mais pourquoi ne pas mettre le selectable sur les tr ?
$("#agenda tr" ).selectable({
filter: "td:not(.unselect)",
});Je viens de tester et ça ne fonctionne plus du tout avec #agenda tr.
Le .agenda_ligne est important dans le filter car en fait le fait de l'enlever ensuite devrait permettre de faire en sorte que des td ne respectent plus la condition et qu'ils ne soient plus sélectionnable du même coup.
L'autre solution serait d'arriver à mettre la class unselect sur tous les td situés sur d'autres lignes que celle sur laquelle se trouve le td cliqué. Auquel cas je n'aurai peut etre plus besoin de class sur les tr. Je ne sais pas ce qui est possible ou non, je découvre js.
L'idée de tout ça étant de rendre les cases sélectionnables uniquement horizontalement.
Modifié par Klesk (17 Sep 2012 - 12:55)
/* J'applique mon selectable sur le tableau avec l'id agenda */
$( "#agenda" ).selectable({
/* Je filtre en disant à la fonction de rendre sélectionable uniquement les td n'ayant pas la class unselect et situées dans un tr ayant la class agenda_ligne et */
filter: "tr.agenda_ligne > td:not(.unselect)",
distance: 0,
start:function(){
$('tr').removeClass('agenda_ligne')
},
stop:function(){
$('tr').addClass('agenda_ligne')
}
});
Le .agenda_ligne est important dans le filter car en fait le fait de l'enlever ensuite devrait permettre de faire en sorte que des td ne respectent plus la condition et qu'ils ne soient plus sélectionnable du même coup.
L'autre solution serait d'arriver à mettre la class unselect sur tous les td situés sur d'autres lignes que celle sur laquelle se trouve le td cliqué. Auquel cas je n'aurai peut etre plus besoin de class sur les tr. Je ne sais pas ce qui est possible ou non, je découvre js.
L'idée de tout ça étant de rendre les cases sélectionnables uniquement horizontalement.
Modifié par Klesk (17 Sep 2012 - 12:55)
Problème résolu. je met la solution si ça intéresse. Donc la fonction suivante permet dans un tableau ayant l'id #agenda de rendre sélectionnable toutes les cases sauf celles ayant la class unselect. La sélection se faisant uniquement horizontalement (c'est ça que je cherchait à faire en fait).
Donc dans un tableau à double entrée par exemple avec a gauche verticalement des item et en haut des colonnes en th avec des dates, ça permet de réserver l'item sur une période par exemple en la sélectionnant et lancer ensuite un évènement avec le callback.
Dans mon cas je réserve un téléphone pour une période et lorsque je lâche le clic ça m'ouvre un formulaire de réservation avec les dates de début et date de fin déjà renseignées ainsi que le téléphone correspondant à la ligne sélectionnée.
Modifié par Klesk (18 Sep 2012 - 11:06)
Donc dans un tableau à double entrée par exemple avec a gauche verticalement des item et en haut des colonnes en th avec des dates, ça permet de réserver l'item sur une période par exemple en la sélectionnant et lancer ensuite un évènement avec le callback.
Dans mon cas je réserve un téléphone pour une période et lorsque je lâche le clic ça m'ouvre un formulaire de réservation avec les dates de début et date de fin déjà renseignées ainsi que le téléphone correspondant à la ligne sélectionnée.
$( "#agenda > > *" ).selectable({
filter: "tr.agenda_ligne td:not(.unselect)",
filter: "td:not(.unselect)",
distance: 0,
start:function(){
$( "td" ).removeClass('ui-selected');
var id = '#'+this.id;
$('tr:not("'+id+'")').removeClass('agenda_ligne');
},
stop:function(){
$("tr").addClass('agenda_ligne');
}
});
Modifié par Klesk (18 Sep 2012 - 11:06)