PrimeFaces DataTable - 需要根据行选择启用/禁用组件

发布于 2024-10-09 23:45:55 字数 3771 浏览 0 评论 0原文

我正在使用 PrimeFaces DataTable 来显示记录（在沙箱应用程序中随机生成）。我正在使用复选框选择版本。基本的数据表运行良好，包括“删除”和“取消”按钮（该功能仅在确认对话框中才可用）。我正在尝试向数据表添加功能，以便在选择复选框时，根据选择启用或禁用页面上的其他控件。

换句话说，如果没有选择任何行（没有选中复选框），则某些按钮和/或菜单项将被禁用或不呈现。通过单击复选框选择一行或多行应启用或呈现控件。我尝试过使用内置的 JavaScript 事件处理程序，但无法完成此操作。

现在我的页面显示一个 DataTable 5 列：复选框选择列、名字、姓氏、年龄。我在我的另一个沙箱中使用简单的布尔复选框并使用 onclick 事件更新布尔值，做了类似的工作。不幸的是，这个数据表中似乎没有任何类似的东西 - 或者如果有的话我不知道如何实现它。

我的索引页：

<?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>

来自我的支持 bean 的代码，可能相关：

    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;
    }

原文

I'm using a PrimeFaces DataTable to display records (randomly generated in a sandbox application). I am using the check box selection version. The basic DataTable works perfectly, including the Delete and Cancel buttons (which functionality only really is available from the confirmation dialog). I am trying to add functionality to the DataTable so that when a check box is selected, other controls on the page are enabled or disabled based on the selection.

In other words, if no rows are selected (no check boxes are checked) certain buttons and/or menu items are disabled or not rendered. Selecting one or more rows by clicking the check box should enable or render the controls. I have tried using the built in JavaScript event handlers, but I cannot make this work.

Right now my page displays a DataTable 5 columns: a check box selection column, First Name, Last Name, Age. I made something like this work in another sandbox of mine using simple boolean check boxes and updating a boolean with the onclick event. Unfortunately, there doesn't seem to be anything similar in this DataTable - or if there is I don't know how to implement it.

My index page:

<?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>

Code from my backing bean which may be relevant:

    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;
    }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帝王念 2024-10-16 23:45:55

确实有一个解决方法，至少对我有用。

从 primefacess 中提取 datatable.js

修改 datatable.js selectRowWithRadio,selectRowWithRadio 函数如下

 PrimeFaces.widget.DataTable.prototype.selectRowWithCheckbox = 函数（元素）{
        ...
        ...
        //保存状态
        this.writeSelections();

        //添加以添加即时行选择 
        this.fireRowSelectEvent(rowId);
        // 结尾
    }

将下面的 javascript 附加到数据表组件的末尾

;
...
>
<脚本类型=“text/javascript”>
    if(!wv1_main.cfg.onRowSelectUpdate){
        wv1.cfg.onRowSelectUpdate="";
    }别的{
        wv1.cfg.onRowSelectUpdate+=" ";
    }
    wv1.cfg.onRowSelectUpdate+="UPDATE_IDS";


将“UPDATE_IDS”替换为以空格分隔的面板 ID，例如“panel1 panel2”；


将“wv1”替换为数据表 widgetVar 属性的值

在您想要使用即时 ajax 复选框/半径选择的 jsf 页面中导入修改后的 js。

>
...
<脚本类型=“text/javascript”src=“#{CONTEXT_PATH}/resources/js/datatable.js”/>

您可以通过一些更多修改来突出显示选定的行

回复收藏 0 原文

温折酒 2024-10-16 23:45:55

只是在寻找同一问题的解决方案，由于 JSF 2 / Primefaces 这些天发展得非常快，找到了 Primefaces 版本 的更多最新解决方案>3.0 或更高。

根据 PrimeFaces 论坛帖子中的以下答案：
http://forum.primefaces .org/viewtopic.php?f=3&t=1373&sid=bbfcd6a343edf586f927cd7ecd7d01b9&start=10#p48388

可以将客户端 JavaScript 处理程序添加到 1. 将 primefaces-extension JAR添加

到您的webapp 的类路径（该库也可以在同名的中央 Maven 存储库中找到）。我尝试了在撰写本文时最新的版本 0.6.3，它对我有用

2.将 pe 命名空间添加到相应的 xhtml file:

<?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.将作为子元素添加到组件中（实际上可以添加到任何实现 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>

应该就是这样，希望这会有所帮助......

Was just searching for solution to the same problem and since JSF 2 / Primefaces are evolving quite fast these days, found more up-to-date solution for Primefaces of version 3.0 or higher.

As per following answer in PrimeFaces forum thread:
http://forum.primefaces.org/viewtopic.php?f=3&t=1373&sid=bbfcd6a343edf586f927cd7ecd7d01b9&start=10#p48388

one can add client-side javascript handler to <p:datatable> component by doing following steps:

1.Add primefaces-extension JAR to your webapp's classpath (this library is also available in central Maven repo under the same name). I tried version 0.6.3 which was the latest at the time of writing, and it worked for me

2.Add pe namespace to corresponding xhtml file:

<?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.Add <pe:javascript> as a child element to your <p:datatable> component (can be actually added to any component which implements ClientBehaviorHolder interface) like the following:

<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>

And that should be it, hope this helps...

回复收藏 0 原文

音栖息无 2024-10-16 23:45:55

您可以捕获选择行时触发的 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 的选择模式触发的其他有用事件是：

rowSelect 和 rowUnselect
rowSelectCheckbox代码>和rowUnselectCheckbox
rowSelectRadio
toggleSelect

You can catch ajax events that are fired when the row is selected.

In your case,

<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>

Other useful events that are fired depending on the selection mode of the dataTable are: