GWT中实现可动态加载内容的自定义下拉列表

listBox.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
        if(listBox.getSelectedItemText().equalsIgnoreCase("Load More...")) {
            listBox.removeItem(listBox.getItemCount()-1); // 移除“加载更多”选项
            // 模拟异步数据加载
            for(int j = 0; j < 5; j++)
                listBox.addItem("新数据项 " + (listBox.getItemCount() - 1 + j));
            listBox.addItem("Load More..."); // 重新添加“加载更多”选项
            // 问题在于：此时下拉菜单已经关闭
        }
    }
});

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.Window;

public class CustomDropdown implements EntryPoint {

    private Button dropdownTriggerButton; // 触发下拉的按钮
    private PopupPanel dropdownPopup;     // 承载列表内容的浮动面板
    private VerticalPanel listItemContainer; // 列表项容器
    private Button loadMoreButton;        // “加载更多”按钮
    private int currentItemCount = 0;     // 当前已加载项数

    @Override
    public void onModuleLoad() {
        // 1. 初始化触发按钮
        dropdownTriggerButton = new Button("选择项...");
        dropdownTriggerButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                if (dropdownPopup.isShowing()) {
                    dropdownPopup.hide();
                } else {
                    // 显示PopupPanel，并定位到触发按钮下方
                    dropdownPopup.showRelativeTo(dropdownTriggerButton);
                }
            }
        });

        // 2. 初始化内容面板
        dropdownPopup = new PopupPanel(true); // true表示点击PopupPanel外部时自动关闭
        dropdownPopup.setStyleName("custom-dropdown-popup"); // 添加CSS样式

        listItemContainer = new VerticalPanel();
        listItemContainer.setWidth("100%"); // 确保内容面板宽度自适应

        ScrollPanel scrollPanel = new ScrollPanel(listItemContainer);
        scrollPanel.setHeight("200px"); // 设置一个固定高度以便滚动
        scrollPanel.setWidth("200px"); // 设置宽度

        dropdownPopup.setWidget(scrollPanel);

        // 3. 加载初始数据和“加载更多”按钮
        loadInitialData();

        // 将触发按钮添加到RootPanel
        RootPanel.get().add(dropdownTriggerButton);
    }

    private void loadInitialData() {
        // 模拟初始数据加载
        addItemsToDropdown(5); // 加载前5项
        addLoadMoreButton();
    }

    private void addItemsToDropdown(int count) {
        for (int i = 0; i < count; i++) {
            final String itemText = "动态项 " + (currentItemCount + 1);
            Anchor item = new Anchor(itemText); // 使用Anchor作为可点击项
            item.setStyleName("custom-dropdown-item");
            item.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    dropdownTriggerButton.setText(itemText); // 更新触发按钮文本
                    dropdownPopup.hide(); // 选择后关闭PopupPanel
                }
            });
            listItemContainer.add(item);
            currentItemCount++;
        }
    }

    private void addLoadMoreButton() {
        if (loadMoreButton != null) {
            listItemContainer.remove(loadMoreButton); // 确保旧的“加载更多”按钮被移除
        }
        loadMoreButton = new Button("加载更多...");
        loadMoreButton.setStyleName("custom-dropdown-load-more");
        loadMoreButton.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                // 模拟异步RPC调用
                Window.alert("正在加载更多数据...");
                // 假设这里是一个实际的GWT RPC调用
                // yourRpcService.fetchMoreData(currentItemCount, new AsyncCallback<List<String>>() {
                //     @Override
                //     public void onFailure(Throwable caught) {
                //         Window.alert("加载失败: " + caught.getMessage());
                //     }
                //
                //     @Override
                //     public void onSuccess(List<String> result) {
                //         // 移除旧的“加载更多”按钮
                //         listItemContainer.remove(loadMoreButton);
                //         // 添加新数据
                //         for (String data : result) {
                //             // add new items similar to addItemsToDropdown logic
                //         }
                //         addItemsToDropdown(result.size()); // 假设返回了5个新项
                //         addLoadMoreButton(); // 重新添加“加载更多”按钮
                //     }
                // });

                // 简化模拟：直接添加数据并重新放置“加载更多”按钮
                listItemContainer.remove(loadMoreButton); // 移除旧的“加载更多”按钮
                addItemsToDropdown(5); // 模拟加载5个新项
                addLoadMoreButton(); // 重新添加“加载更多”按钮
                // 注意：PopupPanel在此过程中保持打开状态
            }
        });
        listItemContainer.add(loadMoreButton);
    }
}

.custom-dropdown-popup {
    border: 1px solid #ccc;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000; /* 确保在其他元素之上 */
}

.custom-dropdown-item {
    display: block; /* 使每个项独占一行 */
    padding: 8px 10px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}

.custom-dropdown-item:hover {
    background-color: #f0f0f0;
}

.custom-dropdown-load-more {
    width: 100%;
    padding: 8px;
    text-align: center;
    background-color: #e0e0e0;
    border: none;
    cursor: pointer;
}

.custom-dropdown-load-more:hover {
    background-color: #d0d0d0;
}