mvvm - zk网格同一行中的几列

Question

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

我解释我的问题:

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

下一个屏幕截图显示了网格如何工作。即所需的方面:



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

    <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。