zk 网格同一行中的几列

Question

我正在解决一个我不知道如何解决的 zk 网格问题。

我解释一下我的问题：

我需要创建一个显示 questions/answer 列表的网格，该网格的不同方法是我需要在同一行中显示两对 question/answer。

下一张截图展示了网格的工作原理；即期望的方面：

我尝试使用模板行来做到这一点：

    <template name="model"
                                        var="modeloIzquierda">
                                        <row>
                                                <label
                                                    class="${modeloIzquierda.procedencia}"
                                                    value="@bind(modeloIzquierda.pregunta)" width="50px"
                                                    if='${!modeloIzquierda.par}' />
                                                <textbox
                                                    style="border:none;"
                                                    value="@bind(modeloIzquierda.respuesta)"
                                                    onChanging="@command('respuestaOnChange', idPregunta=modeloIzquierda.idPregunta , respuesta=event.value)"
                                                    class="textboxcadm ${modeloIzquierda.procedencia}"
                                                    if='${modeloIzquierda.tipoPregunta eq "T" and !modeloIzquierda.par}' width="100%" />
                                                <combobox
                                                    value="@bind(modeloIzquierda.respuesta)"
                                                    onChanging="@command('respuestaOnChange', idPregunta=modeloIzquierda.idPregunta , respuesta=event.value)"
                                                    class="${modeloIzquierda.procedencia}"
                                                    if='${modeloIzquierda.tipoPregunta eq "E" and !modeloIzquierda.par}'
                                                    width="90px">
                                                    <comboitem
                                                        label="A" />
                                                    <comboitem
                                                        label="B" />
                                                    <comboitem
                                                        label="C" />
                                                </combobox>
                                                <checkbox
                                                    checked="@bind(modeloIzquierda.respuesta)"
                                                    onCheck="@command('respuestaOnChange',  idPregunta=modeloIzquierda.idPregunta , respuesta=self.checked)"
                                                    if='${modeloIzquierda.tipoPregunta eq "F" and !modeloIzquierda.par}'>
                                                </checkbox>
                                                <label 
                                                    class="${modeloIzquierda.procedencia}"
                                                    value="@bind(modeloIzquierda.pregunta)" width="50px" 
                                                    if='${modeloIzquierda.par}' />
                                                <textbox
                                                    style="border:none;"
                                                    value="@bind(modeloIzquierda.respuesta)"
                                                    onChanging="@command('respuestaOnChange', idPregunta=modeloIzquierda.idPregunta , respuesta=event.value)"
                                                    class="textboxcadm ${modeloIzquierda.procedencia}"
                                                    if='${modeloIzquierda.tipoPregunta eq "T" and modeloIzquierda.par}' width="100%" />
                                                <combobox
                                                    value="@bind(modeloIzquierda.respuesta)"
                                                    onChanging="@command('respuestaOnChange', idPregunta=modeloIzquierda.idPregunta , respuesta=event.value)"
                                                    class="${modeloIzquierda.procedencia}"
                                                    if='${modeloIzquierda.tipoPregunta eq "E" and modeloIzquierda.par}'
                                                    width="90px">
                                                    <comboitem
                                                        label="A" />
                                                    <comboitem
                                                        label="B" />
                                                    <comboitem
                                                        label="C" />
                                                </combobox>
                                                <checkbox
                                                    checked="@bind(modeloIzquierda.respuesta)"
                                                    onCheck="@command('respuestaOnChange',  idPregunta=modeloIzquierda.idPregunta , respuesta=self.checked)"
                                                    if='${modeloIzquierda.tipoPregunta eq "F" and modeloIzquierda.par}'>
                                                </checkbox>
                                        </row>
                                    </template>

'par' 属性指示元素（标签、组合框、文本框或复选框）是否必须出现在网格的左侧或右侧。

但不幸的是，这段代码无法按我的需要工作。我的代码的结果（即实际方面）：

如您所见，无论显示的是什么标签、文本框、组合框或复选框，网格都会为每个标签、文本框、组合框或复选框使用一个新行。

我不知道如何处理这个问题。我很感激任何帮助，欢迎任何解决方案。

Answer 1

有时很难（或不可能）用 zul 编写它。

这是一个如何使用 rowRenderer 实现此类目的的示例：

MyEnum.java :

public enum MyEnum {
    A(true),
    B(false),
    C(true),
    D(false),
    E(false);

    private boolean par;

    private MyEnum(boolean par) {
        this.par = par;
    }

    public boolean isPar() {
        return par;
    }
}

test.zul :

<?xml version="1.0" encoding="UTF-8"?>
<window apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('be.mil.web.TestVM')" >
    <grid model="@init(vm.model)" rowRenderer="be.mil.web.MyRowRenderer"/>
</window>

TestVM.java :

public class TestVM {
    public ListModel getModel() {
        return new ListModelList(MyEnum.values());
    }
}

MyRowRenderer.java :

public class MyRowRenderer implements RowRenderer<MyEnum>{

    @Override
    public void render(Row row, MyEnum t, int i) throws Exception {
        if (t.isPar()) {
            row.appendChild(new Label(String.valueOf(t)));
        } else {
            row.getPreviousSibling().appendChild(new Label(String.valueOf(t)));
            row.getParent().removeChild(row);
        }
    }

}

和with a fiddle so you can test it directly out.

zk 网格同一行中的几列

zk grid several columns in the same row

mvvm

zk

zul

MyEnum.java :

test.zul :

TestVM.java :

MyRowRenderer.java :