在GWT中实现动态加载“更多”选项的下拉列表

public class MyDynamicListBox extends Composite {
    private ListBox listBox;
    private List<String> dataItems = new ArrayList<>(); // 模拟数据源

    public MyDynamicListBox() {
        listBox = new ListBox();
        initWidget(listBox);

        // 初始加载一些数据
        for (int i = 0; i < 5; i++) {
            dataItems.add("初始项 " + (i + 1));
        }
        populateListBox();

        listBox.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                // 检查是否点击了“加载更多”
                if (listBox.getSelectedItemText() != null && listBox.getSelectedItemText().equalsIgnoreCase("加载更多...")) {
                    // 移除“加载更多”选项
                    listBox.removeItem(listBox.getItemCount() - 1);

                    // 模拟异步加载更多数据
                    // 实际应用中会是一个RPC或REST调用
                    GWT.log("正在加载更多数据...");
                    for (int j = 0; j < 5; j++) {
                        dataItems.add("动态加载项 " + (dataItems.size() + 1));
                    }

                    // 重新填充ListBox
                    populateListBox();
                }
            }
        });
    }

    private void populateListBox() {
        listBox.clear(); // 清空现有选项
        for (String item : dataItems) {
            listBox.addItem(item);
        }
        // 总是添加“加载更多”选项在末尾
        listBox.addItem("加载更多...");
    }
}

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

import java.util.ArrayList;
import java.util.List;

public class CustomDynamicDropdown extends Composite {

    private Button dropdownButton; // 模拟下拉框的按钮
    private PopupPanel popup;      // 下拉内容的容器
    private VerticalPanel contentPanel; // 放置列表项的面板
    private Button loadMoreButton; // 放置在popup中的“加载更多”按钮

    private List<String> currentItems = new ArrayList<>(); // 当前已加载的数据
    private int pageSize = 5; // 每次加载的数量
    private int currentPage = 0; // 当前页码

    public CustomDynamicDropdown() {
        // 1. 初始化模拟下拉框的按钮
        dropdownButton = new Button("选择项...");
        dropdownButton.addStyleName("custom-dropdown-button"); // 添加CSS样式
        initWidget(dropdownButton);

        // 2. 初始化PopupPanel作为下拉内容容器
        popup = new PopupPanel(true); // true表示点击外部区域时自动隐藏
        popup.addStyleName("custom-dropdown-popup");

        // 3. 初始化VerticalPanel来承载列表项和“加载更多”按钮
        contentPanel = new VerticalPanel();
        contentPanel.addStyleName("custom-dropdown-content");
        popup.setWidget(contentPanel);

        // 4. 初始化“加载更多”按钮
        loadMoreButton = new Button("加载更多...");
        loadMoreButton.addStyleName("custom-load-more-button");
        loadMoreButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                // 当点击“加载更多”时，不关闭Popup，直接加载数据
                loadMoreData();
            }
        });

        // 5. 为模拟下拉框按钮添加点击事件，显示/隐藏Popup
        dropdownButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                if (!popup.isShowing()) {
                    // 获取按钮位置并显示Popup
                    popup.setPopupPositionAndShow(new PopupPanel.PositionCallback() {
                        @Override
                        public void setPosition(int offsetWidth, int offsetHeight) {
                            int left = dropdownButton.getAbsoluteLeft();
                            int top = dropdownButton.getAbsoluteTop() + dropdownButton.getOffsetHeight();
                            popup.setPopupPosition(left, top);
                        }
                    });
                    // 首次显示时加载初始数据
                    if (currentItems.isEmpty()) {
                        loadMoreData();
                    }
                } else {
                    popup.hide();
                }
            }
        });
    }

    /**
     * 模拟异步加载数据
     */
    private void loadMoreData() {
        GWT.log("正在异步加载第 " + (currentPage + 1) + " 页数据...");
        // 实际应用中，这里会发起RPC或REST请求
        // 模拟网络延迟
        new com.google.gwt.user.client.Timer() {
            @Override
            public void run() {
                List<String> newItems = fetchMockData(currentPage, pageSize);
                if (!newItems.isEmpty()) {
                    // 移除旧的“加载更多”按钮（如果存在）
                    if (contentPanel.getWidgetCount() > 0 && contentPanel.getWidget(contentPanel.getWidgetCount() - 1) == loadMoreButton) {
                        contentPanel.remove(loadMoreButton);
                    }

                    // 添加新加载的数据项
                    for (String item : newItems) {
                        currentItems.add(item);
                        Label itemLabel = new Label(item);
                        itemLabel.addStyleName("custom-dropdown-item");
                        // 为每个数据项添加点击事件（例如，选中该项并关闭Popup）
                        itemLabel.addClickHandler(new ClickHandler() {
                            @Override
                            public void onClick(ClickEvent event) {
                                dropdownButton.setText(item); // 更新按钮文本为选中项
                                popup.hide(); // 选中后关闭Popup
                            }
                        });
                        contentPanel.add(itemLabel);
                    }

                    // 重新添加“加载更多”按钮
                    contentPanel.add(loadMoreButton);
                    currentPage++;
                } else {
                    // 如果没有更多数据，移除“加载更多”按钮
                    if (contentPanel.getWidgetCount() > 0 && contentPanel.getWidget(contentPanel.getWidgetCount() - 1) == loadMoreButton) {
                        contentPanel.remove(loadMoreButton);
                    }
                    GWT.log("所有数据已加载。");
                }
            }
        }.schedule(500); // 模拟500毫秒延迟
    }

    /**
     * 模拟从后端获取数据
     */
    private List<String> fetchMockData(int page, int size) {
        List<String> mockData = new ArrayList<>();
        int start = page * size;
        int end = start + size;
        // 假设总共有20项数据
        for (int i = start; i < end && i < 20; i++) {
            mockData.add("数据项 " + (i + 1));
        }
        return mockData;
    }

    // 可以在这里添加其他方法，例如设置下拉按钮的文本、获取当前选中项等
}