在 rowSelect 上展开 primefaces rowExpansion答案

【问题标题】：Expand primefaces rowExpansion on rowSelect在 rowSelect 上展开 primefaces rowExpansion
【发布时间】：2015-10-12 18:22:32
【问题描述】：

我有一个内部带有 rowExpasion 的数据表，我想根据 rowSelection 扩展它。

当用户点击该行时，它会展开该行，而不需要 <p:rowToggler/>

    <p:dataTable var="foo" value="#{fooBean.foos}" lazy="true" selection="#{fooBean.foo}" selectionMode="single" rowExpandMode="single"
        paginator="false" rows="10">
        <p:ajax event="rowSelect" oncomplete="PF('rowExpansion').expand(?)" />

        <p:column headerText="Value">
            <h:outputText value="#{foo.value}" />
        </p:column>

        <p:rowExpansion>
            sweetstuffinside
        </p:rowExpansion>
    </p:dataTable>

另外，如果可能的话，我不希望 <p:rowToggler> 可见。

【问题讨论】：

只有 html、css 和 javascript。有一个选择事件。您可以在其中调用一些 javascript，这些 javascript 反过来可以在 rowToggler 上进行“点击”
@Kukeltje 我不知道在这种情况下到底该调用什么，尝试了但我不知道点击什么，所以它只得到我想要的行...
分解您的问题。首先，您需要获得正确的行。在谷歌中搜索一下就可以找到这个：stackoverflow.com/questions/20946557/…

标签： jsf primefaces

【解决方案1】：

答案就在这里：PrimeFaces expand row on row click 虽然这给了我不同的问题，但这是另一个话题，这个答案满足了点击时扩展行的需要。

请记住，您需要将<p:rowToggler/> 作为列保留在表格中。

只需将 rowExpansion(PF('dataTableWidgetVar')); 替换为您的正确数据表 widgetVar

<script type="text/javascript">
        $(document).ready(function() {
               rowExpansion(PF('dataTableWidgetVar'));
            });

        function rowExpansion(dataTable) {
               //dataTable should be the widgetVar object
               var $this = dataTable;
               //add the 'hand' when hovering on row
               $this.tbody.children('tr').css('cursor', 'pointer')
               $this.tbody.off('click.datatable-expansion', '> tr')
                  .on('click.datatable-expansion', '> tr', null, function() {
                     //before expanding collapse all rows
                     $this.collapseAllRows();
                     //toggle the current row the old toggler
                     $this.toggleExpansion($(this).find('div.ui-row-toggler'));
                   });
        }
        </script>

【讨论】：

您好，我得到了这个 var 'dataTableWV' 的小部件不可用！ –
$this.collapseAllRows();不起作用。这不是一个函数。我正在使用primefaces 4.0。有什么想法吗？

【解决方案2】：

这是适用于 PF 6.0.17 的一个，包括添加 ENTER 键来打开和关闭行。

$(document).ready(function() {
    rowExpansion('tableEntity');
});

rowExpansion : function(dataTableWidgetVar) {
    // dataTable should be the widgetVar object
    var $this = PF(dataTableWidgetVar);

    // turn off row toggler events
    var togglerSelector = '> tr > td > div.ui-row-toggler';
    $this.tbody.off('click.datatable-expansion', togglerSelector);
    $this.tbody.off('keydown.datatable-expansion', togglerSelector);

    // add the 'hand' when hovering on row
    $this.tbody.children('tr').css('cursor', 'pointer');

    // now set the toggle to be the whole row
    togglerSelector = '> tr';

    $this.tbody
        .off('click.datatable-expansion', togglerSelector)
        .on('click.datatable-expansion',
            togglerSelector,
            null,
            function() {
                // toggle the current row
                $this.toggleExpansion($(this).find('div.ui-row-toggler'));
            })
        .on('keydown.datatable-expansion',
            togglerSelector,
            null,
            function(e) {
                var key = e.which, keyCode = $.ui.keyCode;

                if ((key === keyCode.ENTER || key === keyCode.NUMPAD_ENTER)) {
                    $this.toggleExpansion($(this).find('div.ui-row-toggler'));
                    e.preventDefault();
                }
            });
}

【讨论】：

【解决方案3】：

您可以借助此自定义方法实现此目的。

像这样给'togglerClass'这个类

<pou:column styleClass="togglerClass" style="width:16px">
    <pou:rowToggler/>
</pou:column>

此处为 JavaScript 代码；

function prodsToggler() {
    $('.togglerClass div').click(function () {
        var currentTr = $(this).closest("tr");
        var $trs = $('.togglerClass').closest("tr").not(currentTr);
        $trs.each(function (index, el) {
            var $this = $(el),
                    $next = $this.next(".ui-expanded-row-content");

            $this.removeClass("ui-expanded-row");
            $next.remove();

            $this.find(".ui-row-toggler").removeClass("ui-icon-circle-triangle-s");
        });
    });
}

在准备好的窗口中调用这个方法。

【讨论】：