使用JSF树状小部件分离导航和选择

我正在寻找一种很好的方法来实现具有以下要求的树状JSF小部件：

• 表示展开和折叠树枝
• 通过单击树节点进行ajax导航
• 通过三态复选框多选节点/分支
• 前三个功能必须相互独立工作
• 解决方案必须与PrimeFaces兼容
• 我不想在编写自定义组件时使用框架

我所遇到的：

• PrimeFaces

  p:tree

  和

  p:treeTable

  • 内置的选择功能为三态复选框提供了一个很好的实现，但与单击节点紧密耦合，这使得它在导航方面不可用（选择也会改变）
  • 或者，复选框列的自定义实现必须重新设计整个三态复选框逻辑，即使使用

    pe:triStateCheckbox

    （PrimeFaces扩展）
• OmniFaces

  o:tree

  似乎提供了高水平的定制，但也留下了大量的针线工艺

---

欢迎提供任何提示和体验。

我最终得到了一个基于

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>

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