PrimeFaces DataTable - необходимо включить / отключить компоненты на основе выбора строки - PullRequest
Новая
       2

PrimeFaces DataTable - необходимо включить / отключить компоненты на основе выбора строки

5 голосов
/ 29 декабря 2010

Я использую таблицу данных PrimeFaces для отображения записей (случайным образом генерируемых в приложении-песочнице).Я использую флажок выбора версии.Базовая DataTable отлично работает, включая кнопки «Удалить» и «Отмена» (функциональность которых доступна только в диалоговом окне подтверждения).Я пытаюсь добавить функциональность в таблицу данных, чтобы при установке флажка другие элементы управления на странице включались или отключались в зависимости от выбора.

Другими словами, если строки не выбраны (флажки не установлены), определенные кнопки и / или элементы меню отключены или не отображаются.Выбор одной или нескольких строк с помощью флажка должен включить или отобразить элементы управления.Я пытался использовать встроенные обработчики событий JavaScript, но я не могу сделать эту работу.

Сейчас на моей странице отображаются столбцы DataTable 5: столбец выбора флажка, Имя, Фамилия, Возраст.Я сделал что-то подобное в другой моей песочнице, используя простые логические флажки и обновив логическое значение с помощью события onclick.К сожалению, в этом DataTable нет ничего похожего - или, если есть, я не знаю, как его реализовать.

Моя индексная страница: 

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <body>

        <ui:composition template="./newTemplate.xhtml">


            <ui:define name="content">
            <h:form>

                <p:dataTable rowSelectListener="#{tableBean.onRowSelect}" var="data" value="#{tableBean.data}" paginator="true" rows="10"
                     selection="#{tableBean.selectedNames}">

                <f:facet name="header">
                    Customer List
                </f:facet>


                <p:column selectionMode="multiple" />

                <p:column headerText="Cust ID">
                    <h:outputText value="#{data.id}" />
                </p:column>

                <p:column headerText="First Name">
                    <h:outputText value="#{data.firstName}" />
                </p:column>

                <p:column headerText="Last Name">
                    <h:outputText value="#{data.lastName}" />
                </p:column>

                <p:column headerText="Age">
                    <h:outputText value="#{data.age}" />
                </p:column>

                <f:facet name="footer">                        
                    <p:commandButton update="deleteList" value="Delete" oncomplete="deleteDlg.show()" />
                </f:facet>

            </p:dataTable>

            <p:dialog header="Delete Selected Records" modal="true" widgetVar="deleteDlg"
                      >

                <h:outputText value="You are about to permanently delete records." /><br /><br />
                <h:outputText value="Are you sure you want to continue?" /><br /><br/>

                <h:commandButton value="CANCEL" action="#{tableBean.cancelDelete()}" /> <h:commandButton value="Delete" action="#{tableBean.deleteNames()}" />
            </p:dialog>

        </h:form>
            </ui:define>

        </ui:composition>

    </body>
</html>

Код отмой боб, который может иметь отношение: 

    public void deleteNames()
    {
        for(Data person : selectedNames)
        {
            data.remove(person);
        }   
    }

    public void cancelDelete()
    {
        for(Data name : selectedNames)
            selectedNames = null;
    }

    public void onRowSelect(SelectEvent event)
    {
        if(selectedNames == null || selectedNames.length < 1)
            setDisable(true);
        else
            setDisable(false);
    }

public boolean isDisable() {
        if(selectedNames == null || selectedNames.length < 1)
            disable = true;
        else
            disable = false;
        return disable;
    }

    public void setDisable(boolean disable) {
        this.disable = disable;
    }

Ответы [ 3 ]

1 голос
/ 12 марта 2013

просто искал решение той же проблемы, и поскольку JSF 2 / Primefaces в наши дни развиваются довольно быстро, мы нашли более современное решение для Primefaces версии 3.0 или выше.

Согласно следующему ответу в ветке форума PrimeFaces: http://forum.primefaces.org/viewtopic.php?f=3&t=1373&sid=bbfcd6a343edf586f927cd7ecd7d01b9&start=10#p48388

можно добавить обработчик JavaScript на стороне клиента к компоненту <p:datatable>, выполнив следующие шаги:

1.Добавьте primefaces-extension JAR в путь к классу вашего веб-приложения (эта библиотека также доступна в центральном репозитории Maven под тем же именем).Я попробовал версию 0.6.3, которая была последней на момент написания, и она работала для меня

2.Добавить pe пространство имен к соответствующему xhtml файлу: 

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:pe="http://primefaces.org/ui/extensions">

      ...

</html>

3. Добавьте <pe:javascript> в качестве дочернего элемента к вашему <p:datatable> компоненту (может быть фактически добавлен к любому компоненту, который реализует интерфейс ClientBehaviorHolder ), как показано ниже: 

<html>
    ...
    <p:dataTable rowSelectListener="#{tableBean.onRowSelect}" var="data" value="#{tableBean.data}" paginator="true" rows="10" selection="#{tableBean.selectedNames}">
        <pe:javascript event="rowSelect" execute="onRowSelectedHandler();"/>
        ...
    </p:dataTable>
    ...
</html>

И этодолжно быть, надеюсь, это поможет ...

1 голос
/ 16 января 2011

Есть обходной путь, по крайней мере, работа для меня.

  • извлеките datatable.js из primefacess
  • изменить datatable.js. SelectRowWithRadio, selectRowWithRadio функционируют, как показано ниже 
        PrimeFaces.widget.DataTable.prototype.selectRowWithCheckbox = function(element) {
        ...
        ...
        //save state
        this.writeSelections();

        // added to add instant row selection 
        this.fireRowSelectEvent(rowId);
        // end
    }
  • Добавьте нижеприведенный JavaScript к концу вашего компонента данных 
    <p:datatable widgetVar="wv1" id='mydatatable' ....>
...
<p:datatable/>
<script type="text/javascript">
    if(!wv1_main.cfg.onRowSelectUpdate){
        wv1.cfg.onRowSelectUpdate="";
    }else{
        wv1.cfg.onRowSelectUpdate+=" ";
    }
    wv1.cfg.onRowSelectUpdate+="UPDATE_IDS";
</script>
    Замените «UPDATE_IDS» вашими идентификаторами панелей, разделенными пробелом, такими как «panel1 panel2»;
    Замените 'wv1' значением свойства widgetVar таблицы данных
  • импортировать измененные js на страницу jsf, где вы хотите использовать мгновенный выбор ajax / выбор радиации. 
    <h:header/>
...
<script type="text/javascript" src="#{CONTEXT_PATH}/resources/js/datatable.js"/>
<h:header/>

Вы можете выделить выделенные строки еще с некоторыми изменениями

0 голосов
/ 19 июля 2014

Вы можете перехватить ajax событий, которые срабатывают, когда выбрана строка.

В вашем случае 

<p:dataTable rowSelectListener="#{tableBean.onRowSelect}" 
    var="data" value="#{tableBean.data}" paginator="true" rows="10"
    selection="#{tableBean.selectedNames}">

    <p:ajax event="rowSelectCheckbox" listener="#{tableBean.handleEvent}" 
        update="buttonThatNeedsToBeRendered"/>

    <p:column selectionMode="multiple" />

    ...

</p:dataTable>

Другие полезные события, которые запускаются в зависимости от режима выбораdataTable:

  1. rowSelect и rowUnselect
  2. rowSelectCheckbox и rowUnselectCheckbox
  3. rowSelectRadio
  4. toggleSelect
...