Question

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

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

我遇到过的事情：

PrimeFaces p:tree和p:treeTable
- 内置选择功能提供了一个很好的三态复选框实现，但与点击节点紧密耦合，这使得它在导航方面无法使用（选择也会改变）
- 或者，checkbox-column的自定义实现必须重新发明整个三态复选框逻辑，即使使用pe:triStateCheckbox（PrimeFaces Extensions）
OmniFaces o:tree似乎提供了高水平的定制，但也留下了很多针法制作

欢迎任何提示，经验。

Answer 1

我最终在p:treeTable上使用selectionMode="checkbox"和p:commandLink进行了解决方案构建，以便进行导航。

要停用＆＃39;完整行＆＃39;鼠标单击触发器也导致选择更改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;
}

使用JSF树状窗口小部件

1 个答案: