p:datatable selectAllRows api调用不会触发rowSelect事件 [英] p:datatable selectAllRows api calls don't trigger rowSelect Event

问题描述

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

I have a p:dataTable with selectionMode=multiple which binds the rowSelect and rowUnselect event:

<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()被调用.

Selecting rows works fine, myBean.selection is updated and myBean.onSelect() is invoked.

现在，我想添加按钮以(取消)选择工具栏上的所有项目.我创建了两个<p:commandLink>:

Now I wanted to add buttons to (un)select all items to my Toolbar. I created two <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()均未更新/调用.我必须怎么做才能启用此功能?

The selection seems to work, I can see that either all items are (un)selected. However, neither myBean.selection nor myBean.onSelect() are updated/invoked. What do I have to do that to enable this?

推荐答案

这两个PrimeFaces javascript api调用不会与任何ajax事件进行交互.可以在@all值传递给服务器.

These two PrimeFaces javascript api calls do in no way interact with any of the ajax events. This can be seen in the datatable.js in selectAllRows() and unselectAllRows() If you do not use ajax but a normal 'submit' via a button, you'll see that PrimeFaces expands the selection to 'all' on the server side. For this it passes the @all value of the selection to the server.

您还将在源代码中看到已经有一些代码可以发送'

You'll also see in the source that there already is some code to send a 'toggleSelect` ajax event, so I put it in a function extending the PrimeFaces datatable:

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(取消选择)值作为参数来调用此函数.

After calling the (un)selectAllRows() via the widget, you can call this function too, with either a true (select) or false (unselect) value as the parameter.

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

If you then add the toggleSelect ajax to your datatable

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

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

and in your bean add a handler:

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

一切正常. (PrimeFaces 6.0，针对展示柜进行了代码测试)

It all works. (PrimeFaces 6.0, code tested against showcase)

您还可以覆盖PrimeFaces datatable.js中的两个(un)selectAllRows，最后调用fireToggleSelectEvent，因此全部都在一个函数调用中(或将两个单独的调用合并在一个自定义函数中).

You could also override both the (un)selectAllRows in the PrimeFaces datatable.js and at the end call the fireToggleSelectEvent, so all is in one functioncall (or combine both separate calls in one custom function).

这篇关于p:datatable selectAllRows api调用不会触发rowSelect事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！