在网格 zk 框架中对行进行分组

Question

我正在尝试使用以下代码将行分组到网格中。模型包含 pojo 类的列表。当我尝试在行下添加组时。正在填充行，但未显示组标签。如果我将组标签放在模板中，则会引发以下错误。

<grid id="returnEntries" mold="paging"
pageSize="5" width="100%" height="100%">
<columns>
<column width="12%" sclass="oms-widget-createreturnrequest-listbox-header">
<label value="${labels.customersupportbackoffice.createreturnrequest.productcode}"
width="100%"/>
</column>
<column width="10%" sclass="oms-widget-createreturnrequest-listbox-header">
<label value="${labels.customersupportbackoffice.createreturnrequest.productname}"
width="100%"/>
</column>
<column width="8%" sclass="oms-widget-createreturnrequest-listbox-header">
<label value="${labels.customersupportbackoffice.createreturnrequest.currency}"
width="100%"/>
</column>
<column width="8%" sclass="oms-widget-createreturnrequest-listbox-header">
<label value="${labels.customersupportbackoffice.createreturnrequest.itemprice}"
width="100%"/>
</column>
<column width="10%" sclass="oms-widget-createreturnrequest-listbox-header">
<label value="${labels.customersupportbackoffice.createreturnrequest.qtypending}" width="100%"
style="text-align: center;"/>
</column>
<column width="10%" sclass="oms-widget-createreturnrequest-listbox-header">
<label value="${labels.customersupportbackoffice.createreturnrequest.qtyrrefund}" width="100%"/>
</column>
<column width="12%" sclass="oms-widget-createreturnrequest-listbox-header">
<label value="${labels.customersupportbackoffice.createreturnrequest.refundamount}"
width="100%"/>
</column>
<column width="18%" sclass="oms-widget-createreturnrequest-listbox-header">
<combobox id="globalReason"
placeholder="${labels.customersupportbackoffice.createreturnrequest.popup.placeholder.reason}"
readonly="true"/>
</column>
<column width="20%" sclass="oms-widget-createreturnrequest-listbox-header">
<textbox id="globalComment" maxlength="255" width="97%" style="margin-bottom:4px"
placeholder="${labels.customersupportbackoffice.createreturnrequest.popup.placeholder.comment}"/>
</column>
<column width="8%" sclass="oms-widget-createreturnrequest-listbox-header">
<label value=""
width="100%"/>
</column>
</columns>
<rows>
<group label="refund" />
<template name="model">
<row>
<!-- <checkbox style="margin-left: 3px;"/> -->
<label value="${each.refundEntry.orderEntry.product.code}" width="100%"/>
<label value="${each.refundEntry.orderEntry.product.name}" width="100%"/>
<label value="${each.refundEntry.orderEntry.order.currency.isocode}" width="100%"
style="text-align:center;"/>
<label value="${each.refundEntry.orderEntry.basePrice}" width="100%" style="text-align:right;"/>
<label value="${each.returnableQuantity}" width="100%"
style="text-align:center;"/>
<intbox name="quantityToRefundBox" value="${each.quantityToRefund}" width="50%" style="margin-left: 25%;text-align: center;"
constraint="no empty,no negative: Quantity Must be Greater Than Zero" />
<doublebox value="${each.refundEntry.amount}" style="margin-left: 10%;text-align:right;" format="0.00"
constraint="no empty,no negative: Quantity Must be Greater Than Zero"/>
<combobox xmlns:w="client" w:onSelect="CockpitNG.sendEvent(this.uuid,'onCustomChange',this._value)"
model="${each.reasonsModel}" style="padding-right:4px;padding-left:4px;"
placeholder="${labels.customersupportbackoffice.createreturnrequest.popup.placeholder.reason}"
readonly="true">
<template name="model">
<comboitem label="${each}"/>
</template>
</combobox>
<textbox value="${each.refundEntryComment}" maxlength="255" width="93%" style="margin-left: 4px;"
placeholder="${labels.customersupportbackoffice.createreturnrequest.popup.placeholder.comment}"/>
<button width="100%"
label="Return"
sclass="oms-widget-createreturnrequest-configuration-button oms-widget-createreturnrequest-configuration-save-button"/>
</row>
</template>
</rows>
</grid>

模型具有 pojo 对象列表。当我尝试访问该页面时。它给出了以下错误。

ERROR [hybrisHTTP25] [UiEngineImpl]
org.zkoss.zk.ui.UiException: The model template must have exactly one 
row, not 2     

任何输入？

Answer 1

如果你看一下这个例子： https://www.zkoss.org/zkdemo/grid/grouping
你会注意到以下设置：

<rows>
<group label="Dell" />
<row>
<label value="Dell E4500 2.2GHz" style="padding-left:15px"/>
<label value="Intel Core 2 Duo" />
<label value="4GB RAM" />
<label value="$261.00" style="color:green" />
<label value="500GB" />
</row>
<group label="Compaq" />
<row>
<label value="Compaq SR5113WM" style="padding-left:15px" />
<label value="Intel Core Duo" />
<label value="2GB RAM" />
<label value="$279.00" style="color:green" />
<label value="160GB" />               
</row>

现在，带有 MVVM 的模板标签是这样的：

<template name="model" >
<row>
<label value="@bind(forEachStatus.index)" />
<label value="@bind(each.name)" />
</row>
</template>

因此，<rows>被<template>取代。
将其设置在<template>个以上的分组中。
将其设置在<template>之外，它被渲染在<rows>上方。

所以唯一的解决方案是像这样做一点：

<template name="model">
<zk if="${forEachStatus.index == 0}">
<group label="refund" />
</zk>
<row if ="${forEachStatus.index != 0}">
<cell>
<label value="${forEachStatus.index}" />
</cell>
<cell>
<label value="${each}" />
</cell>
</row>
</template>

并且不要忘记，在第一行需要一个 null 值，因为您的第一行不会被渲染。
原因是，如果您在模板中呈现两者，则会出现错误，指出您无法在模板中添加 2 行。

希望这有帮助。