Блог

Главная - Вопросы по программированию - Флажок JSF выбрать много с повторением / выравниванием граней

Флажок JSF выбрать много с повторением / выравниванием граней

#jsf

#jsf

Вопрос:

Я пытаюсь создать пользовательскую временную диаграмму, в которой действие можно включать или выключать на определенное время.

Сейчас у меня есть таблица, которая выглядит следующим образом

 names | Time1|time2|time3|time4|
______________________________
name1 | box box box box box box 
name2 | box box box box box box

я хочу, чтобы поля были правильно выровнены по соответствующему времени. Итак, мне интересно, можете ли вы разбить флажки selectManyCheckBoxes на разные столбцы?

где код 

 <table>
                        <tr>
                            <th>amp;nbsp;</th>
                            <th>
                                <table class="times">
                                    <tr>
                                        <td>12:00 AM</td>
                                        <td>01:00 AM</td>
                                        <td>02:00 AM</td>
                                        <td>03:00 AM</td>
                                        <td>04:00 AM</td>
                                        <td>05:00 AM</td>
                                        <td>06:00 AM</td>
                                        <td>07:00 AM</td>
                                        <td>08:00 AM</td>
                                        <td>09:00 AM</td>
                                        <td>10:00 AM</td>
                                        <td>11:00 AM</td>
                                        <td>12:00 PM</td>
                                        <td>01:00 PM</td>
                                        <td>02:00 PM</td>
                                        <td>03:00 PM</td>
                                        <td>04:00 PM</td>
                                        <td>05:00 PM</td>
                                        <td>06:00 PM</td>
                                        <td>07:00 PM</td>
                                        <td>08:00 PM</td>
                                        <td>09:00 PM</td>
                                        <td>10:00 PM</td>
                                        <td>11:00 PM</td>
                                    </tr>
                                </table>
                            </th>
                        </tr>
                        <a4j:repeat value="#{scheduleNames}" var="scheduleName">
                            <tr>
                                <td>
                                    <h:outputText value="#{scheduleName}" />
                                </td>
                                <td>
                                    <h:selectManyCheckbox styleClass="styledGroup" value="#{schedules[scheduleName]}">
                                        <f:selectItem itemLabel="12:00 AM" itemValue="0" />
                                        <f:selectItem itemLabel="01:00 AM" itemValue="1" />
                                        <f:selectItem itemLabel="02:00 AM" itemValue="2" />
                                        <f:selectItem itemLabel="03:00 AM" itemValue="3" />
                                        <f:selectItem itemLabel="04:00 AM" itemValue="4" />
                                        <f:selectItem itemLabel="05:00 AM" itemValue="5" />
                                        <f:selectItem itemLabel="06:00 AM" itemValue="6" />
                                        <f:selectItem itemLabel="07:00 AM" itemValue="7" />
                                        <f:selectItem itemLabel="08:00 AM" itemValue="8" />
                                        <f:selectItem itemLabel="09:00 AM" itemValue="9" />
                                        <f:selectItem itemLabel="10:00 AM" itemValue="10" />
                                        <f:selectItem itemLabel="11:00 AM" itemValue="11" />
                                        <f:selectItem itemLabel="12:00 PM" itemValue="12" />
                                        <f:selectItem itemLabel="01:00 PM" itemValue="13" />
                                        <f:selectItem itemLabel="02:00 PM" itemValue="14" />
                                        <f:selectItem itemLabel="03:00 PM" itemValue="15" />
                                        <f:selectItem itemLabel="04:00 PM" itemValue="16" />
                                        <f:selectItem itemLabel="05:00 PM" itemValue="17" />
                                        <f:selectItem itemLabel="06:00 PM" itemValue="18" />
                                        <f:selectItem itemLabel="07:00 PM" itemValue="19" />
                                        <f:selectItem itemLabel="08:00 PM" itemValue="20" />
                                        <f:selectItem itemLabel="09:00 PM" itemValue="21" />
                                        <f:selectItem itemLabel="10:00 PM" itemValue="22" />
                                        <f:selectItem itemLabel="11:00 PM" itemValue="23" />
                                    </h:selectManyCheckbox>
                                </td>
                            </tr>
                        </a4j:repeat>
                    </table>

и расписание — это Map<String, List<Integer>> .

Ответ №1:

<h:selectManyCheckbox> Рендеринг сам по себе a <table> . Таким образом, вы получаете другой <table> в одном <td> , а не все элементы в отдельных <td> s.

Используйте <h:selectBooleanCheckbox> вместо этого. Сначала измените Map<String, List<Integer>> тип свойства на Map<String, Boolean[]> (и убедитесь, что вы подготовили его с new Boolean[24] помощью!). Затем измените вид следующим образом:

 <td><label><h:selectBooleanCheckbox value="#{schedules[scheduleName][0]}" /> 12:00AM</label></td>
<td><label><h:selectBooleanCheckbox value="#{schedules[scheduleName][1]}" /> 13:00AM</label></td>
<td><label><h:selectBooleanCheckbox value="#{schedules[scheduleName][2]}" /> 14:00AM</label></td>
<td><label><h:selectBooleanCheckbox value="#{schedules[scheduleName][3]}" /> 15:00AM</label></td>
...

A List<Integer> не подходит, поскольку значение <h:selectBooleanCheckbox> должно быть a Boolean . A List<Boolean> неуклюж, потому что вам нужно заполнить его 24 Boolean.FALSE записями заранее, чтобы избежать ArrayIndexOutOfBounds проблем. Итак, a Boolean[] должен сделать.

 schedules.put(scheduleName, new Boolean[24]);
// ...

и вы можете повторно обработать его List<Integer> следующим образом:

 Boolean[] checkedHours = schedules.get(scheduleName);
List<Integer> hours = new ArrayList<Integer>();

for (int i = 0; i < checkedHours.length; i  ) {
    if (checkedHours[i]) {
        hours.add(i);
    }
}

Комментарии:

1. единственная причина, по которой я использую список <Целое число>, заключается в том, что при использовании selectManyCheckbox я могу легко его стилизовать и добавить фактическое значение в список. Быстрый вопрос, как вы его стилизуете, чтобы он не отображал флажок? У меня есть бело-синее поле, которое по щелчку меняет цвета, и я не хочу использовать флажок. Это облегчает пользователю просмотр.

2. Используйте снимок CSS / JS, который скрывает исходный флажок и позволяет новому элементу (span, div и т. Д.) делегировать ему клики. Несколько примеров можно найти в Google, используя ключевые слова «флажок стиля css».

3. хорошо, но я все равно не могу скрыть исходный флажок. Теперь у меня в основном два поля. Как мы предполагаем скрыть исходный флажок JSF?

4. Просто используйте CSS display:none . Для будущих вопросов, не связанных с этим, пожалуйста, нажмите Ask Question кнопку справа вверху. Не злоупотребляйте комментариями к другому вопросу для этого.