如何使用JSF

Question

如何獲得的佈局類似下面的使用h:selectOneRadio內rich:dataTable

row1 col1 col2 col3 

row2 radio1 radio1 radio1 

row3 radio2 radio2 radio2 

Answer 1

我認爲有三個方面這樣做的：

1. 使用戰斧<t:selectOneRadio>和<t:radio>組件，如Bozho所述。這是最簡單的解決方案。唯一的缺點是您必須將另一個組件庫集成到您的項目中（Tomahawk）。但是，該庫與其他庫相兼容，如Richfaces或Icefaces。

2. 爲此創建您自己的組件。這比以前的解決方案更加複雜，並且隨着Tomahawk庫已經提供該組件可能不是真的很有趣...

3. 使用「基本」 <h:selectOneRadio/>組件，然後使用Javascript代碼移動無線電元素，其中，你要。在我的項目中，我有一個包含複選框列表的彈出窗口，但我想將它們全部顯示在兩列中。不幸的是，<h:selectManyCheckbox>組件僅提供pageDirection和lineDirection佈局。因此，我決定使用pageDirection佈局顯示它們，然後使用Javascript處理生成的HTML代碼以將列表分成兩部分。

所以這是我做的JSF代碼：

<h:selectManyCheckbox id="rolesSelection" value="#{myRolesBean.selectedRoles}" layout="pageDirection"> 
    <f:selectItems value="#{myRolesBean.RolesList}"/> 
</h:selectManyCheckbox> 

<script type="text/javascript"> 
    splitElementsIntoTwoColumns("myForm\\:rolesSelection"); 
</script> 

以及JavaScript函數（使用jQuery，這是在Richfaces庫捆綁）：

function splitElementsIntoTwoColumns(tableId) { 
    var idx = 1; 
    var row, next; 
    while ((row = jQuery('#' + tableId + ' tr:nth-child(' + idx++ + ')')).length) { 
     if ((next = jQuery('#' + tableId + ' tr:nth-child(' + idx + ')')).length) { 
      row.append(next.find('td')); 
      next.remove(); 
     } 
    } 
} 

（更關於此代碼的解釋here）

在您的情況下，Jav ascript函數將很難寫入，因爲您要移動由<rich:datatable>生成的表格中的單選按鈕。

Answer 2

您可以使用封裝在一個表中獲取單選按鈕組功能的每一行戰斧的<t:selectOneRadio>與layout="spread"並放置一個<t:radio>在每個<rich:column>