Как сгруппировать радио-кнопки в h: datatable jsf2.0 - PullRequest
2 голосов
/ 22 августа 2011

У меня есть столбец переключателей в h: datatable в JSF2, но я не могу найти способ сгруппировать их.Это означает, что все они могут быть выбраны одновременно, когда целая точка радиокнопки находится так, что только один может быть выбран в любой момент времени.Я уверен, что будет стандартный способ сделать это.

Я использую мои лица.Можно использовать richfaces, если это действительно необходимо.

Может ли кто-нибудь помочь с этим.

Ответы [ 2 ]

5 голосов
/ 22 августа 2011

При использовании стандартного компонента JSF <h:selectOneRadio> внутри <h:dataTable> вам нужно будет добавить в игру фрагмент JavaScript, который снимает отметку со всех других переключателей в том же столбце, когда отмечен один.

<h:column>
    <h:selectOneRadio onclick="uncheckOthers(this);">
</h:column>

с

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;
}
0 голосов
/ 17 сентября 2013

Во-первых, смешно, что что-то такое простое в HTML или JSP так сложно сделать в JSF.Эти добавленные слои должны облегчать жизнь, а не усложнять.Но мне кажется, они просто усложняют жизнь.Я любил их.Теперь я - Java Luddite, и теперь я выступаю за более простые подходы, которые включают в себя меньшее количество «новых круто звучащих« технологий »» и больше - «вещи, которые просто работают без необходимости трудиться всю неделю, чтобы делать»то, что раньше занимало всего 5 минут ".Так или иначе, я пытался в течение последних 3 рабочих дней заставить работать простую функциональность в JSF, которая заставляет другие переключатели отменять выбор и оставлять выбранную пользователем неизменной.Я испробовал несколько подходов, в том числе пользовательскую библиотеку тегов («overkill», определенные), а также несколько типов микширования и сопоставления, которые производили только много стековых трасс.В конце концов я вернулся к Javascript и согласился с тем, что создание надежно обобщенного решения маловероятно.Я читал подобные жалобы в другом месте.ОК, мой сеанс захвата закончен.Вот что я сделал, чтобы убить своего конкретного JSF-переключателя:

На странице .xhtml:

<ui:composition template="../template.xhtml"
   ...
   xmlns:h="http://java.sun.com/jsf/html"
   xmlns:f="http://java.sun.com/jsf/core"
   xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
   ...
>

<a4j:loadScript src="/resources/scripts/custom.js" />
...
<ui:param name="pageBean" value="#{recordsBean}" />
...

<h:dataTable id="tblMine" 
   value="#{pageBean.records}" 
   var="item" 
   border="1" celpadding="0" cellspacing="0" 
   style="font-size=10px;text-align: center;"
>

<h:column> 
<f:facet name="header">
<h:panelGroup><h:panelGrid cellspacing="0" cellpadding="0" border="0" 
     id="rowSelect" columns="1" width="100%"><h:outputText 
        value="Select" /></h:panelGrid></h:panelGroup>
</f:facet>

<h:selectOneRadio id="userselectedrecord"
       onclick="javascript:clearOtherRadioButtons(event);" >
  <f:selectItem itemValue="#{item.recordid}" 
      itemLabel="" /> <!-- I set itemLabel to "" because in my case,
                           I don't want any text next to the radio btns -->
</h:selectOneRadio>
</h:column>
...
... and the rest of the page ...

В файле custom.js у меня есть:

function clearOtherRadioButtons(evnt)
{
 // Have to try 'currentTarget', then 'srcElement'.  Issue is Firefox
 // supports 'currentTarget' but IE does not.  IE supports 'srcElement'.
 var btn = (evnt.currentTarget) ? evnt.currentTarget : evnt.srcElement;
 var matchindexlocn = btn.id.indexOf('userselectedrecord');
 var btnidstarttxt = btn.id.substring(0, 
            matchindexlocn + 18 ); // 'userselectedrecord' length = 18
 var elementid = '';
 var i = 0;
 var ele = null;
 var allElements = document.getElementsByTagName('*');

 for(i = 0; i < allElements.length; i++)
 {
     elementid = allElements[i].id;
     if ( (elementid.indexOf(btnidstarttxt) == -1) && 
          (elementid.indexOf('_') > -1) )
     {
       try
       {
        ele = document.getElementById(elementid);
        ele.checked = false;
        } catch (e) {}
     }
  }
} // function clearOtherRadioButtons(evnt)

Вот и все.В качестве объяснения, что if () в Javascript:

elementid.indexOf(btnidstarttxt) == -1

-> Это сужает элементы до тех, которые не начинаются с ID объекта, добавленного JSFтекст, связанный с группой кнопок, связанных с переданным событием.Мы не хотим отменить выбор кнопки в группе кнопок, чье событие было передано в функцию.

elementid.indexOf('_') > -1

-> Это сужает элементы дальше только до реальных кнопок, поскольку JSFдобавляет подчеркивания к идентификаторам элементов кнопки.

Причина, по которой код, который установил флажок = ложь, находится в блоке try..catch, на случай, если что-то пойдет не так с какими-либо предположениями относительно логики и обстоятельство не обрабатывается,Если вы знаете среду и можете контролировать идентификаторы элементов, у вас все будет хорошо.Однако, если существует вероятность, что что-то изменится, скажем, например, на хост-сервере приложения установлена ​​новая версия библиотеки JSF, которая переопределяет политику загрузки классов вашего приложения (в рабочей среде, как мы знаем, эти вещи могут происходить вне нашего контроля)это теперь назначает эти идентификаторы элементов по-другому, приложение не сломается с внезапной неприятной ошибкой Javascript или еще хуже, выбор переключателя просто перестает работать.Самое худшее, что я могу предположить, это то, что несколько радио-btns могут быть выбраны одновременно, и пользователь может отправить их.Я полагаю, что хорошая мера предосторожности - добавить еще один код Javascript для проверки того, что пользователь отправляет только одну опцию, или для проверки на стороне пользователя на сервере.

Видите, слишком много работы, чтобыуправлять состоянием радио кнопки.

...