ZK Combobox 动态内容加载与弹出菜单控制
ZK Framework 中的 Combobox 组件在默认情况下，当用户选择列表中的任一项目后，其下拉弹出菜单会自动关闭。这种行为对于大多数单选场景是合理的，但在某些特定交互模式下，例如当用户点击一个“显示更多”选项来动态加载或切换列表内容时，自动关闭会导致用户体验不佳，因为用户需要重新打开 Combobox 才能看到更新后的列表。本文将详细介绍如何通过客户端 Widget 定制来解决这一问题，实现点击特定项目后 Combobox 保持打开状态，并动态更新其模型。
问题分析
当 Combobox 被用于实现分段加载或切换列表视图（例如，一个简短列表带“显示更多”选项，点击后切换到完整列表）时，其默认行为会带来挑战。用户点击“显示更多”选项后，Combobox 会立即关闭，随后即使后端模型已更新，用户也无法立即看到完整列表，必须再次点击 Combobox 才能重新打开。这显然不是一个理想的用户体验。
ZK 组件的许多行为都由其对应的客户端 JavaScript Widget 控制。Comboitem 被点击时的关闭逻辑，正是由其客户端 Widget 的 doClick_() 方法触发的。因此，要改变这一行为，我们需要对该方法进行定制。
解决方案：客户端 Widget 定制
解决此问题的核心在于覆盖 Comboitem 客户端 Widget 的 doClick_() 方法。通过 zk.override 机制，我们可以在不修改 ZK 核心库的情况下，注入自定义逻辑来控制 Combobox 的关闭行为。
1. ZUL 页面与 ZScript 逻辑
首先，我们需要在 ZUL 页面中定义 Combobox，并准备好不同的数据模型。同时，通过 onSelect 事件监听用户选择，以便在服务器端处理模型切换。
<zscript><![CDATA[
import java.util.Locale;
import org.zkoss.zul.ListModelList;
// 完整数据模型，例如所有可用的语言环境
ListModelList fullModel = new ListModelList(Locale.getAvailableLocales());
// 初始简短模型，只包含前两个元素
ListModelList model1 = new ListModelList(fullModel.subList(0, 2));
// 添加“显示更多”选项
model1.add("显示更多");
// 定义 Combobox
// readonly="true" 防止用户手动输入，确保只能从列表中选择
// onSelect 监听选择事件，触发 loadAll 方法
// 引入自定义的 JavaScript 文件
]]></zscript>
<combobox id="box" model="${model1}" readonly="true" onSelect="loadAll()"/>
<script src="comboitem-doclick.js"/>
<zscript><![CDATA[
/**
* 当 Combobox 选中项改变时触发的回调方法。
* 如果选中“显示更多”选项，则切换 Combobox 的模型为完整模型。
*/
public void loadAll(){
// 检查当前选中项是否为“显示更多”
if (model1.getSelection().iterator().next().equals("显示更多")){
// 切换 Combobox 的模型为完整模型
box.setModel(fullModel);
// 清空当前 Combobox 的显示值，避免显示“显示更多”
box.setValue("");
}
}
]]></zscript>代码说明：
- fullModel 和 model1 分别代表完整列表和简短列表。model1 中额外添加了一个“显示更多”字符串作为特殊选项。
- combobox 组件绑定了 model1 作为初始模型，并设置 readonly="true" 防止用户随意输入。
- onSelect="loadAll()" 将选择事件委托给 ZScript 中的 loadAll 方法。
- loadAll() 方法负责判断如果用户选择了“显示更多”，则将 combobox 的模型切换为 fullModel，并清空 combobox 的当前显示值。
- <script src="comboitem-doclick.js"/> 是引入我们自定义 JavaScript 文件的关键。
2. 客户端 JavaScript 定制
创建 comboitem-doclick.js 文件，并放置在 ZUL 页面可访问的路径下。该文件将包含覆盖 Comboitem 默认 doClick_() 方法的逻辑。
/**
* 文件名: comboitem-doclick.js
* 目的: 当用户选择特定项时（例如“显示更多”），保持 Combobox 弹出菜单打开。
* 基于 ZK 版本: 9.6.3 (请根据实际使用的 ZK 版本进行验证和调整)
*/
zk.afterLoad('zul.inp', function() {
var exWidget = {}; // 用于存储原始方法，尽管在此例中我们不直接调用原始方法
zk.override(zul.inp.Comboitem.prototype, exWidget, {
/**
* 覆盖 Comboitem 的 doClick_ 方法，以控制 Combobox 的关闭行为。
* @param {zk.Event} evt 点击事件对象
*/
doClick_: function doClick_(evt) {
// 如果 Comboitem 未被禁用
if (!this._disabled) {
var cb = this.parent; // 获取父级 Combobox 组件
// 调用 Combobox 的 _select 方法，处理选中项的逻辑
// sendOnSelect: true 表示触发 onSelect 事件
// sendOnChange: true 表示触发 onChange 事件
cb._select(this, {
sendOnSelect: true,
sendOnChange: true
});
// 更新 hover 状态的图片（如果有的话）
this._updateHoverImage();
// 核心逻辑: 根据选中项的标签决定是否关闭 Combobox
// 如果选中项的标签不是 '显示更多'，则关闭 Combobox
if (this.getLabel() != '显示更多'){
cb.close({
sendOnOpen: true, // 在关闭时发送 onOpen 事件（如果需要）
focus: true // 关闭后将焦点设置回 Combobox 输入框
});
}
// 标记 Combobox 应该关闭（虽然我们在此处控制了关闭，但保留此行以兼容 ZK 内部逻辑）
cb._shallClose = true;
// 如果当前焦点应保留在此组件上，则将焦点设置回 Combobox 的输入节点
if (zul.inp.InputCtrl.isPreservedFocus(this)) zk(cb.getInputNode()).focus();
// 阻止事件的默认行为和冒泡，防止重复处理
evt.stop();
}
},
});
});代码说明：
- zk.afterLoad('zul.inp', ...)：确保在 zul.inp 模块加载完成后执行我们的定制代码，因为 Comboitem 定义在该模块中。
- zk.override(zul.inp.Comboitem.prototype, exWidget, {...})：这是 ZK 客户端 Widget 定制的核心 API。它允许我们覆盖 zul.inp.Comboitem 原型链上的方法。
- doClick_ 方法：
- cb._select(this, {sendOnSelect: true, sendOnChange: true})：这行代码确保了 Combobox 正常的选中逻辑被执行，包括触发服务器端的 onSelect 和 onChange 事件。
- if (this.getLabel() != '显示更多') { cb.close(...) }：这是关键的条件判断。只有当选中的 Comboitem 的标签不是“显示更多”时，我们才调用 cb.close() 方法来关闭 Combobox 的弹出菜单。如果标签是“显示更多”，则跳过 cb.close()，从而保持弹出菜单打开。
- evt.stop()：阻止事件的进一步传播，防止默认行为被执行，这对于确保我们的定制逻辑生效非常重要。
注意事项与最佳实践
- ZK 版本兼容性： 客户端 Widget 的内部实现可能在不同的 ZK 版本之间有所变化。上述代码是基于 ZK 9.6.3 版本编写的，如果您使用的是其他版本，可能需要根据 ZK 客户端 API 文档进行微调。建议在升级 ZK 版本后，重新测试并验证定制代码。
- 标签匹配： 在 JavaScript 代码中，我们通过 this.getLabel() != '显示更多' 来判断是否阻止关闭。这意味着“显示更多”这个字符串必须与 ZScript 中添加到 model1 的字符串完全一致。如果您的“显示更多”选项是 Comboitem 对象，您可能需要通过其他属性（如 getValue() 或自定义属性）来判断。
- 动态模型更新： 在 loadAll() 方法中，box.setModel(fullModel) 会触发 Combobox 重新渲染其列表。由于我们阻止了 Combobox 的关闭，用户将立即看到更新后的完整列表。
- 用户体验： 这种定制可以显著提升用户体验，避免不必要的交互步骤。但也要确保用户清楚地知道“显示更多”选项的作用，以及列表已更新的事实。
- 多选 Combobox 的区别： 问题中提到多选 Combobox 不会关闭。这是因为多选 Combobox 的设计目标就是允许用户选择多个项目而不中断选择流程，其 doClick_() 逻辑与单选 Combobox 有本质区别，不直接适用此解决方案。
- 代码组织： 建议将所有客户端定制代码组织到单独的 .js 文件中，并在 ZUL 页面中引用，以保持代码的整洁和可维护性。
总结
通过对 ZK Combobox 客户端 Comboitem Widget 的 doClick_() 方法进行定制，我们可以精确控制其弹出菜单的关闭行为。这种方法尤其适用于需要动态加载内容（如“显示更多”选项）而又不希望立即关闭弹出菜单的场景。掌握 ZK 的客户端 Widget 定制能力，能够帮助开发者实现更复杂、更符合用户需求的交互逻辑，从而构建出更强大、更灵活的 Web 应用。
