2016-01-01 5 views
0

Мой вопрос связан с jsf.Как выбрать только одну радиокнигу из полной строки в <h:dataTable> в 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.

Edit:

код в 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(':')) но переключатели в той же строке не имеют того же имени, что и в «Просмотр источника» браузера. Итак, как преодолеть это.

+0

Если вы попробовали это, покажите код, с которым вы работали, это поможет определить, какую ошибку вы можете совершить. – miqdadamirali

+0

@ miqdadamirali, я добавил код –

ответ

0

Название переключателей, генерируемых в HTML с помощью JSF в первом ряду являются: j_id_jsp_2000213722_8: 0: RAD1, j_id_jsp_2000213722_8: 0: рад2, j_id_jsp_2000213722_8: 0: Rad3 и j_id_jsp_2000213722_8: 0: rad4

Аналогично , название переключателей, генерируемых в HTML с помощью JSF во втором ряду являются: j_id_jsp_2000213722_8: 1: RAD1, j_id_jsp_2000213722_8: 1: рад2, j_id_jsp_2000213722_8: 1: Rad3 и j_id_jsp_2000213722_8: 1: rad4

Так мы можем увидеть строку после последнего двоеточия в имени (rad1, rad2, r ad3) означает, что столбец отличается, а целое число после первого двоеточия (0,1,2) означает, что строка отличается, но они одинаковы для каждого переключателя в той же строке.

Таким образом, моя логика будет заключаться в том, что одновременно не следует проверять два переключателя с именем i.e. 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, а в четвертой строке значение имени равно 4. Поэтому я беру ту часть имени, которая такая же для строки, т.е.часть после первого двоеточия, чтобы в соответствии с логикой он позволял проверять только одну радиокнопку с этим именем, и он отключит все другие радиокнопки с тем же именем, кроме одного, отмеченного. Так что эта логика работает для меня.