Могу ли я иметь как выбор радио, так и выбор строки в ap: dataTable - PullRequest
Новая
       33

Могу ли я иметь как выбор радио, так и выбор строки в ap: dataTable

0 голосов
/ 09 марта 2020

У меня есть p:dataTable, который должен иметь выбор radio и row selection. В primefaces.org/showcase у нас есть флажок и выбор строки, но с множественным выбором и только выбором строки и только выбором радиопереключателя.

Ниже мой код 

<p:dataTable value="#{streetListBean.streetList}" var="street"
             selection="#{streetListBean.selectedStreet}"
             rowKey="#{street.streetId}">
  <p:column selectionMode="single" style="text-align:center" width="5%"/>
  <p:column headerText="#{msgs['label.streetName']}">
    <p:outputLabel value="#{street.streetName}"/>
  </p:column>
  <p:column headerText="#{msgs['label.postalCode']}">
    <p:outputLabel value="#{street.postalCode}"/>
  </p:column>
  <p:column headerText="#{msgs['label.location']}">
    <p:outputLabel value="#{street.locName}"/>
  </p:column>
</p:dataTable>

в приведенных выше данных у нас есть только выбор радио, мне нужен выбор строки тоже. пожалуйста помогите

1 Ответ

0 голосов
/ 10 марта 2020

Одна вещь, которую ВСЕГДА следует помнить, это то, что на стороне клиента все html / javascript / css (с помощью jQuery в данном случае).

PrimeFaces 7.0 (и выше) имеет атрибут onRowClick, но я не уверен, подходит ли это для этого случая. Решение, которое всегда работает (старые и новые версии), состоит из нескольких действительно простых шагов (просто запомните первое утверждение в этом ответе)

Начните с jQuery для получения события Click в строке таблицы . Для этого нам нужно проверить, где должны быть реальные клики. Использование идентификатора таблицы данных для первой части - неплохой выбор. Но что это за идентификатор? Ну, для этого также есть Q / A в Stackoverflow. Как узнать идентификатор компонента JSF, чтобы я мог использовать его в Javascript Для демонстрации PrimeFaces это на самом деле #form\\:radioDT" Но в рамках всей этой структуры html нам нужно только нажать на определенную строки (например, не в заголовках или лайках). Таким образом, это выглядит примерно так: 

$("#form\\:radioDT").on("click", "tbody.ui-datatable-data tr", function() {
    console.log(this);
});

Если вы попробуете это в витрине PrimeFaces, вы увидите клики в записываемой строке (в том числе щелчки, возникающие на радио-кнопке)

Следующее шаг будет в Имитировать щелчок на элементе 'a, используя javascript / jquery

Но где щелкнуть? Ну, это можно легко найти с помощью инструментов разработчика браузера. Относительно tr, по которому щелкнули (this), это: 

$(this).find(".ui-selection-column .ui-radiobutton-icon").click(); //javascript version (selectors can be different, many work). Alternative is using jquery .trigger('click')

Объединение этого приводит к 

$("#form\\:radioDT").on("click", "tbody.ui-datatable-data tr", function() {
    console.log(this);
    $(this).find(".ui-selection-column .ui-radiobutton-icon").click();
});

, что, к сожалению, приводит к ошибке "слишком много рекурсии" , Это вызвано тем фактом, что щелчок на переключателе всплывает до строки, которая вызывает щелчок на переключателе, который ... вы получаете точку.

Итак, первая мысль состоит в том, чтобы предотвратить образование пузырьков кликов. К сожалению, это связано не с нашей функцией, а с щелчком по радиобуту, поэтому нам нужно адаптировать наш источник. Снова существующая Q / A в справке stackoverflow: jQuery триггерный клик дает "слишком много рекурсии"

Что вы делаете, это проверяете, был ли щелчок по строке возник как щелчок по чему-либо, кроме радиопереключатель Только тогда симулируйте щелчок. Для этого нам нужно событие и из события цель и с тем же селектором, что и для клика, мы делаем проверку: 

$("#form\\:radioDT").on("click", "tbody.ui-datatable-data tr", function(event) {
        if ( !$(event.target).is('.ui-selection-column .ui-radiobutton-icon')) {
            console.log("Simulate click on radiobutton: ", event.target);
            $(this).find(".ui-selection-column .ui-radiobutton-icon").click();
        } else {
            console.log("Skip: ", event.target);
        }
    }
);

Имейте в виду, что $("#form\\:radioDT") основан на полном идентификаторе клиента компонент данных в витрине PrimeFaces. Замени его своим.

Как и где добавить это на свою страницу и как повторно добавить его в случае ajax обновлений также описано в Q / A в Stackoverflow.

...