在 WLISTBOX ZK 中选择行时如何将单元格设置为可编辑?
How to set a cell editable when row is selected in WLISTBOX ZK?
我想在 ZK 框架的 LISTBOX 中选择行时使特定单元格可编辑?
因为没有得到您想要 MVVM 或 MVC 的答案,所以我决定选择 MVVM。
Here is a working fiddle.
当 link 不再起作用时,我将在此处粘贴最重要的代码:
<listbox model="@load(vm.items)" selectedItem="@bind(vm.selected)" hflex="true" height="300px">
<listhead>
<listheader label="Name" width="80px"/>
<listheader label="Price" align="center" width="80px" />
<listheader label="Quantity" align="center" width="80px" />
</listhead>
<template name="model" var="item">
<listitem >
<listcell>
<label visible="@load(vm.selected ne item)" value="@load(item.name)" />
<textbox visible="@load(vm.selected eq item)" value="@bind(item.name)" />
</listcell>
<listcell>
<label visible="@load(vm.selected ne item)" value="@load(item.price)" />
<intbox visible="@load(vm.selected eq item)" readonly="true" value="@bind(item.price)" />
</listcell>
<listcell>
<label visible="@load(vm.selected ne item)" value="@load(item.quantity)" />
<intbox visible="@load(vm.selected eq item)" readonly="true" value="@bind(item.quantity)" />
</listcell>
</listitem>
</template>
</listbox>
稍微解释一下,如果使用以前的 ZK 8 可以使用它。
因此,如果所选项目等于 (eq
) 或不等于 (ne
) 到呈现的项目,我们会检查 zul。
然后我们更改该组件的可见性。
如果使用 ZK8 或更高版本,您可以使用 <if test="load(vm.selected eq item)">
.
有了这个,它与阴影元素一起工作,并且不会呈现不真实的条件(不在 DOM 中),而在与可见元素一起工作时,它将在 DOM.
中
使用早期 ZK8 中的 if
属性 只能与 ${}
表达式结合使用,MVVM 语法将不起作用。
因为它只是静态的,所以你不能用它来实时切换。
所以这就是我们需要使用 visible
属性的原因。
这是一个迟到的回复,但值得记录none。
在ZK的ADempiere实现中,WListbox使用WListBoxRenderer来渲染行和行中的所有单元格。每列的 class 被定义并应用于所有行,使行相同。 WListBoxRenderer 使用此 class 来确定使用哪个组件来显示字段以及使用哪个组件来编辑字段。只有在初始化 table 时将列定义为 read/write 时,编辑器才会启用。您可以使用 ColumnInfo 结构或通过如下所示的 setColumnClass() 和 setColumnReadWrite() 方法来执行此操作。
/**
* Set the attributes of the column.
*
* @param index The index of the column to be modified
* @param classType The class of data that the column will contain
* @param readOnly Whether the data in the column is read only
* @param header The header text for the column
*
* @see #setColumnClass(int, Class, boolean)
*/
public void setColumnClass (int index, Class classType, boolean readOnly, String header)
{
WListItemRenderer renderer = (WListItemRenderer)getItemRenderer();
setColumnReadOnly(index, readOnly);
renderer.setColumnHeader(index, header);
renderer.setColumnClass(index, classType);
if (index < m_modelHeaderClass.size())
m_modelHeaderClass.set(index, classType);
else
m_modelHeaderClass.add(classType);
return;
}
/**
* Set Column at the specified <code>index</code> to read-only or read/write.
*
* @param index index of column to set as read-only (or not)
* @param readOnly Read only value. If <code>true</code> column is read only,
* if <code>false</code> column is read-write
*/
public void setColumnReadOnly (int index, boolean readOnly)
{
Integer indexObject = new Integer(index);
// Column is ReadWrite
if (m_readWriteColumn.contains(indexObject))
{
// Remove from list
if (readOnly)
{
m_readWriteColumn.remove(indexObject);
} // ReadOnly
}
// current column is R/O - ReadWrite - add to list
else if (!readOnly)
{
m_readWriteColumn.add(indexObject);
}
return;
} // setColumnReadOnly
这是一个用于在付款分配表单中显示发票的示例。 IMiniTable 接口由 WListBox class 实现。请注意,其中三列设置为 readOnly=false,因此这些单元格是 table.
中的 editable
public void setInvoiceColumnClass(IMiniTable invoiceTable, boolean isMultiCurrency)
{
Vector<String> names = getInvoiceColumnNames(isMultiCurrency);
int i = 0;
invoiceTable.setKeyColumnIndex(i);
invoiceTable.setColumnClass(i, IDColumn.class, true, names.get(i++)); // 0-C_Invoice_ID
invoiceTable.setColumnClass(i, Timestamp.class, true, names.get(i++)); // 1-TrxDate
invoiceTable.setColumnClass(i, String.class, true, names.get(i++)); // 2-Value
if (isMultiCurrency)
{
invoiceTable.setColumnClass(i, String.class, true, names.get(i++)); // 3-Currency
invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++)); // 4-Amt
}
invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++)); // 5-ConvAmt
invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++)); // 6-ConvAmt Open
invoiceTable.setColumnClass(i, BigDecimal.class, false, names.get(i++)); // 7-Conv Discount
invoiceTable.setColumnClass(i, BigDecimal.class, false, names.get(i++)); // 8-Conv WriteOff
invoiceTable.setColumnClass(i, BigDecimal.class, false, names.get(i++)); // 9-Conv Applied
invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++)); // 10-Conv OverUnder
// Table UI
invoiceTable.autoSize();
}
我想在 ZK 框架的 LISTBOX 中选择行时使特定单元格可编辑?
因为没有得到您想要 MVVM 或 MVC 的答案,所以我决定选择 MVVM。
Here is a working fiddle.
当 link 不再起作用时,我将在此处粘贴最重要的代码:
<listbox model="@load(vm.items)" selectedItem="@bind(vm.selected)" hflex="true" height="300px">
<listhead>
<listheader label="Name" width="80px"/>
<listheader label="Price" align="center" width="80px" />
<listheader label="Quantity" align="center" width="80px" />
</listhead>
<template name="model" var="item">
<listitem >
<listcell>
<label visible="@load(vm.selected ne item)" value="@load(item.name)" />
<textbox visible="@load(vm.selected eq item)" value="@bind(item.name)" />
</listcell>
<listcell>
<label visible="@load(vm.selected ne item)" value="@load(item.price)" />
<intbox visible="@load(vm.selected eq item)" readonly="true" value="@bind(item.price)" />
</listcell>
<listcell>
<label visible="@load(vm.selected ne item)" value="@load(item.quantity)" />
<intbox visible="@load(vm.selected eq item)" readonly="true" value="@bind(item.quantity)" />
</listcell>
</listitem>
</template>
</listbox>
稍微解释一下,如果使用以前的 ZK 8 可以使用它。
因此,如果所选项目等于 (eq
) 或不等于 (ne
) 到呈现的项目,我们会检查 zul。
然后我们更改该组件的可见性。
如果使用 ZK8 或更高版本,您可以使用 <if test="load(vm.selected eq item)">
.
有了这个,它与阴影元素一起工作,并且不会呈现不真实的条件(不在 DOM 中),而在与可见元素一起工作时,它将在 DOM.
中
使用早期 ZK8 中的 if
属性 只能与 ${}
表达式结合使用,MVVM 语法将不起作用。
因为它只是静态的,所以你不能用它来实时切换。
所以这就是我们需要使用 visible
属性的原因。
这是一个迟到的回复,但值得记录none。
在ZK的ADempiere实现中,WListbox使用WListBoxRenderer来渲染行和行中的所有单元格。每列的 class 被定义并应用于所有行,使行相同。 WListBoxRenderer 使用此 class 来确定使用哪个组件来显示字段以及使用哪个组件来编辑字段。只有在初始化 table 时将列定义为 read/write 时,编辑器才会启用。您可以使用 ColumnInfo 结构或通过如下所示的 setColumnClass() 和 setColumnReadWrite() 方法来执行此操作。
/**
* Set the attributes of the column.
*
* @param index The index of the column to be modified
* @param classType The class of data that the column will contain
* @param readOnly Whether the data in the column is read only
* @param header The header text for the column
*
* @see #setColumnClass(int, Class, boolean)
*/
public void setColumnClass (int index, Class classType, boolean readOnly, String header)
{
WListItemRenderer renderer = (WListItemRenderer)getItemRenderer();
setColumnReadOnly(index, readOnly);
renderer.setColumnHeader(index, header);
renderer.setColumnClass(index, classType);
if (index < m_modelHeaderClass.size())
m_modelHeaderClass.set(index, classType);
else
m_modelHeaderClass.add(classType);
return;
}
/**
* Set Column at the specified <code>index</code> to read-only or read/write.
*
* @param index index of column to set as read-only (or not)
* @param readOnly Read only value. If <code>true</code> column is read only,
* if <code>false</code> column is read-write
*/
public void setColumnReadOnly (int index, boolean readOnly)
{
Integer indexObject = new Integer(index);
// Column is ReadWrite
if (m_readWriteColumn.contains(indexObject))
{
// Remove from list
if (readOnly)
{
m_readWriteColumn.remove(indexObject);
} // ReadOnly
}
// current column is R/O - ReadWrite - add to list
else if (!readOnly)
{
m_readWriteColumn.add(indexObject);
}
return;
} // setColumnReadOnly
这是一个用于在付款分配表单中显示发票的示例。 IMiniTable 接口由 WListBox class 实现。请注意,其中三列设置为 readOnly=false,因此这些单元格是 table.
中的 editablepublic void setInvoiceColumnClass(IMiniTable invoiceTable, boolean isMultiCurrency)
{
Vector<String> names = getInvoiceColumnNames(isMultiCurrency);
int i = 0;
invoiceTable.setKeyColumnIndex(i);
invoiceTable.setColumnClass(i, IDColumn.class, true, names.get(i++)); // 0-C_Invoice_ID
invoiceTable.setColumnClass(i, Timestamp.class, true, names.get(i++)); // 1-TrxDate
invoiceTable.setColumnClass(i, String.class, true, names.get(i++)); // 2-Value
if (isMultiCurrency)
{
invoiceTable.setColumnClass(i, String.class, true, names.get(i++)); // 3-Currency
invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++)); // 4-Amt
}
invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++)); // 5-ConvAmt
invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++)); // 6-ConvAmt Open
invoiceTable.setColumnClass(i, BigDecimal.class, false, names.get(i++)); // 7-Conv Discount
invoiceTable.setColumnClass(i, BigDecimal.class, false, names.get(i++)); // 8-Conv WriteOff
invoiceTable.setColumnClass(i, BigDecimal.class, false, names.get(i++)); // 9-Conv Applied
invoiceTable.setColumnClass(i, BigDecimal.class, true, names.get(i++)); // 10-Conv OverUnder
// Table UI
invoiceTable.autoSize();
}