Entkoppeln Navigation und Auswahl mit JSF tree-like-Widget

Question

Ich bin für einen guten Ansatz suche einen baumartigen JSF-Widget, mit folgenden Anforderungen zu realisieren:

• bedeuten Äste zu erweitern oder reduzieren
• ajax Navigation auf einem Baumknoten
• Mehrfachauswahl von Knoten/Filialen über Tri-State-Ankreuzfelder durch Anklicken
• die ersteren drei Merkmale müssen voneinander
• die Lösung Mus unabhängiges arbeiten t sein kompatibel mit PrimeFaces
• Ich will nicht den Rahmen in Bezug auf das Schreiben eines benutzerdefinierten Komponente

Gabel Was ich bin gekommen, across:

• PrimeFaces p:tree und p:treeTable
  • eingebaute Auswahl-Funktion bietet eine schöne Implementierung mit Tri-State-Checkboxen, ist aber eng mit dem Klicken auf einen Knoten gekoppelt, was es in Bezug auf die Navigation unbrauchbar macht (die Auswahl als o Änderungen)
  • alternativ eine benutzerdefinierte Implementierung der Checkbox-Spalte muss die gesamte Tri-State-Checkbox Logik neu zu erfinden sogar mit pe:triStateCheckbox (PrimeFaces Extensions)
• OmniFaces o:tree scheinen ein hohes Maß an Anpassung zu bieten, sondern auch lässt viele Nadel Crafting übrig

Alle Hinweise, Erfahrungen sind willkommen.

Answer 1

Ich landete mit einer Lösung p:treeTable mit selectionMode="checkbox" und p:commandLink für die Navigation.

Um die 'volle Zeile' Mausklick Auslöser auch zu deaktivieren verursacht Auswahl der JavaScript wie folgt angepasst wurde verändert (PrimeFaces 5.3):

<script type="text/javascript"> 
    //<![CDATA[ 
     PrimeFaces.widget.TreeTable.prototype.bindSelectionEvents = function() { 
      var $this = this, 
      rowSelector = '> tr.ui-treetable-selectable-node'; 

      this.tbody.off('mouseover.treeTable mouseout.treeTable click.treeTable', rowSelector) 
         .on('mouseover.treeTable', rowSelector, null, function(e) { 
          var element = $(this); 
          if(!element.hasClass('ui-state-highlight')) { 
           element.addClass('ui-state-hover'); 

           if($this.isCheckboxSelection() && !$this.cfg.nativeElements) { 
            element.find('> td:first-child > div.ui-chkbox > div.ui-chkbox-box').addClass('ui-state-hover'); 
           } 
          } 
         }) 
         .on('mouseout.treeTable', rowSelector, null, function(e) { 
          var element = $(this); 
          if(!element.hasClass('ui-state-highlight')) { 
           element.removeClass('ui-state-hover'); 

           if($this.isCheckboxSelection() && !$this.cfg.nativeElements) { 
            element.find('> td:first-child > div.ui-chkbox > div.ui-chkbox-box').removeClass('ui-state-hover'); 
           } 
          } 
         }) 
         .on('click.treeTable', rowSelector, null, function(e) { 
          //$this.onRowClick(e, $(this)); 
          e.preventDefault(); 
         }); 

      if(this.isCheckboxSelection()) { 
       var checkboxSelector = this.cfg.nativeElements ? '> tr.ui-treetable-selectable-node > td:first-child :checkbox': 
         '> tr.ui-treetable-selectable-node > td:first-child div.ui-chkbox-box'; 

        this.tbody.off('click.treeTable-checkbox', checkboxSelector) 
          .on('click.treeTable-checkbox', checkboxSelector, null, function(e) { 
           var node = $(this).closest('tr.ui-treetable-selectable-node'); 
           $this.toggleCheckboxNode(node); 
          }); 


        //initial partial selected visuals 
        if(this.cfg.nativeElements) { 
         this.indeterminateNodes(this.tbody.children('tr.ui-treetable-partialselected')); 
        } 
      } 
     }; 
    //]]> 
</script> 

Ich habe auch einige CSS, vor allem:

.ui-treetable .ui-treetable-data tr.ui-state-highlight, 
.ui-treetable .ui-treetable-data tr.ui-state-hover { 
    cursor: default; 
}