ZK Combobox 动态内容加载与关闭行为定制

ZK Combobox默认行为与挑战

ZK Framework的Combobox组件在用户选择列表中的任一Comboitem后，默认会关闭其下拉弹出窗口。这种行为对于大多数选择场景是合理的，但在某些特定交互模式下，例如需要动态加载更多数据时，就会带来不便。

一个典型的场景是：Combobox最初显示一个精简列表，并提供一个“显示更多”选项。当用户点击“显示更多”时，我们期望Combobox能够加载并显示完整的列表，同时保持下拉窗口打开，以便用户可以继续选择。然而，默认行为会导致点击“显示更多”后Combobox关闭，用户不得不再次点击才能看到完整列表，这显著降低了用户体验。

解决方案：客户端Widget定制

要解决这个问题，我们需要深入到ZK的客户端渲染机制，通过重写JavaScript Widget的方法来改变其默认行为。具体来说，我们将修改Comboitem组件的doClick_方法，该方法负责处理Comboitem的点击事件。

ZK提供了强大的客户端Widget定制能力，允许开发者在不修改ZK核心库的情况下，扩展或修改现有组件的行为。

1. 后端数据模型准备

首先，在ZUL页面中准备Combobox所需的数据模型。这里我们创建两个ListModelList：一个包含部分数据（model1），另一个包含所有数据（fullModel）。model1中还包含一个特殊的“show more”选项。

在这个Zscript代码中：

• fullModel包含了所有可用的Locale。
• model1是fullModel的一个子集，并额外添加了“show more”字符串。
• combobox的onSelect事件绑定到loadAll()方法，当用户选择某个Comboitem时触发。
• loadAll()方法检查选中的是否是“show more”。如果是，则将combobox的模型更新为fullModel。

2. 客户端JavaScript定制

核心逻辑在于阻止Combobox在点击“show more”时关闭。这需要一个单独的JavaScript文件（例如comboitem-doclick.js）。

ChartGen

AI快速生成专业数据图表

下载

/**
 * 文件名: comboitem-doclick.js
 * 目的: 当用户选择特定项（如“show more”）时，保持Combobox弹出窗口打开。
 * 基于ZK版本: 9.6.3
 */
zk.afterLoad('zul.inp', function() {
    // 使用zk.override来扩展或修改现有Widget的方法
    zk.override(zul.inp.Comboitem.prototype, {}, {
        doClick_: function doClick_(evt) {
            // 确保Comboitem未被禁用
            if (!this._disabled) {
                var cb = this.parent; // 获取当前Comboitem的父级Combobox

                // 执行Combobox的选中逻辑
                cb._select(this, {
                  sendOnSelect: true, // 触发onSelect事件
                  sendOnChange: true  // 触发onChange事件
                });

                this._updateHoverImage(); // 更新悬停样式

                // 核心逻辑：如果选中的不是“show more”项，则关闭Combobox
                if (this.getLabel() != 'show more'){
                    cb.close({
                      sendOnOpen: true, // 触发onOpen事件（关闭时）
                      focus: true       // 关闭后将焦点设置回输入框
                    });
                }

                // 标记Combobox应关闭（尽管我们可能阻止了它）
                cb._shallClose = true;
                // 如果焦点需要保留，则重新聚焦到输入框
                if (zul.inp.InputCtrl.isPreservedFocus(this)) zk(cb.getInputNode()).focus();
                evt.stop(); // 阻止事件冒泡和默认行为
            }
        },
    });
});

代码解析：

• zk.afterLoad('zul.inp', function() { ... }); 确保在zul.inp模块（包含Comboitem）加载完成后再执行我们的定制代码，避免竞态条件。
• zk.override(zul.inp.Comboitem.prototype, {}, { ... }); 是ZK提供的用于覆盖Widget原型方法的API。
• doClick_: function doClick_(evt) { ... } 是我们重写的Comboitem点击事件处理方法。
• var cb = this.parent; 获取当前点击的Comboitem所属的Combobox实例。
• cb._select(...) 调用Combobox内部的选中逻辑，确保onSelect和onChange事件正常触发。
• if (this.getLabel() != 'show more') { cb.close(...); } 是关键所在。它检查当前Comboitem的标签。如果标签不是“show more”，则调用cb.close()方法关闭Combobox。否则，cb.close()不会被调用，Combobox将保持打开状态。
• evt.stop(); 阻止事件的默认行为和冒泡，防止Combobox执行其原生的关闭逻辑。

3. 引入JavaScript文件

最后，在ZUL页面中引入这个JavaScript文件：