Discussion :

[mica8131]

Bonjour,

Je me permets de vous solliciter pour un développement qui me semble complexe au niveau d'une JQGRID.

Existant:
Nous utilisons sur une de nos applications une jqgrid comme celle-ci :
http://jsfiddle.net/3kvm24hz/385/



Actuellement il est possible de sélectionner l'ensemble des lignes, une seule ligne ou plusieurs lignes une à une.

Contexte :
Pour faire gagner du temps à nos utilisateurs, nous souhaiterions mettre en place une sélection multiple de ligne.
C'est-à-dire avoir la possibilité de cocher la ligne 10 appuyer sur CTRL cocher la ligne 15 et cela cocherais l'ensemble des lignes entre 10 et 15.
Ou comme sur Excel restez appuyer sur le bouton gauche de la souris et descendre pour cocher l'ensemble des lignes parcourues.

Auriez-vous des propositions ergonomiques sur la façon de cocher de la ligne x à la ligne y ?
Auriez-vous des pistes de développement ? Je mets à votre disposition ce lien : http://jsfiddle.net/3kvm24hz/385/ afin que vous puissiez voir plus clairement la chose.

Je vous remercie d'avance pour votre aide et reste disponible pour toute information complémentaire.

Bien cordialement,
Mica.

[Showie]

Bonjour,

Le plus simple pour moi est ta 2eme solution qui consiste à survoler.

Voici un bout de code pour l'exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
var ctrl = false;
document.onkeydown = function(e) {
  var code = e.keyCode;
  if (code == 17)	ctrl = !ctrl;
};
document.onkeyup = function(e) {
  var code = e.keyCode;
  if (code == 17)	ctrl = !ctrl;
};
 
jQuery('#grid').delegate('.cbox','hover',function(){
    if (ctrl){
    	$(this).attr('checked','checked'); // on coche seulement
      //$(this).attr("checked", !$(this).attr("checked")); / on coche et décoche, peut être prévoir un délai pour le confort
    }
  });

test dans fiddle (avec les frames, il faut cliquer dans la grid une première fois pour activer la détection des touches clavier)


Il faut enfoncer la touche CTRL pour cocher les cases.
Je t'ai aussi mis en commentaire une version qui coche et décoche mais il faudrait un petit délai pour rendre plus confortable l'option.
Tu pourrais aussi choisir de cocher avec CTRL et décocher avec ALT.

Pour info, j'ai utilisé delegate car la version de jquery du fiddle ne connait pas on mais sinon tu peux remplacer par :
jQuery('#grid').on('hover','.cbox',function()



Pour ta première solution, le soucis est le comportement à adopter dans le cas ou plusieurs checkbox sont coché au moment du CTRL+Clic c'est pour ça que je suis parti sur la deuxième solution.

[mica8131]

Bonjour Showie,

Je te remercie, c'est vraiment intéressant comme début de piste et tes suggestions me sont très utiles.
Je vais continuer d'avancer sur le sujet, je reviendrais ici pour vous faire part de la solution finale.

Je reste attentif au sujet, afin de voir si d'autres utilisateurs veulent contribuer.

Encore merci Showie

[Showie]

Re,

A la limite, pour la première solution tu log la dernière checkbox cochée.

Et au moment du CTRL + clic tu remplis tout vers la CB cochée ça peut rester simple aussi en faite.

[mica8131]

Effectivement, enfaite je pense stocker l'ensemble des id cocher, je prends le min dans une variable, le max dans une autre et je coche l'ensemble des lignes du min vers le max.

Mais je ne suis pas très doué en JavaScript, du coup j'vais voir comment je m'en sors ^^

[Showie]

je prends le min dans une variable, le max dans une autre et je coche l'ensemble des lignes du min vers le max.

Je ne suis pas sur que celà soit le plus ergonomique après à toi de composer avec ton besoin mais :

EX: tu as la liste suivante

1
2 X
3
4
5 X
6 X
7 X
8 X
9 X
10

Tu veux cocher le 2 et de 5 à 9.
Tu clique sur le 2 puis sur le 5 et CTRL+clique sur le 9 et tu te retrouve coché de 2 à 9.

En loggant le dernier clique comme point de départ
Tu clique sur le 2 (tu log 2 en point de départ), tu clique sur le 5 (tu log 5 en point de départ) tu CTRL+clique sur le 9 et tu coche tout depuis le 5 vers le 9.


Sinon n'hésite pas si tu as des questions sur le javascript.

[mica8131]

Effectivement merci pour la remarque !
Pour le moment j'ai réussi à récupérer ma variable de début et celle de fin avec le ctrl + clique.
Me reste plus que a trouver comment cocher de x à y

[Showie]

Tu pourrais être intéressé par les pseudo sélecteur:

:gt() Éléments dont l'index est supérieur à (greater than) l'index spécifié

:lt() Éléments dont l'index est inférieur à (lower than) l'index spécifié

[nicdodo]

fidleJs crée un tableau classique dans le html? Si c'est la cas je pense pouvoir te coder une solution rapide en js natif