sélection de plusieurs cellules dans une table

Version imprimable

23/08/2010, 14h33
cyrano_de_bergerac

sélection de plusieurs cellules dans une table

Bonjour, :D

Je dispose d'une table de 7 colonnes et autant de lignes que je voudrais.
Les 7 colonnes représentent chaque jour de la semaine.

Je veux pouvoir cliquer sur une cellule et glisser ma souris avec le bouton gauche toujours enfoncé sur les autres cellules dans la même colonne.
Les cellules se coloreraient au fur et à mesure de la sélection.

Comment faire? J'ai fait pas mal de recherches mais rien ne m'aide...

Merci à ceux qui maideront! :D
24/08/2010, 00h29
Graffito
Citation:

Je dispose d'une table de 7 colonnes et autant de lignes que je voudrais.

Dans quel type de Control (ListView, DatagridView, TableLayoutPanel, ...) ?

La solution de base consiste à :
- sur l'event MouseDown, initaliser un état SelectionActive=true sur une cellule,
- sur l'event MouseMove et si SelectionActive==true, "selectionner" la cellule,
- sur l'event MouseUp, réinitaliser un état SelectionActive=false
Le code correspondant à l'opération "sélectionner" et la gestion des couleurs dépendra du type de Control.

Déjà un grand merci pour votre aide! :D

Citation:

Dans quel type de Control (ListView, DatagridView, TableLayoutPanel, ...) ?

Je ne vois pas trop ce que je peux répondre.
Le mieux est que je vous montre ce que j'ai fait.

Dans un ascx:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Day.ascx.cs" Inherits="WebApplication1.Day" %>
 
<script type="text/javascript">
 
    function onMouseDownCasefunction() {
        document.getElementById('<%=isClickInCaseTextBox.ClientID%>').value = "true";
    }
 
    function onMouseOverCasefunction(obj) {
        if (document.getElementById('<%=isClickInCaseTextBox.ClientID%>').value == 'true') {
 
            obj.style.backgroundColor = '#FF8000';
 
            var i = parseInt(document.getElementById('<%=nbSelectCasesTextBox.ClientID%>').value);
            i = i + 1;
            document.getElementById('<%=nbSelectCasesTextBox.ClientID%>').value = i;
        }
    }
 
</script>
 
<table id='table1' border="2">
    <tr style="height: 30px;">
        <td style="width: 30px;" id="case1" onmousedown="onMouseDownCasefunction();onMouseOverCasefunction(this);"
            onmouseover="onMouseOverCasefunction(this);">
        </td>
    </tr>
    <tr style="height: 30px;">
        <td id="case2" onmousedown="onMouseDownCasefunction();onMouseOverCasefunction(this);"
            onmouseover="onMouseOverCasefunction(this);">
        </td>
    </tr>
    <tr style="height: 30px;">
        <td id="case3" onmousedown="onMouseDownCasefunction();onMouseOverCasefunction(this);"
            onmouseover="onMouseOverCasefunction(this);">
        </td>
    </tr>
</table>
<asp:TextBox ID="isClickInCaseTextBox" runat="server" Width="35px" Text='false'></asp:TextBox><br />
<asp:TextBox ID="nbSelectCasesTextBox" runat="server" Width="35px" Text="0"></asp:TextBox>

Et dans mon aspx:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<body onmouseup="onMouseUpCasefunction();">
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <td>
                    <uc1:Day ID="Day1" runat="server"></uc1:Day>
                </td>
                <td>
                    <uc1:Day ID="Day2" runat="server"></uc1:Day>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Votre solution m'aide.
Pour le up, je vais voir ça.
J'ai un nouveau souci: comment faire en sorte que la colonne voisine ne se colore pas, même quand je sors de ma colonne à colorer?

Un grand merci encore! :)

24/08/2010, 19h35
Graffito

Pour le type de contôle, il fallait préciser l'environnement: (WinForms, WPF, HTML/Javascript, ...)

Citation:

Pour le up, je vais voir ça.
J'ai un nouveau souci: comment faire en sorte que la colonne voisine ne se colore pas, même quand je sors de ma colonne à colorer?

Justement, via le up qui "désactive" les actions de l'event MouseMove.
25/08/2010, 10h28
cyrano_de_bergerac

Citation:

Envoyé par Graffito

Pour le type de contôle, il fallait préciser l'environnement: (WinForms, WPF, HTML/Javascript, ...).

Je suis tenté de dire HTML/Javascript.

Citation:

Envoyé par Graffito

Justement, via le up qui "désactive" les actions de l'event MouseMove.

Oui, mais si je sors un peu de ma colonne sans avoir relaché le bouton, les cases de ma colonne voisine se colorent...
Là est le problème...

Sinon, pour le up en lui même, c'est ok, il fonctionne.
25/08/2010, 12h11
Graffito

Il suffit de rajouter dans le MouseMove un test pour vérifier si la cellule est dans la même colonne que la première cellule selectionnée et, si ce n'est pas le cas, désactiver la sélection comme dans le MouseUp.
25/08/2010, 12h14
cyrano_de_bergerac

Citation:

Envoyé par Graffito

Il suffit de rajouter dans le MouseMove un test pour vérifier si la cellule est dans la même colonne que la première cellule selectionnée et, si ce n'est pas le cas, désactiver la sélection comme dans le MouseUp.

A condition que le MouseMove soit détecté avant le MouseHover dans la nouvelle cellule...
Je testerai quand j'aurai un peu de temps, là je bloque sur les id.
26/08/2010, 14h06
cyrano_de_bergerac

Bon finallement, ce que j'ai fait, c'est que j'ai rajouté des colonnes bidons entre mes colonnes utilisées.

J'ai mis un onmouseover sur les colonnnes bidons, qui met à false mon élément SelectionActive.
C'est pas génial car si la souris passe vite par dessus ces colonnes, mon élément SelectionActive reste à true.
Mais c'est mieux que rien en attendant...