jQWidgets jqxPivotGrid treeStyleRows 属性介绍

简介

jQWidgets jqxPivotGrid 是一款基于 jQuery 的网页端交互式数据分析工具，具有多种功能和特性。其中 treeStyleRows 是一个用于控制行的样式是否树状显示的属性。

用法

treeStyleRows 属性用于控制是否要在行中呈现树形结构。可选值为布尔类型，即 true 和 false。当 treeStyleRows 设为 true 时，行将呈现树状结构；否则，行将呈现表格状。

要使用此属性，请在 pivotgridoptions 对象中指定 treeStyleRows 的值：

$("#myPivotGrid").jqxPivotGrid({
    treeStyleRows: true, // or false
    // other options
});

样式

当 treeStyleRows 设为 true 时，行的样式将按照树状结构显示。通常，每一个数据行都包含一个折叠按钮，可以展开或折叠其子行。例如：

+ Root Row
  + Sub Row 1
  + Sub Row 2

要自定义树状行的样式，请使用 jqxPivotGrid 的 CSS 样式类。以下是一些常见的样式类：

• jqx-grid-cell-pivot: 针对数据单元格应用的共同样式。
• jqx-grid-cell-tree-column: 用于树状列头的样式。
• jqx-grid-cell-tree-level-0, jqx-grid-cell-tree-level-1, jqx-grid-cell-tree-level-2, ...: 用于树状行的样式。其中，数字表示该行所在的层数（从 0 开始）。

示例

以下代码演示了如何使用 treeStyleRows 属性，以及如何自定义树状行的样式：

$("#myPivotGrid").jqxPivotGrid({
    treeStyleRows: true,
    source: myDataSource,
    rows: [{ dataField: "Region" }, { dataField: "City" }],
    columns: [{ dataField: "Year" }],
    values: [{ dataField: "SaleAmount", summaryType: "sum", formatSettings: { decimalPlaces: 0 } }],
});

.jqx-grid-cell-tree-level-0 {
    background-color: #f3f3f3;
}

.jqx-grid-cell-tree-level-1 {
    background-color: #e6e6e6;
}

.jqx-grid-cell-tree-level-2 {
    background-color: #d9d9d9;
}

参考文献

• jQWidgets jqxPivotGrid TreeStyleRows Docs