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

Question

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

我正在使用PrimeFaces DataTable来显示记录(在沙箱应用程序中随机生成).我正在使用复选框选择版本.基本的DataTable工作正常,包括删除和取消按钮(确认对话框中只能提供这些功能).我正在尝试向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>

Run Code Online (Sandbox Code Playgroud)

来自我的支持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;
    }

Run Code Online (Sandbox Code Playgroud)

Answer 1

ome*_*gan 1

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

从 primefacess 中提取 datatable.js

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

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

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

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

<p:datatable widgetVar="wv1" id='mydatatable' ....>
...
<p:数据表/>
<脚本类型=“文本/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。

<h:标题/>
...
<script type="text/javascript" src="#{CONTEXT_PATH}/resources/js/datatable.js"/>
<h:标题/>

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

归档时间：	15 年，8 月前
查看次数：	29470 次
最近记录：	12 年，1 月前