Question

我的问题与jsf有关。

我正在尝试用单选按钮创建一个jsf dataTable。

例如在第一行中，有5列：第一列有一个问题，其余4是单选按钮。我希望用户在一行中只从一个4中选择一个单选按钮，并为所有的重复相同的过程行。

我已阅读以下链接，其中给出了使用单选按钮选择一行的javascript代码： How to group Radio Buttons in h:datatable jsf2.0 和 http://www.javabeat.net/how-to-use-hselectoneradio-inside-hdatatable-in-jsf/

但我的要求是连续选择一个单选按钮

我在这里得到了一些线索：http://www.javaworld.com/article/2077687/enterprise-java/group-radio-buttons-inside-a-jsf-datatable-component.html但我宁愿选择javascript代码来执行此活动，而不是去寻找自定义标记，如果可能的话。或者如果在纯jsf中有另一种方法可以做同样的事情

修改

jsp中的代码：

<h:dataTable var="row" value="#{rateYourBillerBean.questionsList}">
   <h:column>
      <f:facet name="header">
         <h:outputText value="Question" />
      </f:facet>
      <h:outputText value="#{row.question}" />
   </h:column>
   <h:column>
      <f:facet name="header">
         <h:outputText value="Poor" />
      </f:facet>
      <h:selectOneRadio styleClass="rad" onclick="uncheckOthers(this)" value="#{row.poor}">
         <f:selectItem itemValue="1" />
      </h:selectOneRadio>
   </h:column>
   <h:column>
      <f:facet name="header">
         <h:outputText value="Average" />
      </f:facet>
      <h:selectOneRadio styleClass="rad" onclick="uncheckOthers(this)" value="#{row.average}">
         <f:selectItem itemValue="2" />
      </h:selectOneRadio>
   </h:column>
   <h:column>
      <f:facet name="header">
         <h:outputText value="Good" />
      </f:facet>
      <h:selectOneRadio styleClass="rad" onclick="uncheckOthers(this)" value="#{row.good}">
         <f:selectItem itemValue="3" />
      </h:selectOneRadio>
   </h:column>
   <h:column>
      <f:facet name="header">
         <h:outputText value="Excellent" />
      </f:facet>
      <h:selectOneRadio styleClass="rad" onclick="uncheckOthers(this)" value="#{row.excellent}">
         <f:selectItem itemValue="4" />
      </h:selectOneRadio>
   </h:column>
</h:dataTable>

JS：

<script>
    function uncheckOthers(radio) {
        var name = radio.name.substring(radio.name.lastIndexOf(':'));
        var elements = radio.form.elements;
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].name.substring(elements[i].name.lastIndexOf(':')) == name) {
                elements[i].checked = false;
            }
        }
        radio.checked = true;
    }
</script>

问题是连续行中的每个单选按钮对radio.name.substring(radio.name.lastIndexOf(':'))具有相同的值，但同一行中的单选按钮与我在其中检查的名称相同＆＃34;查看源＆＃34;浏览器。那么如何克服这一点。

Answer 1

第一行中jsf在html中生成的单选按钮的名称为：j_id_jsp_2000213722_8：0：rad1，j_id_jsp_2000213722_8：0：rad2，j_id_jsp_2000213722_8：0：rad3和 j_id_jsp_2000213722_8：0：RAD4

类似地，第二行中jsf在html中生成的单选按钮的名称是： j_id_jsp_2000213722_8：1：RAD1， j_id_jsp_2000213722_8：1：RAD2， j_id_jsp_2000213722_8：1：rad3和 j_id_jsp_2000213722_8：1：RAD4

所以我们可以看到名称中最后一个冒号后面的字符串（rad1，rad2，rad3）表示该列不同，第一个冒号后面的整数（0,1,2）表示该行不同但是它们不同对于同一行中的每个单选按钮都是相同的。

所以我的逻辑是，不应该同时检查两个名称为0或1或2的单选按钮。

所以我按如下方式更改了我的脚本代码，为每行提取0或1或2：

<script>
        function uncheckOthers(radio) {
            var name = radio.name.substring(radio.name.indexOf(':') + 1,
                    radio.name.indexOf(':') + 2);
            console.log("name=" + name)
            var elements = radio.form.elements;
            for (var i = 0; i < elements.length; i++) {
                if (elements[i].name.substring(
                        elements[i].name.indexOf(':') + 1, radio.name
                                .indexOf(':') + 2) == name)
                    elements[i].checked = false;
            }
            radio.checked = true;
        }
    </script>

我的要求是它应该允许我在不同行中同时选择单选按钮但不在同一行中，在第一行中所有单选按钮的名称为0，第二行为1，第三行为2，第四行为name的值是4.所以我把名称的那一部分用于一行，即第一个冒号之后的部分，以便根据逻辑，它将只允许使用该名称检查一个单选按钮，并且将取消选中除了选中的一个之外具有相同名称的所有其他单选按钮。所以这个逻辑对我有用。

如何在jsf中的<h：datatable>中只选择一行中的一个单选按钮？

1 个答案: