p:datatable selectAllRows api 调用不会触发 rowSelect 事件答案

【问题标题】：p:datatable selectAllRows api calls don't trigger rowSelect Eventp:datatable selectAllRows api 调用不会触发 rowSelect 事件
【发布时间】：2016-12-02 14:18:52
【问题描述】：

我有一个p:dataTable 和selectionMode=multiple，它绑定了rowSelect 和rowUnselect 事件：

<p:dataTable 
    widgetVar="myDatatable" 
    selectionMode="multiple" 
    selection="#{myBean.selection}">
    <p:ajax event="rowSelect" listener="#{myBean.onSelect}" />
    <p:ajax event="rowUnselect" listener="#{myBean.onUnselect}" />
... (columns)
</p:dataTable>

选择行工作正常，myBean.selection 已更新，myBean.onSelect() 已被调用。

现在我想添加按钮以（取消）选择所有项目到我的工具栏。我创建了两个<p:commandLink>s：

<p:commandLink onclick="PF('myDatatable').selectAllRows();" 
            update="actionbarForm">select all</p:commandLink>
<p:commandLink onclick="PF('myDatatable').unselectAllRows();" 
            update="actionbarForm">unselect all</p:commandLink>

选择似乎有效，我可以看到所有项目都（未）选择。但是，myBean.selection 和 myBean.onSelect() 都没有更新/调用。我需要做什么才能启用它？

【问题讨论】：

我没有真正的想法，但是我应该去调试什么以了解更多信息，但出于好奇，你调试了什么？阿贾克斯来电？网络流量？检查 PrimeFaces 源（js 和 java 文件）。你可以做很多事情
我检查了，调用 selectAllRows() 时没有 Ajax-Call 或网络流量。我还尝试在调用selectAllRows() 之前或之后调用PF('myDatatable').fireRowSelectEvent()，但我无法找出正确的参数。
如果您将它与“commandButton”一起使用，例如从页面触发调用（在使用 selectAllRows 函数之后）。例如。就像在'Multiple with Meta and Shift keys'的展示中一样
向 commandLink 添加操作不会改变任何内容。示例“Multiple with Meta and Shift keys”仅显示选择的结果，这对我在逐个选择项目时有效。
我在展示中尝试了后者，方法是从开发者控制台运行PF('widget_form_multipleDT').selectAllRows()，然后按下“查看”按钮。然后似乎服务器具有所有行并显示它们。只是没有“rowSelect”事件

标签： ajax primefaces datatable multipleselection

【解决方案1】：

这两个 PrimeFaces javascript api 调用不会与任何 ajax 事件交互。这可以在 selectAllRows() 和 unselectAllRows() 的 datatable.js 中看到.为此，它将选择的@all 值传递给服务器。

您还会在源代码中看到已经有一些代码可以发送“toggleSelect” ajax 事件，所以我将它放在扩展 PrimeFaces 数据表的函数中：

PrimeFaces.widget.DataTable.prototype.fireToggleSelectEvent = function(checked) {
    //fire toggleSelect event
    if(this.cfg.behaviors) {
        var toggleSelectBehavior = this.cfg.behaviors['toggleSelect'];

        if(toggleSelectBehavior) {
            var ext = {
                    params: [{name: this.id + '_checked', value: checked}
                ]
            };

            toggleSelectBehavior.call(this, ext);
        }
    }
}

通过小部件调用 (un)selectAllRows() 后，您也可以调用此函数，参数为 true（选择）或 false（取消选择）值。

如果您随后将 toggleSelect ajax 添加到数据表中

<p:ajax event="toggleSelect" listener="#{dtSelectionView.onToggleSelect}" update=":form:msgs" />

并在您的 bean 中添加一个处理程序：

public void onToggleSelect(ToggleSelectEvent event) {
    FacesMessage msg = new FacesMessage(event.isSelected() ? "All Selected" : "All Unselected");
    FacesContext.getCurrentInstance().addMessage(null, msg);
}

一切正常。（PrimeFaces 6.0，针对展示测试的代码）

您还可以覆盖 PrimeFaces datatable.js 中的 (un)selectAllRows 并在最后调用 fireToggleSelectEvent，因此所有内容都在一个函数调用中（或将两个单独的调用组合到一个自定义函数中）。

【讨论】：