如何在 <p:dataTable> 中一次展开一行？答案

【问题标题】：How at a time one row can expand in <p:dataTable>?如何在 <p:dataTable> 中一次展开一行？
【发布时间】：2013-04-05 01:50:57
【问题描述】：

在我的应用程序中，我有一个 <p:datatable> 和 rowExpansion 列。我需要一次打开一行。如果有人尝试扩展第二行，而第一行保持扩展，则会生成一条消息，内容为 First close the expanded row and then open another row。

如何实现？任何指针都会对我很有帮助。谢谢

【问题讨论】：

标签： jsf-2 primefaces datatable

【解决方案1】：

截至 2015 年，这个问题在 Google 搜索结果中排名第一，我想补充一点，对于 PrimeFaces 5.1，当设置为 single 时，dataTable 属性 rowExpandMode - 只允许显示一行。示例：

<p:dataTable var="line" value="#{bean.lines}" rowExpandMode="single">

这不是确切的问题，但我希望它对其他人有所帮助。

【讨论】：

这绝对有帮助。我们最近从 5.0 迁移到 5.1，而我并不知道。它奏效了。
这对我来说是关键！谢谢！

【解决方案2】：

您可以使用（我已经在 mojarra 2.1.20 和 Primefaces 3.5 中对其进行了测试，并且工作正常）以下解决方案，它在行展开时调用 JavaScript 函数。当点击第二行，并且有另一个展开的行时，它会触发一个click 事件，这反过来又会折叠之前打开的行。

xhtml:

<p:ajax event="rowToggle" onstart="test();"/>

Javascript：

<script type="text/javascript">
    function test(){
        var i = $('.ui-row-toggler.ui-icon-circle-triangle-s').length;
        if(i == 1){return;}
            $('.ui-row-toggler.ui-icon-circle-triangle-s').trigger('click');
    }
</script>

【讨论】：

但我面临另一个问题：当我展开第二行时，第一行展开，然后在触发第二行的切换事件后，第一行的切换事件正在触发。因此，在支持 bean 中，我得到的是第一行的信息，而不是第二行的信息。我如何先折叠展开的行，然后展开第二行？..
你先得到第二行的信息，改变你得到第一行的信息。你可以调试看看:)
是的，你是对的，但我想从 bean 中获取关于当前扩展的那一行的信息。在这种情况下，我从支持 bean 获取第一行的信息作为最后切换的行。最好先折叠另一个展开的行，然后展开当前行。有没有可能/
对不起，你先得到第二行的信息，再得到第一行的信息。
其实我忘了把你的答案标记为正确，因为这个答案对我有帮助，所以我选择这个答案作为正确答案。感谢@RongNK 的帮助。

【解决方案3】：

查看 Primefaces here 中的 datatable.js 文件。有一个名为toggleExpansion 的javascript 函数。

也许您可以覆盖此函数并在未展开任何行时调用原始函数，并在另一行已展开时显示消息（而不是调用原始函数）。

只是一个想法……

【讨论】：

【解决方案4】：

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

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

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

【讨论】：