headerShape
描述
可选。配置 Pivot 表格中表头的外观与行为
用法
headerShape?: {
collapsible?: boolean,
vertical?: boolean,
template?: (label: string, field: string, subLabel?: string) => string,
cellStyle?: (
field: string,
value: any,
area: "rows"|"columns"|"values",
method?: string,
isTotal?: boolean)
=> string,
};
参数
collapsible- （可选）若设置为 true，表格中的维度分组可折叠。默认值为 falsevertical- （可选）若设置为 true，将所有表头的文字方向从水平改为垂直。默认值为 falsecellStyle- （可选）一个为表头单元格应用自定义样式的函数。该函数返回 CSS 类名，并接受以下参数：field(string) - （必填）表示单元格对应字段名称的字符串。树形列的表头对应的字段为 ""value(string | number | date) - （必填）单元格的值area- （必填）表示单元格所在区域的字符串（"rows"、"columns" 或 "values" 区域）method(string) - （可选）一个字符串，可表示对 "values" 区域字段执行的操作（例如 "sum"、"count" 等），或对 "columns" 区域字段设置的谓词名称isTotal- （可选）定义单元格是否属于汇总列
template- （可选）定义表头文字的格式。默认情况下，作为行字段时显示label参数的值，作为值字段时显示标签和方法（例如 Oil(count)）。该函数接受字段 id、标签以及方法或谓词 id（如有），并返回处理后的值。默认模板如下：
template: (label, id, subLabel) =>
label + (subLabel ? ` (${subLabel})` : "")
示例
在以下示例中，values 字段的表头将显示标签和方法名称（subLabel），并将结果转换为小写（例如 profit (sum)）：
new pivot.Pivot("#pivot", {
data,
headerShape: {
// 自定义表头文字模板
template: (label, id, subLabel) => (label + (subLabel ? ` (${subLabel})` : "")).toLowerCase(),
},
config: {
rows: ["state", "product_type"],
columns: [],
values: [
{
field: "profit",
method: "sum"
},
{
field: "sales",
method: "sum"
},
// 其他值
],
},
fields,
});
相关示例：
相关文章：