Jsf 2 一次一行如何在<;p:dataTable>;?

Jsf 2 一次一行如何在<;p:dataTable>;?,jsf-2,primefaces,datatable,Jsf 2,Primefaces,Datatable,在我的应用程序中,我有一个和行扩展列。我需要一次打开一行。如果有人试图展开第二行,剩余的第一行将展开,则会生成一条消息,说明首先关闭展开的行,然后打开另一行 如何实现这一点?任何指针都会对我很有帮助。谢谢查看Primefaces中的datatable.js文件。有一个名为toggleExpansion的javascript函数 也许您可以重写此函数,在没有行展开时调用原始行,在另一行已展开时显示消息(而不是调用原始行) 只是一个想法 您可以使用以下解决方案(我在mojarra 2.1.20和Pr

在我的应用程序中,我有一个
行扩展列。我需要一次打开一行。如果有人试图展开第二行,剩余的第一行将展开,则会生成一条消息,说明
首先关闭展开的行,然后打开另一行


如何实现这一点?任何指针都会对我很有帮助。谢谢

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

也许您可以重写此函数,在没有行展开时调用原始行,在另一行已展开时显示消息(而不是调用原始行)

只是一个想法

您可以使用以下解决方案(我在mojarra 2.1.20和Primefaces 3.5中对其进行了测试,效果很好),该解决方案在行展开时调用JavaScript函数。当单击第二行时,有另一个扩展行,它将触发
click
事件,该事件将依次折叠先前打开的行

xhtml:

Javascript:

功能测试(){
变量i=$('.ui行切换程序.ui-icon-circle-triangle-s')。长度;
如果(i==1){return;}
$('.ui行切换器.ui-icon-circle-triangle-s').trigger('click');
}

从2015年开始,这个问题是谷歌搜索结果中的第一个问题,我想补充一点,对于PrimeFaces 5.1,有一个dataTable属性
rowExpandMode
,当设置为
single
时,只允许显示一行。例如:

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


这不完全是所要求的,但我希望它能帮助其他人。

您可以通过这种自定义方法实现这一点

给这门课上“togglerClass”如下

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

在windows ready中调用此方法。

但我面临另一个问题:当我展开第二行时,剩余的第一行已展开,然后在触发第二行的切换事件后,第一行的切换事件正在触发。所以在backingbean中,我得到的是第一行的信息,而不是第二行的信息。如何先折叠展开的行,然后再展开第二行?。首先获取第二行的信息,然后获取第一行的信息。您可以调试以查看:)是的,您是对的,但是我想从bean中获取关于当前保持展开的行的信息。在本例中,我从backingbean获得第一行的信息,作为最后切换的行。最好先折叠另一个展开的行,然后展开当前行。是否可能/对不起,您先获取第二行的信息,然后再获取第一行的信息。实际上,我忘记了将您的答案标记为正确,因为此答案对我有帮助,所以我选择此答案作为正确答案。谢谢@RongNK的帮助。它确实有帮助。我们最近从5.0升级到了5.1,我不知道这一点。成功了,这是我的钥匙!谢谢
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");
        });
    });
}