在 rowSelect 上展开 primefaces rowExpansion

Question

我有一个数据表，里面有一个 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> 可见。

Answer 1

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

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

只需将 rowExpansion(PF('dataTableWidgetVar')); 替换为正确的数据table 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>

Answer 2

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

给'togglerClass'这个class赞

<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");
        });
    });
}

在 windows 就绪时调用此方法。

Answer 3

这是适用于 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();
                }
            });
}

在 rowSelect 上展开 primefaces rowExpansion

Expand primefaces rowExpansion on rowSelect

jsf

primefaces