PrimeFaces数据表格 - 需要根据行选择启用/禁用组件

5
我正在使用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>

可能与此相关的后端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;
    }

唯一的解决办法就是放弃复选框。PrimeFaces具有“即时选择”选项,在datatable行的任何位置单击即可选择它。使用这个选项,与selectionMode="multiple"一起,并将我的commandButtons从标准JSF更改为PrimeFaces commandButtons,我可以在选择或取消选择行时切换它们的状态。我仍然更愿意使用复选框进行选择,但是似乎在PrimeFaces datatable中不可能实现。 - Sean
3个回答

1

我刚在寻找解决同样问题的方法,由于 JSF 2 / Primefaces 最近发展迅速,所以找到了适用于版本 3.0 或更高版本的 Primefaces 更为最新的解决方案。

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

可以通过以下步骤向 <p:datatable> 组件添加客户端 JavaScript 处理程序:

1.将primefaces-extension JAR添加到您的Web应用程序的类路径中(该库在中央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

实际上有一个解决方法,至少对我有效。

从PrimeFaces中提取datatable.js文件,修改其中的selectRowWithCheckbox和selectRowWithRadio函数如下:
PrimeFaces.widget.DataTable.prototype.selectRowWithCheckbox = function(element) {
    ...
    ...
    //保存状态
    this.writeSelections();
//添加以添加即时行选择 this.fireRowSelectEvent(rowId); //结束 }
将以下JavaScript代码附加到您的datatable组件的末尾:
<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>
用空格分隔的面板ID替换“UPDATE_IDS”,例如“panel1 panel2”;将“wv1”替换为数据表widgetVar属性的值。
在您想要使用即时Ajax复选框/单选按钮选择的JSF页面中导入修改后的js文件:
<h:header/>
...
<script type="text/javascript" src="#{CONTEXT_PATH}/resources/js/datatable.js"/>
<h:header/>

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


0
你可以捕获在选定行时触发的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. rowSelectrowUnselect
  2. rowSelectCheckboxrowUnselectCheckbox
  3. rowSelectRadio
  4. toggleSelect

感谢您提供有用的“事件”。 - Cristian

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接