Comment utiliser h:selectOneRadio h:dataTable pour sélectionner seule ligne?

J'ai la liste des pages affichées dans le tableau. Chaque page a des biens page d'accueil
et je veux dans la datatable avoir une colonne de boutons radio pour être appliqué sur cette propriété, et l'utilisateur ne peut cocher qu'une seule valeur. Comment puis-je obtenir cette valeur sur le côté serveur?

J'ai vu quelques exemples comme les suivants:
http://jforum.icesoft.org/JForum/posts/list/14157.page,
mais je voudrais savoir quelle est la meilleure pratique dans ce cas.

OriginalL'auteur Mahmoud Saleh | 2012-06-10

19

Comme par JSF éd. 329 j'ai enfin mis en œuvre pour JSF 2.3. Avec la nouvelle group attribut vous allez maintenant être en mesure de groupe de boutons radio dans un répéteur composant.
```
<h:dataTable value="#{bean.items}" var="item">
    <h:column>
        <h:selectOneRadio group="foo" value="#{bean.selectedItem}">
            <f:selectItem itemValue="#{item}" />
        </h:selectOneRadio>
    </h:column>
</h:dataTable>
```
Il sera disponible comme par Mojarra 2.3.0-m07.

Avant JSF 2.3, ce n'est pas anodin à la norme ACI <h:selectOneRadio>. Fondamentalement, le bouton radio dans chaque rangée doit être regroupés les uns avec les autres en utilisant la même entrée name de sorte que les autres boutons radio obtenir désactivée à chaque fois que vous sélectionnez. Mais ils ne sont pas regroupés, ils ont tous leur propre name, de sorte que les autres boutons radio ne serait jamais être décochée.

Bibliothèques de composants comme PrimeFaces ont résolu en mettant un attribut spécial de colonne ou de composant. Voir aussi cette vitrine exemple qui utilise un <p:column selectionMode="single"> pour générer une seule colonne de sélection. La valeur sélectionnée est référencé par selection attribut de <p:dataTable>. Si vous êtes déjà à l'aide d'une bibliothèque de composants et il a déjà un tel composant pour vous, vous devez l'utiliser.

Dans la norme ACI <h:dataTable> avec <h:selectOneRadio> vous aurez besoin de mettre dans un JavaScript solution de contournement comme suit qui permet de désactiver tous les autres boutons radio dans la même colonne:
```
<h:dataTable value="#{bean.items}" var="item">
    <h:column>
        <h:selectOneRadio valueChangeListener="#{bean.setSelectedItem}"
            onclick="dataTableSelectOneRadio(this);">
            <f:selectItem itemValue="null" />
        </h:selectOneRadio>
    </h:column>
    ...
</h:dataTable>
```
avec
```
public void setSelectedItem(ValueChangeEvent event) {
    FacesContext context = FacesContext.getCurrentInstance();
    selectedItem = context.getApplication().evaluateExpressionGet(context, "#{item}", Item.class);
}
```
et
```
function dataTableSelectOneRadio(radio) {
    var radioId = radio.name.substring(radio.name.lastIndexOf(':'));

    for (var i = 0; i < radio.form.elements.length; i++) {
        var element = radio.form.elements[i];

        if (element.name.substring(element.name.lastIndexOf(':')) == radioId) {
            element.checked = false;
        }
    }

    radio.checked = true;
}
```
lorsque j'utilise <f:ajax execute="@this" render="@form" /> à l'intérieur de la h:selectOneRadio de sorte que le valueChangeListener travail, le bouton radio est sélectionné, puis désactivée, toutes les idées ? je veux la radio choisie pour être gardé sélectionné, et l'ancien sélectionnés pour être désélectionnées
Il n'y a pas besoin de <f:ajax> ici.
le valueChangeListener n'est pas déclenché lorsque je clique sur n'importe quel bouton radio.
pouvez vous s'il vous plaît jeter un oeil à cette approche de trop stackoverflow.com/questions/10970248/...
Que ce n'est pas l'intention. Il est déclenché uniquement lorsque vous soumettez le formulaire de la manière habituelle, par un bouton de commande. Ou voulez-vous de les soumettre le formulaire immédiatement lorsqu'un bouton radio est sélectionné? Vous ne demandez pas pour qui. De cette façon, l'ensemble de JavaScript solution de contournement est pas nécessaire et que la réponse doit être changé.

OriginalL'auteur BalusC
0

j'ai trouvé une autre solution, et je veux le partager avec vous, est d'utiliser le h:selectBooleanCheckbox, avec la seule sélection JS fonction BalusC suggéré:
```
            <ace:column id="homePage" headerText="Home Page">
                <h:selectBooleanCheckbox value="#{adpage.homePage}" onclick="dataTableSelectOneRadio(this);"></h:selectBooleanCheckbox>
            </ace:column>
```
et le JS:
```
function dataTableSelectOneRadio(radio) {
var radioId = radio.name.substring(radio.name.lastIndexOf(':'));

for (var i = 0; i < radio.form.elements.length; i++) {
    var element = radio.form.elements[i];

    if (element.name.substring(element.name.lastIndexOf(':')) == radioId) {
        element.checked = false;
               }
         }

      radio.checked = true;
    }
```
cela ne cocher qu'une seule case et mettre à jour la propriété booléenne dans le cochée/décochée objet.

Les cases à cocher sont toutefois plus de confusion dans l'INTERFACE utilisateur point de vue lorsqu'il est utilisé comme seule sélection qu'elles indiquent la sélection multiple. Vous ne devriez pas utiliser ce pour une seule sélection. Si votre seul but est de préserver sélectionné/valeur cochée, il suffit d'utiliser la value attribut et une bonne <f:selectItem> valeur. Comment utiliser <h:selectBooleanCheckbox> correctement est déjà répondu ici: stackoverflow.com/questions/2524514/...

OriginalL'auteur Mahmoud Saleh

J'ai corrigé pour la sélection unique de bouton radio dans la datatable en utilisant javascript ci-dessous

function uncheckRadioButtons(radioButton) {
var selectedRadioButton;
   if (selectedRadioButton != null) {
      selectedRadioButton.checked = false;
   }

   selectedRadioButton = radioButton;
   selectedRadioButton.checked = true;
}

et en xhtml

 <h:selectOneRadio 
        onclick="uncheckRadioButtons(this);">
        <f:selectItem itemValue="null" />
    </h:selectOneRadio>

OriginalL'auteur Surya

Vous devez vous connecter pour publier un commentaire.