2017-09-28 84 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) 
      } 
     } 
}