jQWidgets jqxTreeGrid 控件的 pagerMode 属性

简介

jQWidgets jqxTreeGrid 控件是一款基于 jQuery 的树形表格控件，pagerMode 属性是用来定义分页模式的属性。

分页模式包括：默认模式、简单模式和高级模式。

属性说明

默认模式 (默认值)

• pagerMode: 'default'
• 在默认模式下，TreeGrid 显示所有数据，而不分页。

简单模式

• pagerMode: 'simple'
• 在简单模式下，TreeGrid 会按照每页显示的行数将数据分页显示。用户可以通过简单的控件界面翻页或跳页。

高级模式

• pagerMode: 'advanced'
• 在高级模式下，TreeGrid 会按照每页显示的行数将数据分页显示。此外，还有一些额外的选项供用户选择。

代码示例

默认模式

$("#jqxTreeGrid").jqxTreeGrid({
  pagerMode: 'default',
  source: dataAdapter,
  columns: [
    { text: "任务名称", dataField: "taskName", width: 280 },
    { text: "执行情况", dataField: "status", width: 100 },
    { text: "开始时间", dataField: "startTime", width: 200 },
    { text: "结束时间", dataField: "endTime", width: 200 },
    { text: "备注", dataField: "note" }
  ]
});

简单模式

$("#jqxTreeGrid").jqxTreeGrid({
  pagerMode: 'simple',
  pageable: true,
  pageSize: 10,
  pagerButtonsCount: 10,
  source: dataAdapter,
  columns: [
    { text: "任务名称", dataField: "taskName", width: 280 },
    { text: "执行情况", dataField: "status", width: 100 },
    { text: "开始时间", dataField: "startTime", width: 200 },
    { text: "结束时间", dataField: "endTime", width: 200 },
    { text: "备注", dataField: "note" }
  ]
});

高级模式

$("#jqxTreeGrid").jqxTreeGrid({
  pagerMode: 'advanced',
  pageable: true,
  pagerPosition: "both",
  pageSize: 10,
  pagerButtonsCount: 10,
  rowsHeight: 34,
  columnsHeight: 34,
  filterable: true,
  columnsResize: true,
  source: dataAdapter,
  columns: [
    { text: "任务名称", dataField: "taskName", width: 280 },
    { text: "执行情况", dataField: "status", width: 100 },
    { text: "开始时间", dataField: "startTime", width: 200 },
    { text: "结束时间", dataField: "endTime", width: 200 },
    { text: "备注", dataField: "note" }
  ]
});

总结

通过设置 pagerMode 属性，可以灵活地控制树形表格的分页模式。除了默认模式外，还可以选择简单模式和高级模式，以更好地展示数据。开发者可以根据需求进行选择。