Прокрутите до компонента внутри диалога по нажатию кнопки - PullRequest
Новая
       23

Прокрутите до компонента внутри диалога по нажатию кнопки

0 голосов
/ 15 декабря 2018

У меня есть страница JSF / Primefaces с длинным контентом, который обрабатывается полосой прокрутки, а также диалог с длинным контентом и полосой прокрутки.Диалог содержит кнопку, и я хотел бы прокрутить содержимое диалога до определенного компонента внутри диалогового окна (почти в нижней части), но если я использую 

PrimeFaces.current().scrollTo("component");

, прокрутка действует в нижней части.страницы, а не внутри диалога.
Читая другие вопросы, я попытался добиться эффекта с помощью JQuery, поместив скрипт непосредственно на кнопку onclick 

$('#dialog').animate({scrollTop: $('#dialogForm\\:panelDialog').offset().top},'slow');

, но он не работает.
Ниже приведеныфайлы для минимального (не) рабочего примера.

XHTML Страница: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>

<h:body>
    <p:commandButton value="Basic" type="button" onclick="PF('dialogVar').show();" />
    <p:commandButton value="Scroll" actionListener="#{testCBean.onClick()}" />
    <p:panel>
        <ui:repeat var="item" value="#{testCBean.tableRows}">
            <div>
                #{item}
            </div>
        </ui:repeat>
    </p:panel>
    <p:outputPanel id="panel">
                scroll destination
            </p:outputPanel>
    <p:dialog id="dialog" header="Basic Dialog" widgetVar="dialogVar" minHeight="40" height="500">
        <h:form id="dialogForm">
            <p:commandButton value="Scroll" actionListener="#{testCBean.onClickDialog()}" />
            <ui:repeat var="item" value="#{testCBean.tableRows}">
                <div>
                    #{item}
                </div>
            </ui:repeat>
            <p:outputPanel id="panelDialog">
                scroll destination
            </p:outputPanel>
        </h:form>
    </p:dialog>
</h:body>
</html>

Боб: 

package controller;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;
import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

import org.primefaces.PrimeFaces;

@Named
@SessionScoped
public class TestCBean implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    private List<String> tableRows;

    @PostConstruct
    public void init() {
        tableRows = new ArrayList<String>();
        for (int i = 0; i < 100; i++) {
            tableRows.add("Test");
        }
    }

    public List<String> getTableRows() {
        return tableRows;
    }

    public void setTableRows(List<String> tableRows) {
        this.tableRows = tableRows;
    }

    public void onClick() {
        PrimeFaces.current().scrollTo("panel");
    }

    public void onClickDialog() {
        PrimeFaces.current().scrollTo("dialogForm:panelDialog");
//      PrimeFaces.current().executeScript("$('#dialog').animate({scrollTop: $('#dialogForm\\:panelDialog').offset().top},'slow');");
    }
}

1 Ответ

0 голосов
/ 18 декабря 2018

Я нашел способ сделать это через JQuery, используя этот скрипт: 

function dialogScroll(dialogId, elementId) {
    $('#' + dialogId).find('.ui-dialog-content').first().animate({scrollTop: $('#' + elementId).offset().top},'slow');
}

Первый аргумент - это идентификатор диалога, который используется в качестве контейнера для поиска элемента, который вы хотите прокрутитьto, идентификатор которого передается как второй параметр.
Затем эту функцию можно вызывать непосредственно в кнопке onclick или в методе Java-компонента следующим образом: 

PrimeFaces.current().executeScript("dialogScroll('dialog', 'dialogForm\\\\:panelDialog');");

Обратите внимание на escape в элементеидентификатор, необходимый, если он содержит ":"

...