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。