ZK MVVM模式下如何获取按钮所在Listitem并设置行样式

我来帮你搞定这个需求！首先得先修正你现有代码里的一个小问题——你的<template>里写了两个<listitem>，这会导致列表结构错乱，正确的写法应该是一个<listitem>包含多个<listcell>，每个单元格对应列表头的列。

接下来咱们一步步实现点击按钮后给对应行加样式的功能：

1. 修正ZUL页面的列表结构，传递必要参数 #

首先把你的列表模板调整成正确的结构，并且在按钮的onClick命令里传递当前的列表项（listitem）：

<listbox id="listbox" model="@bind(vm.myList) @template('items')">
    <listhead>
        <listheader hflex="3" label="Client" align="left" />
        <listheader hflex="3" label="show" align="left" />
    </listhead>
    <template name="items" var="item">
        <!-- 一个listitem对应一行，包含两个listcell -->
        <listitem value="@bind(item.client)">
            <listcell hflex="1" label="@bind(item.client)" />
            <listcell hflex="1">
                <!-- 点击时传递当前按钮所在的listitem到ViewModel -->
                <button label="show" onClick="@command('ShowClient', targetRow=self.parent.parent)" />
            </listcell>
        </listitem>
    </template>
</listbox>

这里的self.parent.parent是因为按钮嵌套在<listcell>里，<listcell>的父元素就是当前行的<listitem>，这样能直接获取到目标行对象。

2. 在ViewModel中处理命令，设置行样式 #

接下来在你的ViewModel类里，添加对应的@Command方法，接收传递过来的listitem，然后给它设置自定义样式：

import org.zkoss.zul.Listitem;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.Parameter;

public class YourViewModel {
    // 假设你已经定义了myList及对应的getter方法
    
    @Command
    public void ShowClient(@Parameter("targetRow") Listitem targetRow) {
        // 可选：移除之前高亮行的样式，避免多行同时高亮
        Listitem oldHighlightRow = (Listitem) targetRow.getParent().getAttribute("lastHighlightRow");
        if (oldHighlightRow != null) {
            oldHighlightRow.setSclass("");
            targetRow.getParent().removeAttribute("lastHighlightRow");
        }
        
        // 给当前点击的行设置自定义高亮样式
        targetRow.setSclass("client-row-highlight");
        targetRow.getParent().setAttribute("lastHighlightRow", targetRow);
        
        // 这里添加你弹出弹窗的业务逻辑
        // ...
    }
}

3. 定义CSS高亮样式 #

最后在你的样式文件里添加自定义的高亮样式：

.client-row-highlight {
    background-color: #f0f8ff;
    border-left: 4px solid #20a0ff;
}

额外提示 #

• 如果你觉得self.parent.parent这种层级写法不够优雅，也可以给<listitem>设置id，或者通过传递绑定的item数据对象，再在ViewModel里通过数据匹配找到对应的listitem，不过直接获取父元素的方式更直观。
• 如果需要实现点击切换高亮（点击一次高亮，再点击取消），可以在方法里判断当前行是否已经有高亮样式，然后做切换逻辑。

内容的提问来源于stack exchange，提问作者OddDev