WLISTBOX ZKで行が選択されているときにセルを編集可能に設定するにはどうすればよいですか？

Question

ZKフレームワークのWLISTBOXで行が選択されているときに、特定のセルを編集可能にしたいですか？

Answer 1

MVVMまたはMVCが欲しいという答えがなかったので、私はMVVMに行くことに決めました。

Here is a working fiddle.
私はリンクがもう動作してはならないときのために、ここで最も重要なコード貼り付けています：以前ZK 8を作業している場合、あなたがこれを使用することができ、

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

リトル解説を。
したがって、選択した項目が（eq）に等しいか、レンダリングされた項目と等しくない（）場合は、zulをチェックインします。
そのコンポーネントの可視性を変更します。
ZK8以上で動作している場合は<if test="load(vm.selected eq item)">を使用できます。
これはシャドウ要素と連携しており、真でないものは（DOMではなく）レンダリングされず、可視で作業する間はDOM内に表示されます。

のみを使用し${}表現と組み合わせて早期ZK8でif属性、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クラスによって実装されます。 3つの列は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(); 
}