2017-09-28 82 views
0

环境:
PrimeFaces 6.1
JSF 2.2
的Tomcat 7.0.23
的Java 1.7.0_79PrimeFaces treetable中 - 停止复选框选择传播

实现使用复选框选择一个treetable中,并需要防止的选择为父节点和子节点分别进行客户端和服务器端处理的上下传播。

例树:
父节点
--Child节点1
----儿童子节点1.1
--Child节点2
----儿童子节点2.1

希望的行为:
当选择一个节点时,只应选择该节点的复选框。

实际行为(开箱即用):
选择一个节点,子和父节点被选择。例如,在上面的示例树中选择“父节点和子子节点2.1”中的“子节点2”也被选中。

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中更新:
的treetable中更新被作为Ajax选择和取消选择事件处理的一部分而执行。

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

问:
当阿贾克斯选择和取消选择事件,以禁用特定节点上可选择和更新treetable中被解雇,子节点(或多个)越来越选中。处理ajax事件侦听器时,子节点不在Bean的selectedNodes数组中。如何防止在TreeTable组件更新时选择子节点?

+0

检查treetable中(渲染)java代码做什么......也许是视觉上选择其中有 – Kukeltje

+0

@Kukeltje感谢您的建议,我会看看那儿。 – CapnHook

+0

@Kukeltje再次感谢您的建议,它帮助您找到了解决方案。我能够通过扩展CheckboxTreeNode类并重写propagateSelectionDown和propagateSelectionUp方法来完成复选框传播预防。 – CapnHook

回答

0

通过扩展CheckboxTreeNode类并覆盖propagateSelectionDown(boolean)和propagateSelectionUp()方法可以防止从服务器端传播复选框。当然,您需要使用新类而不是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) 
      } 
     } 
}