<h:dataTable> 设置样式:宽度,背景色

本文介绍如何使用JSF中的<h:dataTable>组件通过rowClasses和columnClasses属性来定制表格行和列的样式。具体包括交替使用不同背景色的行以及设置列宽和对齐方式。

 

 

组件<h:dataTable>中提供了rowClasses和columnClasses等。

          rowClasses 用来控制行的显示,,如果你在rowClasses中加入两个样式类,并使用逗号分开,那么渲染的每一行会交替使用这两个样式类进行显示,同理多个样式类也会循环交替显示。

          columnClasses用来控制每列的显示,用法同rowClasses

< h:dataTable  value ="#{userSubsysFroCentHistoryAction.froCentList}"  
                            var ="oneCentList"  
                            styleClass ="mxl"  
                            rowClasses ="list-row1-background ,list-row2-background"  
                           columnClasses ="list-column1-center,list-column2-center,list-column3-center,
                                                            list-column4-center,list-column5-center,list-column6-center" >
     
< h:column >
      
< f:facet  name ="header" >
       
< h:outputText  value ="时间"   />
      
</ f:facet >
       
< h:outputText  value ="#{oneCentList[0]}"   />
     
</ h:column >
     
< h:column >
       
< f:facet  name ="header" >
        
< h:outputText  value ="平台" />
       
</ f:facet >
       
< h:outputText  value ="#{oneCentList[1]}" />
     
</ h:column >
     
< h:column >
      
< f:facet  name ="header" >
       
< h:outputText  value ="得分" />
      
</ f:facet >
      
< h:outputText  value ="#{oneCentList[2]}"  rendered ="#{oneCentList[2]>=0}" />
     
</ h:column >
     
< h:column >
       
< f:facet  name ="header" >
        
< h:outputText  value ="扣分" />
       
</ f:facet >
       
< h:outputText  value ="#{oneCentList[2]}"  rendered ="#{oneCentList[2]<0}" />
     
</ h:column >
     
< h:column >
      
< f:facet  name ="header" >
       
< h:outputText  value ="剩余积分" />
      
</ f:facet >
      
< h:outputText  value ="#{oneCentList[3]}"   />
     
</ h:column >
     
< h:column >
      
< f:facet  name ="header" >
       
< h:outputText  value ="备注" />
      
</ f:facet >
      
< h:outputText  value ="#{oneCentList[4]}"   />
     
</ h:column >
 
</ h:dataTable >  

 其中Stype.css 中的样式定义如下:

    .mxl{width:674px;margin:0 auto;text-align:center;}   // 定义表格整体样式:宽度
   //  以下定义每列的样式
.list-column1-center {
  text-align: center;
  width: 21%;
}
.list-column2-center {
  text-align: center;
  width: 13%;
}
.list-column3-center {
  text-align: center;
  width: 12%;
}
.list-column4-center {
  text-align: center;
  width: 12%;
}
.list-column5-center {
  text-align: center;
  width: 12%;
}
.list-column6-center {
  text-align: center;
  width: 30%;
}

//  以下定义每行的样式
.list-row1-background{
  background:#FFFFFF;
}
.list-row2-background{
  background:#F1F1F1;
}

结果如图:

 

 

转 :jsf 的<t:dataTable>组件自定义控制指定行样式的方法 

          http://blog.youkuaiyun.com/icess_ma/archive/2007/10/24/1840957.aspx

 

 

 

JSF(JavaServer Faces)中,&lt;h:dataTable&gt;组件用于展示数据表格。如果你需要在JavaScript中获取当前页的数据,可以通过以下步骤实现: 1. **在JSF页面中设置数据表格的ID和行索引**: ```html &lt;h:dataTable id="dataTable" value="#{bean.items}" var="item"> &lt;h:column> &lt;f:facet name="header">Column 1&lt;/f:facet> &lt;h:outputText value="#{item.property1}" /> &lt;/h:column> &lt;h:column> &lt;f:facet name="header">Column 2&lt;/f:facet> &lt;h:outputText value="#{item.property2}" /> &lt;/h:column> &lt;!-- 其他列 --> &lt;/h:dataTable&gt; ``` 2. **在JavaScript中获取当前页的数据**: ```javascript function getCurrentPageData() { var dataTable = document.getElementById('dataTable'); var rows = dataTable.getElementsByTagName('tbody')[0].getElementsByTagName('tr'); var currentPageData = []; for (var i = 0; i &lt; rows.length; i++) { var cells = rows[i].getElementsByTagName('td'); var rowData = {}; for (var j = 0; j &lt; cells.length; j++) { var cell = cells[j]; var header = dataTable.getElementsByTagName('th')[j].innerText; rowData[header] = cell.innerText; } currentPageData.push(rowData); } console.log(currentPageData); } ``` 3. **在页面中添加一个按钮来触发JavaScript函数**: ```html &lt;h:commandButton value="Get Current Page Data" onclick="getCurrentPageData(); return false;" /> ``` 这样,当用户点击按钮时,JavaScript函数`getCurrentPageData`将会被调用,并获取当前页的数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值