📅 最后修改于: 2023-12-03 15:02:21.836000 🧑 作者: Mango
jQWidgets jqxTreeGrid 是一款基于 jQuery 的插件，用于实现树形表格的功能。使用 jqxTreeGrid 可以展示具有层级关系的数据，同时支持排序和过滤，非常适用于需要展示复杂数据的场合。通过设置 jqxTreeGrid 的主题属性，可以控制表格的样式，让其更符合现代化的需求。
以下是 jqxTreeGrid 支持的主题属性列表，可以通过设置这些属性，调整表格的样式。
| 属性名称 | 描述 | | -------------------- | ------------------------------------------------------------ | | altRows | 如果设置为 True，每行将使用不同的颜色（即，交替行）。 | | autoRowHeight | 如果设置为 True，则在每个表格单元格中自动调整行高。默认值为 False。 | | columnsHeight | 定义树形网格标题行和过滤器行的高度。默认值为 30px。 | | columnsResize | 如果设置为 True，则启用树形网格的列调整器。默认值为 False。 | | columnsReorder | 如果设置为 True，则启用列重新排序功能。默认值为 False。 | | disabled | 如果设置为 True，则禁用树形网格。默认值为 False。 | | editable | 如果设置为 True，则启用树形网格编辑。默认值为 False。 | | editSettings | 可以启用编辑功能，并定义编辑类型，默认显示的编辑器、编辑模式（单元格、行）。 | | filterMode | 选择过滤器模式：简单或高级。默认值为 "simple"。 | | filterable | 如果设置为 True，则启用树形网格过滤器。默认值为 False。 | | initRowDetails | 如果设置为 True，则初始化行的详细信息，否则会延迟加载详细信息。默认值为 False。 | | pagerHeight | 定义树形网格分页器的高度。默认值为 28px。 | | pagerMode | 定义分页器模式。可选值为 "default"、"advanced" 或 "simple"，默认值为 "default"。 | | pagerPosition | 定义分页器的显示位置。可选值为 "near" 或 "far"，默认值为 "far"。 | | pageSize | 定义每个分页的行数。默认值为 10。 | | pageSizeOptions | 定义分页器中可以选择的值，例如 [5, 10, 20]。默认值为 [5, 10, 20，"所有"]。 | | ready | 定义一个回调函数，在表格准备完毕（例如，数据加载完成）后执行。 | | rowDetails | 定义行的详细信息。默认值为 ""。 | | rowDetailsRenderer | 定义行详细信息渲染器函数。默认值为 null。 | | rowDetailsTemplate | 定义行的详细信息模板。默认值为 ""。 | | selectionMode | 定义选择模式。可选值为 "none"（无选择），"single"（单选）和 "multi"（多选），默认值为 "none"。 | | showHeader | 如果设置为 True，则显示树形网格的标题和过滤器行。默认值为 True。 | | showSubAggregates | 如果设置为 True，则显示子行汇总。默认值为 False。 | | sortable | 如果设置为 True，则启用树形网格排序。默认值为 False。 | | theme | 定义树形网格的主题。默认值为 "classic"。 | | virtualMode | 如果设置为 True，则启用虚拟模式，用于大规模数据集。默认值为 False。 | | width | 定义树形网格的宽度。默认值为 "100%"。 |
可以通过两种方法设置 jqxTreeGrid 的主题属性。一种是直接通过 HTML 标签的 data- 属性设置，例如：
<div id="treeGrid" data-theme="material">
上述代码定义了一个 ID 为 "treeGrid" 的 jqxTreeGrid，并设置其主题为 "material"。
还可以使用 JavaScript 代码对主题属性进行设置，例如：
$('#treeGrid').jqxTreeGrid({
theme: 'material'
});
上述代码使用 jQuery 选择器选中了 ID 为 "treeGrid" 的 jqxTreeGrid，并设置其主题为 "material"。
下面是一段完整的 HTML 代码，展示如何创建一个主题为 "material" 的 jqxTreeGrid。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Theme demo</title>
<!-- 引入 jQWidgets 样式文件 -->
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<!-- 引入 jQWidgets 插件文件 -->
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
</head>
<body>
<div id="treeGrid"></div>
<script>
$(document).ready(function () {
// 创建并设置 jqxTreeGrid 对象
$('#treeGrid').jqxTreeGrid({
width: '100%',
columns: [
{ text: 'Employee Name', dataField: 'name', width: '30%' },
{ text: 'Title', dataField: 'title', width: '30%' },
{ text: 'Hire Date', dataField: 'hireDate', cellsFormat: 'd', width: '20%' },
{ text: 'Total Sales', dataField: 'sales', cellsFormat: 'c2', width: '20%' }
],
source: dataSource,
theme: 'material'
});
});
// 定义数据源
var dataSource = {
dataType: 'json',
dataFields: [
{ name: 'id', type: 'number' },
{ name: 'name', type: 'string' },
{ name: 'title', type: 'string' },
{ name: 'hireDate', type: 'date' },
{ name: 'sales', type: 'number' }
],
hierarchy:
{
keyDataField: { name: 'id' },
parentDataField: { name: 'parentId' }
},
id: 'id',
localData: [
{ id: 1, name: 'Andrew Fuller', title: 'Sales Manager', hireDate: '1992-08-14', sales: 24200, parentId: null },
{ id: 2, name: 'Nancy Davolio', title: 'Sales Representative', hireDate: '1992-05-01', sales: 17400, parentId: 1 },
{ id: 3, name: 'Michael Suyama', title: 'Sales Representative', hireDate: '1993-10-17', sales: 30000, parentId: 1 },
{ id: 4, name: 'Robert King', title: 'Sales Representative', hireDate: '1994-01-02', sales: 21900, parentId: 1 },
{ id: 5, name: 'Laura Callahan', title: 'Sales Coordinator', hireDate: '1994-03-05', sales: 10800, parentId: 1 },
{ id: 6, name: 'Anne Dodsworth', title: 'Sales Representative', hireDate: '1994-11-15', sales: 21700, parentId: 1 },
{ id: 7, name: 'Andrew Smith', title: 'Sales Representative', hireDate: '1996-09-17', sales: 18000, parentId: 2 },
{ id: 8, name: 'Steven Buchanan', title: 'Sales Representative', hireDate: '1997-03-02', sales: 17500, parentId: 2 },
{ id: 9, name: 'Janet Leverling', title: 'Sales Coordinator', hireDate: '1998-04-01', sales: 16700, parentId: 2 },
{ id: 10, name: 'Margaret Peacock', title: 'Sales Representative', hireDate: '1994-09-19', sales: 19800, parentId: 3 },
]
};
</script>
</body>
</html>
上述代码创建了一个宽度为 100% 的 jqxTreeGrid，其主题为 "material"。同时定义了一个简单的数据源来填充表格内容。您可以将这段代码拷贝到任意网页中并运行，来查看效果。