Visualforce 页面中的 <apex: pageBlockTable> 组件

2025年03月17日 | 阅读 9 分钟

<apex: pageBlockTable> 组件是另一个常用的组件，它将数据列表显示在 <apex: pageBlock> 或 <apex: pageBlockSection> 组件内的表格中。

<apex: pageBlockTable> 通过迭代数据集来定义。<apex: pageBlockTable> 组件每行显示一条数据项的信息。数据集最多可以包含 1000 项，在只读模式下执行页面时最多可包含 10000 项。

我们可以在 <apex:pageBlockTable> 组件内指定多个列组件，以指定要为每条数据项显示哪些信息。

此组件通过 "html-" 前缀支持 HTML 传递属性。

<apex:pageBlockTable> 组件具有以下属性：

1. align

"align" 是一个字符串类型属性，用于指定呈现的 HTML 表格在页面上的位置。此属性的可能值为：

左
center
右

默认情况下，其值为 "left"（左对齐）。

语法

2. bgcolor

"bgcolor" 是一个字符串类型属性，用于指定背景颜色。但是，此属性在 Salesforce 18.0 版本中已弃用。

语法

3. border

"border" 是一个字符串类型属性，用于以像素为单位指定呈现的 HTML 表格边框的宽度。

语法

4. captionClass

"captionClass" 是一个字符串类型属性，用于指定显示呈现的 HTML 表格标题的样式类。

语法

5. captionStyle

"captionStyle" 是一个字符串类型属性，用于指定显示呈现的 HTML 表格标题的 CSS 样式规则。

语法

6. cellpadding

"cellpadding" 属性是一个字符串类型属性，用于定义每个表格单元格边框与其内容之间的空间量。

语法

7. cellspacing

"cellspacing" 属性是一个字符串类型属性，用于定义每个表格单元格边框与其周围其他单元格边框之间的空间量。其值可以是像素或百分比。

语法

8. columnClasses

"columnClasses" 属性是一个字符串类型属性，用于定义一个或多个样式类，以逗号分隔的列表形式关联到表格的列。

语法

9. columns

"columns" 是一个整数类型属性，用于定义此表格的列数。

语法

10. columnsWidth

"columnsWidth" 是一个字符串类型属性，用于定义应用于每个表格列的宽度，以逗号分隔的列表形式。值可以表示为像素

语法

11. dir

"dir" 是一个字符串类型属性，用于定义生成 HTML 组件的读取方向。RTL（从右到左）和 LTR（从左到右）是此属性的两个可能值。

语法

12. first

"first" 是一个整数类型属性，用于指示列表中可见渲染的迭代的第一个元素。由 value 属性指定的数据集中的第一个元素的索引是 0。

语法

13. footerClass

"footerClass" 是一个字符串类型属性，用于定义用于显示呈现的 HTML 表格页脚的样式类。当指定了 footer facet 时，将应用页脚类。

语法

14. frame

frame 是一个字符串类型属性，用于定义为此表格绘制的边框。其可能值为 "none"（无）、"above"（上）、"below"（下）、"hsides"（水平边）、"vsides"（垂直边）、"lhs"（左侧）、"rhs"（右侧）、"box"（框）和 "border"（边框）。

语法

15. headerClass

"headerClass" 是一个字符串类型属性，用于定义用于显示呈现的 HTML 表头样式类。当指定了 header facet 时，将应用表头类。

语法

16. id

"id" 属性是一个字符串类型属性，用于定义一个唯一的标识符，允许页面上的其他组件引用此组件。

语法

17. lang

"lang" 属性是一个字符串类型属性，用于定义生成 HTML 输出的基础语言。

语法

18. onclick

"onclick" 属性是一个字符串类型属性，用于在发生 onclick 事件或用户单击 pageBlockTable 时调用 JavaScript 方法。

语法

19. ondblclick

"ondblclick" 属性是一个字符串类型属性，用于在发生 ondblclick 事件或用户双击 pageBlockTable 时调用 JavaScript 方法。

语法

20. onkeydown

"onkeydown" 属性是一个字符串类型属性，用于在发生 onkeydown 事件或用户按下键盘键时调用 JavaScript 方法。

语法

21. onkeypress

"onkeypress" 属性是一个字符串类型属性，用于在发生 onkeypress 事件或用户按住或按下键盘键时调用 JavaScript 方法。

语法

22. onkeyup

"onkeyup" 属性是一个字符串类型属性，用于在发生 onkeyup 事件或用户释放键盘键时调用 JavaScript 方法。

语法

23. onmousedown

"onmousedown" 属性是一个字符串类型属性，用于在发生 onmousedown 事件或用户按下鼠标按钮时调用 JavaScript 方法。

语法

24. onmousemove

"onmousemove" 属性是一个字符串类型属性，用于在发生 onmousemove 事件或用户移动鼠标指针时调用 JavaScript 方法。

语法

25. onmouseout

"onmouseout" 属性是一个字符串类型属性，用于在发生 onmouseout 事件或用户将鼠标指针移出 pageBlockTable 时调用 JavaScript 方法。

语法

26. onmouseover

"onmouseover" 属性是一个字符串类型属性，用于在发生 onmouseover 事件或用户将鼠标指针移到数据表上方时调用 JavaScript 方法。

语法

27. onmouseup

"onmouseup" 属性是一个字符串类型属性，用于在发生 onmouseup 事件或用户释放鼠标按钮时调用 JavaScript 方法。

语法

28. onRowClick

"onRowClick" 属性是一个字符串类型属性，用于在发生 onRowClick 事件或用户单击 pageBlockTable 中的一行时调用 JavaScript 方法。

语法

29. onRowDblClick

"onRowDblClick" 属性是一个字符串类型属性，用于在发生 onRowDblClick 事件或用户双击 pageBlockTable 中的一行时调用 JavaScript 方法。

语法

30. onRowMouseDown

"onRowMouseDown" 属性是一个字符串类型属性，用于在发生 onRowMouseDown 事件或用户在数据表的某一行中按下鼠标按钮时调用 JavaScript 方法。

语法

31. onRowMouseMove

"onRowMouseMove" 属性是一个字符串类型属性，用于在发生 onRowMouseMove 事件或用户将鼠标指针移到 pageBlockTable 的一行上方时调用 JavaScript 方法。

语法

32. onRowMouseOut

"onRowMouseOut" 属性是一个字符串类型属性，用于在发生 onRowMouseOut 事件或用户将鼠标指针移出 pageBlockTable 的一行时调用 JavaScript 方法。

语法

33. onRowMouseOver

"onRowMouseOver" 属性是一个字符串类型属性，用于在发生 onRowMouseMove 事件或用户将鼠标指针移到 pageBlockTable 的一行上方时调用 JavaScript 方法。

语法

34. onRowMouseUp

"onRowMouseUp" 属性是一个字符串类型属性，用于在发生 onRowMouseUp 事件或用户在 pageBlockTable 的一行上方释放鼠标按钮时调用 JavaScript 方法。

语法

35. rendered

"rendered" 属性是一个布尔类型属性，用于指定此组件是否在页面上渲染。默认情况下，其值为 true。

语法

36. rowClasses

"rowsClasses" 属性是一个字符串类型属性，用于指定与表格行相关的一个或多个类。

语法

37. rows

"rows" 属性是一个整数类型属性，用于指定列表中要显示的最大项数。默认情况下，其值为 0，表示显示所有可能的列表项。

语法

38. rules

"rules" 属性是一个字符串类型属性，用于指定在表格单元格之间绘制的边框。其可能值为 "none"（无）、"groups"（组）、"rows"（行）、"cols"（列）和 "all"（全部），默认值为 "none"。

语法

39. style

"style" 是一个字符串类型属性，用于定义应用于数据列表组件的内联 CSS。

语法

40. styleClass

"styleClass" 是一个字符串类型属性，用于定义应用于数据列表组件的 CSS 类。

语法

41. summary

"summary" 是一个字符串类型属性，用于指定表格的目的和结构的摘要，以符合 Section 508 标准。

语法

42. title

"title" 是一个字符串类型属性，用于指定当用户鼠标指针悬停在此组件上时显示的文本。

语法

43. value

"value" 是一个对象类型属性，用于定义列表中显示的数据集合。

语法

44. var

"var" 是一个字符串类型属性，用于定义由 value 属性指定的数据集合中一个元素所代表的变量的名称。

语法

45. width

"width" 是一个字符串类型属性，用于定义整个表格的宽度，以相对于可用水平总空间的百分比表示。

语法

<apex: pageBlockTable> 组件具有以下三个 facet：

1. caption

表格标题中显示的组件。

2. footer（页脚）

表格页脚行中显示的组件。

3. header（页眉）

表格表头行中显示的组件。

让我们通过一个示例来了解如何在 Visualforce 页面上使用 <apex: pageBlockTable> 组件。

ApexPageBlockTableExample.vfp

<!-- create a Visualforce page for apex page block table with custom controller-->
<apex:page controller="ApexPageBlockTableController">
    <!-- apex form start-->
    <apex: form >
        <apex: pageBlock title="Account/Contact Information">
            
            <apex: pageBlockTable value="{!accList}" var="accRec" id="theTable1" rowClasses="odd,even" styleClass="tableClass" border="2px">
                <apex: facet name="caption">Account information</apex:facet>
                <apex: facet name="header">New Records:</apex:facet>
                
                <!--apex: column for displaying fields -->
                <apex: column >
                    <apex: facet name="header">Name</apex:facet>
                    <apex: outputText value="{!accRec.Name}"/>
                </apex: column>
                <apex: column >
                    <apex: facet name="header">Owner</apex:facet>
                    <apex: outputText value="{!accRec.owner.name}"/>
                </apex: column>
                <apex: column >
                    <apex: facet name="header">Account Number</apex:facet>
                    <apex: outputText value="{!accRec.AccountNumber}"/>
                </apex: column>
                <apex: column >
                    <apex: facet name="header">Phone</apex:facet>
                    <apex: outputText value="{!accRec.Phone}"/>
                </apex: column>
                <apex: column >
                    <apex: facet name="header">Rating</apex:facet>
                    <apex: outputText value="{!accRec.Rating}"/>
                </apex: column>
                <apex: column >
                    <apex: facet name="header">Website</apex:facet>
                    <apex: outputText value="{!accRec.Website}"/>
                </apex: column>
            </apex: pageBlockTable><br/>
            <!-- use apex: datatable with header and caption facet to display contact information-->
            <apex:pageBlockTable value="{!conList}" var="conRec" id="theTable2" rowClasses="odd,even" styleClass="tableClass" border="2px">
                <apex:facet name="caption">Contact information</apex:facet>
                <apex:facet name="header">New Records:</apex:facet>
                
                <!--apex: column for displaying fields -->
                <apex: column >
                    <apex:facet name="header">First Name</apex:facet>
                    <apex:outputText value="{!conRec.FirstName}"/>
                </apex: column>
                <apex: column >
                    <apex: facet name="header">Last Name</apex:facet>
                    <apex: outputText value="{!conRec.LastName}"/>
                </apex: column>
                <apex: column >
                    <apex: facet name="header">Owner</apex:facet>
                    <apex: outputText value="{!conRec.Owner.Name}"/>
                </apex: column>
                <apex: column >
                    <apex: facet name="header">Account Name</apex:facet>
                    <apex: outputText value="{!conRec.Account.Name}"/>
                </apex: column>
                <apex: column >
                    <apex: facet name="header">Email</apex:facet>
                    <apex: outputText value="{!conRec.Email}"/>
                </apex: column>
                <apex: column >
                    <apex: facet name="header">Phone</apex:facet>
                    <apex: outputText value="{!conRec.Phone}"/>
                </apex: column>
            </apex: pageBlockTable>
        </apex: pageBlock>
    </apex: form>
</apex: page>

ApexPageBlockTableController.apxc

// create ApexPageBlockTableController class to get a list of Accounts and Contacts
public class ApexPageBlockTableController {
    public List<account> accList{get;set;}
    public List<contact> conList{get;set;}
    
    //default constructor to get account and contact records
    public ApexPageBlockTableController(){
        accList = [select Id, Name, Owner.Name, Rating, Phone, AccountNumber, Website From Account Where Name != null AND Rating != null
                   AND Phone != null AND AccountNumber != null AND Website != null LIMIT 3];
        conList = [select Id, FirstName, LastName, Owner.Name, Account.Name, AccountId, Email, Phone From Contact Where FirstName != null AND LastName != null
                   AND AccountId != null AND Email != null AND Phone != null LIMIT 3];
    }
}

输出

apex: pageBlockTable Component in Visualforce Page

下一主题#

Visualforce 页面中的 <apex: pageBlockTable> 组件

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Visualforce Salesforce

Visualforce 页面中的 <apex: pageBlockTable> 组件

相关帖子

apex:logCallPublisher 组件

apex:insert 组件

apex:outputText 组件

创建第一个 Visualforce 页面

apex:pageMessages 组件

apex:inputField 组件

apex:emailPublisher 组件

apex:image 组件

apex:gaugeSeries 组件

apex:pageBlock 组件

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器