Pregunta ¿Cómo se puede expandir una fila en al mismo tiempo?


En mi aplicación tengo un <p:datatable> con rowExpansion columna. Tengo un requisito para abrir una sola fila a la vez. Si alguien intenta expandir la segunda fila, la primera fila restante se expandirá y se generará un mensaje que diga: First close the expanded row and then open another row.

¿Cómo se puede implementar esto? Cualquier puntero me será muy útil. Gracias


5
2018-04-12 13:45


origen


Respuestas:


Puede usar (lo he probado en mojarra 2.1.20 y Primefaces 3.5 y funciona bien) la siguiente solución que llama a una función de JavaScript cuando se expande la fila. Al hacer clic en una segunda fila, y hay otra fila expandida, se activará una click evento, que a su vez colapsará la fila previamente abierta.

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>

5
2018-04-12 16:01



A partir de 2015, y esta pregunta es la primera en los resultados de búsqueda de Google, quiero agregar que para PrimeFaces 5.1, hay un atributo dataTable rowExpandMode, cuando se establece en single - Permite mostrar solo una fila. Ejemplo:

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

No es exactamente lo que se pidió, pero espero que ayude a otros.


6
2018-04-19 12:57



Revisar la datatable.js archivo en Primefaces aquí. Hay una función de javascript llamada toggleExpansion.

Tal vez puede anular esta función y llamar a la original cuando no se expande una fila y mostrar un mensaje cuando otra fila ya está expandida (y no llamar a la original).

Solo una idea...


1
2018-04-12 15:03



Puedes lograr esto con la ayuda de este método personalizado.

dar 'togglerClass' como esta clase

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

Código JavaScript aquí;

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

Llame a este método en Windows listo.


0
2017-08-10 09:05