PrimeFaces TreeTable - 停止复选框选择传播

Question

环境：
PrimeFaces 6.1
JSF 2.2
Tomcat7.0.23
Java1.7.0_79

实现了带有复选框 selection 的 TreeTable，并且需要防止 selection 在客户端和服务器端处理时分别向上和向下传播父节点和子节点。

示例树：
父节点
--子节点1
----子节点1.1
--子节点2
----子节点2.1

期望的行为：
当 selecting 一个节点时，只有该节点的复选框应该 selected。

实际行为（开箱即用）：
选择一个节点，子节点和父节点被 selected。例如，在上面的示例树中 selecting 子节点 2 父节点和子子节点 2.1 也是 selected.

TreeTable 组件：

<p:treeTable id="treeTable" value="#{Bean.rootNode}" var="item" selectionMode="checkbox" nodeVar="node"
    styleClass="widthFull" showUnselectableCheckbox="true" selection="#{Bean.selectedNodes}" stickyHeader="true">
    <p:ajax event="select" listener="#{Bean.processSelect(item)}" ignoreAutoUpdate="true"/>
    <p:ajax event="unselect" listener="#{Bean.processUnselect(item)}" ignoreAutoUpdate="true"/>
    ....
</p:treeTable>

覆盖 PrimeFaces JS 函数：
能够通过覆盖 PrimeFaces.widget.TreeTable.prototype.propagateUp 和 PrimeFaces.widget.TreeTable.prototype.getDescendants javascript 函数来防止客户端处理中的传播。

PrimeFaces.widget.TreeTable.prototype.propagateUp = function(node) {
    //do nothing, overriding the TreeTable propagate selection up functionality

}

PrimeFaces.widget.TreeTable.prototype.getDescendants = function(node) {
    //do nothing other than return empty array, overriding the TreeTable propagate selection down functionality by overriding getDescendants...hopefully this doesn't cause other issues
    f = [];
    return f;
}

树表更新：
TreeTable 更新作为 ajax select 和 unselect 事件处理的一部分执行。

RequestContext.getCurrentInstance().update("inventoryForm:treeTable");

问题：
当触发 ajax select 和 unselect 事件以禁用特定节点上的 select 能力并更新 TreeTable 时，子节点将获得 select编辑。在处理 ajax 事件侦听器时，子节点不在 Bean 上的 selectedNodes 数组中。如何防止子节点在 TreeTable 组件更新时被 select 编辑？

Answer 1

可以通过扩展 CheckboxTreeNode class 并覆盖 propagateSelectionDown(boolean) 和 propagateSelectionUp() 方法来防止从服务器端传播复选框选择。当然，您随后需要使用新的 class 而不是 CheckboxTreeNode 来构建树内容。

public class MyCheckboxTreeNode extends CheckboxTreeNode {

    public MyCheckboxTreeNode() {
        super();
    }

    public MyCheckboxTreeNode(Object data, TreeNode parent) {
        super(data, parent);
    }

    public MyCheckboxTreeNode(Object data) {
        super(data);
    }

    public MyCheckboxTreeNode(String type, Object data, TreeNode parent) {
        super(type, data, parent);
    }

    @Override
    protected void propagateSelectionDown(boolean value) {
        //Do nothing, overriding CheckboxTreeNode method to prevent propagation down of tree node selections when ajax update is performed.
    }

    @Override
    protected void propagateSelectionUp() {
        //Do nothing, overriding CheckboxTreeNode method to prevent propagation up of tree node selections when ajax update is performed.
    }
}

需要覆盖额外的 PrimeFaces javascript 函数，以防止在后代节点折叠时向下传播。

//--------Override Primefaces JS
PrimeFaces.widget.TreeTable.prototype.fireSelectNodeEvent = function(b) {
    //Overriding this function in order to prevent selection of descendant nodes when parent is selected. See a.oncomplete function below.
    if (this.isCheckboxSelection()) {
           var e = this
             , a = {
               source: this.id,
               process: this.id
           };
           a.params = [{
               name: this.id + "_instantSelection",
               value: b
           }];
           a.oncomplete = function(k, f, g) {
            //commented out the logic to prevent selection of descendant nodes when parent node is selected
            //if (g.descendantRowKeys && g.descendantRowKeys !== "") {
                   //var j = g.descendantRowKeys.split(",");
                   //for (var h = 0; h < j.length; h++) {
                       //e.addToSelection(j[h])
                   //}
                   //e.writeSelections()
               //}
           }
           ;
           if (this.hasBehavior("select")) {
               var d = this.cfg.behaviors.select;
               d.call(this, a)
           } else {
               PrimeFaces.ajax.AjaxRequest(a)
           }
       } else {
           if (this.hasBehavior("select")) {
               var d = this.cfg.behaviors.select
                 , c = {
                   params: [{
                       name: this.id + "_instantSelection",
                       value: b
                   }]
               };
               d.call(this, c)
           }
       }
}

PrimeFaces TreeTable - 停止复选框选择传播

PrimeFaces TreeTable - Stop Checkbox selection propagation

primefaces

jsf-2.2