Отделить навигации и выбор с JSF древовидного виджетом

Question

Я ищу хороший подход реализовать древовидную JSF виджет со следующими требованиями:

• означает, разворачивать и сворачивать ветви дерева
• Ajax навигация по нажав на узле дерева
• множественный выбор узлов/ветвей с тремя состояниями флажков с помощью
• прежние три функции должны работать независимо друг от друга
• Мас решение т быть совместимы с PrimeFaces
• Я не хочу раскошелиться рамки с точки зрения написания пользовательского компонента

Что я сталкивался:

• PrimeFaces p:tree и p:treeTable
  • встроенная функция выбора обеспечивает хорошую реализацию с помощью флажков tri-state, но тесно связана с нажатием на узел, что делает его непригодным с точки зрения навигации (выбор als O изменения)
  • в качестве альтернативы Заказная реализация CheckBox-колонки должны изобретать все три-состояние флажка логики, даже с pe:triStateCheckbox (PrimeFaces Extensions)
• OmniFaces o:tree, кажется, предлагает высокий уровень настройки, но и оставляет много иглоукалывания

Любые подсказки, впечатления приветствуются.

Answer 1

В итоге я получил решение на основе p:treeTable с selectionMode="checkbox" и p:commandLink для навигации.

Чтобы отключить «полный ряд» мыши триггер щелчок также вызывает выделение изменяет JavaScript был скорректирован, как это (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> 

Я также изменил некоторые CSS, главным образом:

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