如何在JSF中凍結表頭的頭部

在我的JSF 2.1項目中，我使用了一個我有問題的表頭。如果我爲表頭和數據使用單個表格，則標題將與數據一起滾動。如何在JSF中凍結表頭的頭部

如果我使用單獨的表頭和數據我有對齊問題。

那麼，有沒有標籤或任何可能的方式使用單表頭和數據凍結頭？

2012-11-11 user1510044

最好有獨立的數據和表頭。處理校準問題。你可以使用width屬性來修復對齊方式。我不認爲你可以使用單個表格修復頭部。 –

@MukulGoel記住JSF只會生成純HTML，而OP所要求的是HTML特性。查看我的答案，看看OP的要求可以與JSF混合使用。 –

有一個很好的答案，這爲HTML：HTML table with fixed headers?。你只需要記住JSF將生成純HTML。從這個答案適應的代碼，它配備了該解決方案（注意：您需要添加CDATA驗證，以便在JavaScript Facelets中使用「<」和「>」）：

<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://java.sun.com/jsf/facelets"> 
    <h:head> 
     <title>Table Body Scroll Test</title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"> 
     </script> 

     <script> 
     /* <![CDATA[ */ 
      function scrolify(tblAsJQueryObject, height) { 
       var oTbl = tblAsJQueryObject; 
       // for very large tables you can remove the four lines below 
       // and wrap the table with <div> in the mark-up and assign 
       // height and overflow property 
       var oTblDiv = $("<div/>"); 
       oTblDiv.css('height', height); 
       oTblDiv.css('overflow','scroll'); 
       oTbl.wrap(oTblDiv); 
       // save original width 
       oTbl.attr("data-item-original-width", oTbl.width()); 
       oTbl.find('thead tr td').each(function() { 
        $(this).attr("data-item-original-width",$(this).width()); 
       }); 
       oTbl.find('tbody tr:eq(0) td').each(function() { 
        $(this).attr("data-item-original-width",$(this).width()); 
       }); 
       // clone the original table 
       var newTbl = oTbl.clone(); 
       // remove table header from original table 
       oTbl.find('thead tr').remove(); 
       // remove table body from new table 
       newTbl.find('tbody tr').remove(); 
       oTbl.parent().parent().prepend(newTbl); 
       newTbl.wrap("<div/>"); 
       // replace ORIGINAL COLUMN width 
       newTbl.width(newTbl.attr('data-item-original-width')); 
       newTbl.find('thead tr td').each(function() { 
        $(this).width($(this).attr("data-item-original-width")); 
       }); 
       oTbl.width(oTbl.attr('data-item-original-width')); 
       oTbl.find('tbody tr:eq(0) td').each(function() { 
        $(this).width($(this).attr("data-item-original-width")); 
       }); 
      } 

      $(document).ready(function() { 
       scrolify($('#tblNeedsScrolling'), 160); // 160 is height 
      }); 
     /* ]]> */ 
     </script> 
    </h:head> 
    <h:body> 
     <h:form id="myForm" prependId="false"> 
      <div style="width:300px;border:6px green solid;"> 
       <h:dataTable id="tblNeedsScrolling" value="#{tableScroll.data}" var="data" border="1" width="100%"> 
        <h:column> 
         <f:facet name="header"> 
          <h:outputText value="Data" /> 
         </f:facet> 
         <h:outputText value="#{data}" /> 
        </h:column> 
       </h:dataTable> 
      </div> 
     </h:form> 
    </h:body> 
</html>

託管bean例如：

@ManagedBean 
@RequestScoped 
public class TableScroll { 
    private List<String> data; 
    public TableScroll() { 
     data = new ArrayList<String>(); 
     for(int i = 1; i <= 20; i++) { 
     data.add("Name" + i); 
     } 
    } 

    public List<String> getData() { 
     return data; 
    } 

    public void setData(List<String> data) { 
     this.data = data; 
    } 
}

來源

2012-11-11 18:24:46

+1：簡單的概念（jsf會生成html），很棒的應用。 –

如何在JSF中凍結表頭的頭部

回答

相關問題