如何在WLISTBOX ZK中選擇行時設置單元格可編輯？

Question

我想在ZK框架中的WLISTBOX中選擇行時使特定的單元格可編輯？

Answer 1

因爲沒有你想要的答案，所以我決定使用MVVM或MVC。

Here is a working fiddle.
我在這裏貼的最重要的代碼，當鏈路不應該再工作：

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

使用if屬性在ZK8早期僅在${}表達式相結合，MVVM語法將無法正常工作。
因爲它只是靜態的，所以不能用它來實時切換。
所以這就是我們需要使用visible屬性的原因。

Answer 2

這是一個遲到的迴應，但值得一記錄。

在ZK的ADempiere實現中，WListbox使用WListBoxRenderer渲染行中的行和所有單元格。每列的類都定義並應用於所有行，使行相同。 WListBoxRenderer使用此類來確定要使用哪個組件來顯示字段以及使用哪個組件來編輯該字段。編輯器僅在列初始化時定義爲讀/寫時啓用。您可以使用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類實現。請注意，其中三列設置爲readOnly = false，因此這些單元格可在表中進行編輯。

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(); 
}