Discussion :

[scorplayer]

Comment sélectionner une ligne d'un DataTable sans utiliser de boutons?

Plusieurs exemples sur Internet traitent de sélection avec commandButton ou commandLink. Mais comment faire sans? La récupération de l'objet n'est pas compliqué (DataModel + getRowData()), c'est plutôt l'action qui provoque cette récupération qui est difficile à trouver. Quel composant utiliser pour capter le click sur une ligne du tableau?

Pour résumé, je veux sélectionner un objet rien qu'en cliquant sur la ligne du tableau associée.

Merci d'avance

[DevServlet]

C'est très simple. Dans les attributs de ton datatable, tu rajoutes çà :

Code :

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

rowKeyVar="nom_de_ton_param_current_line"

Et dans le lien de la ligne sur laquelle tu veux cliquer, tu colles un paramètre dont la valeur sera

Code :

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

#{nom_de_ton_param_current_line}

, coté java ce paramètre sera un string contenant l'index de la ligne cliquée. (0 pour le 1er élément comme le fonctionnel d'un arrayList classique).

[Sniper37]

Comment sélectionner une ligne d'un DataTable sans utiliser de boutons?

Plusieurs exemples sur Internet traitent de sélection avec commandButton ou commandLink. Mais comment faire sans? La récupération de l'objet n'est pas compliqué (DataModel + getRowData()), c'est plutôt l'action qui provoque cette récupération qui est difficile à trouver. Quel composant utiliser pour capter le click sur une ligne du tableau?

Pour résumé, je veux sélectionner un objet rien qu'en cliquant sur la ligne du tableau associée.

Merci d'avance

peux tu préciser ton environnement et les composants utilisés..
avec Richfaces il y'a l'évènement onRowClick, et il y'a ScrollableDataTable, extendeddataTable qui implémentent nativement la possibilité de selection

[scorplayer]

Apparemment l'attribut "rowKeyVar" peut être utilisé avec un DataTable de RichFaces. Malheureusement je n'utilise pas le composant RichFaces mais le JSF.

Donc, comment faire la même chose avec un DataTable du type :

Code :

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

<h:dataTable>

Merci

[scorplayer]

Sniper37, j'utilise un dataTable JSF standard (pas de RichFaces). Peut-on sélectionner une ligne du tableau avec ce type de composant?

Merci pour ton aide

[DevServlet]

J'ai bien peur que non .

[Sniper37]

Sniper37, j'utilise un dataTable JSF standard (pas de RichFaces). Peut-on sélectionner une ligne du tableau avec ce type de composant?

Merci pour ton aide

Si c'est possible mais plus compliqué, inspire toi des méthodes pour récupérer la ligne sélectionnée de la dataTable définis dans la
Tu peux ajouter un booleanCheckBox pour chaque ligne, si tu veux le faire à la sélection il faut utiliser une fonction javascript dans l'événement onclick pour changer la couleur de la ligne sélectionnée ensuite faire un submit du formulaire à chaque fois pour envoyer les données au serveur.

[scorplayer]

Désolé Sniper37 pour cette réponse tardive.

J'avais déjà regardé la FAQ : pour cette partie ça va. Par contre, pour le onclick, pourrez-tu me donner plus de détails?
Il faut faire un submit du formulaire en passant par une fonction javascript?

Merci

[scorplayer]

J'ai trouvé

Objectif :
Sélectionner une ligne d'un DataTable JSF en cliquant sur la ligne souhaitée.

Problème :
Le composant DataTable de JSF ne gère pas la sélection des lignes en cliquant n'importe où sur la ligne. Tous les tutos sur Internet traitent du cas en passant par l'utilisation d'un commandLink (ou commandButton) à la fin de chaque ligne du table.

Solution :
Lier le DataTable comme dans la FAQ :

Code :

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

value="#{MonManagedBean.dataModel}"

Ajouter une colonne (cachée) au DataTable :

Code :

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

1
2
3
<h:column>
    <h:commandLink action="#{MonManagedBean.select}" styleClass="displayNone"/>
</h:column>

Méthode select() dans le managedBean récupère la ligne comme dans la FAQ :

Code :

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

TypeMonObjet monObjet = (TypeMonObjet ) dataModel.getRowData();

Champs caché pour conserver la ligne sélectionnée :

Code :

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

<h:inputHidden value="#{MonManagedBean.indexRow}" id="inputIndexRow"/>

Et dans le managedBean :

Code :

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

1
2
3
4
5
6
    public int getIndexRow() {
        return indexRow;
    }
public void setIndexRow(int indexRow) {
        this.indexRow = indexRow;
    }

Bout de script à ajouter après le DataTable :

Code :

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

1
2
3
<script type="text/javascript">   
    window.onload = addOnclickToDatatableRows();
</script>

En javascript, on va rajouter à chaque ligne du DataTable une fonction à l'attribut onclick (on va aussi en profiter pour mettre une couleur différente pour les lignes paires et impaires):

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
18
19
20
21
22
23
24
function addOnclickToDatatableRows() {    
 
    // Rows of the tracking table
    var trs = getElement('dataTableId')
                    .getElementsByTagName('tbody')[0].getElementsByTagName('tr');
 
    for (var i = 0; i < trs.length; i++) {
 
        // Add a fonction for each line into the onclick attribute
        trs[i].onclick = new Function("highlightAndSelectRow(this)");
 
        // Different style class for even and odd lines
        if(i%2==1) {
            trs[i].className = 'even';
        } else {
            trs[i].className = 'odd';
        }
 
        // Style class for selected line
        if(i == getElement('inputIndexRow').value) {
            trs[i].className = 'selected';
        }
    }
}

Pour finir, la méthode qui va forcer le click sur le commandLink que nous avons caché et colorer la ligne sélectionnée :

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
18
function highlightAndSelectRow(tr) {
 
    // Rows of the tracking table
    var trs = getElement('dataTableId')
                    .getElementsByTagName('tbody')[0].getElementsByTagName('tr');
 
    for (var i = 0; i < trs.length; i++) {
 
        if (trs[i] == tr) {
 
            // Record the selected index into a hidden input component
            getElement('inputIndexRow').value = i;
 
            // Click on hidden button to submit form
            trs[i].getElementsByTagName("td")[6].getElementsByTagName("a")[0].onclick();            
        }
    }
}

Attention pour les Id en JSF, il les redéfinit pour avoir un truc du genre : myview:myForm:dataTableId

CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.dataTableClass tr.odd td {
    background-color: white;
    cursor: pointer;
}
 
.dataTableClass tr.even td {
    background-color: #E5E9ED;
    cursor: pointer;
}
 
.dataTableClass tr.selected td {
    background-color: #C3D8FA;
    cursor: pointer;
}

Voila

Bon courage

[scorplayer]

source de la solution