Question

我有一个带有rowExpasion的dataTable，我想基于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/>作为列保留在表格中。

只需将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>

Answer 2

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

给予＆＃39; togglerClass＆＃39;这个类喜欢

 <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 ready中调用此方法。

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

3 个答案: