Sélection d'une ligne d'un dataTable

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

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

Code:

---

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:

---

#{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).

Citation:

---

Envoyé par 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

---

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

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:

---

<h:dataTable>

---

Merci

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

J'ai bien peur que non :cry:.

Citation:

---

Envoyé par 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

---

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 :faq:
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.

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

J'ai trouvé :ccool:

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:

---

value="#{MonManagedBean.dataModel}"

---

Ajouter une colonne (cachée) au DataTable :

Code:

---

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:

---

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

---

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

Code:

---

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

---

Et dans le managedBean :

Code:

---

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:

---

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:

---

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:

---

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:

---

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

source de la solution