博客

jQWidgets jqxTreeGrid的渲染属性

  • Post category:jquery

以下是关于 jQWidgets jqxTreeGrid 组件中渲染属性的详细攻略。

jQWidgets jqxTreeGrid 渲染属性

jQWidgets jqxTreeGrid 组件提供了多个渲染属性，用于控制 TreeGrid 控件的外观和行为。是一些常用的渲染属性：

  • altRows：指定是否为 TreeGrid 控件的奇数行添加交替样式。
  • columnsHeight：指定 TreeGrid 控件的列高度。
  • columnsResize：指定是否允许用户调整 TreeGrid 控件的列宽度。
  • columnsReorder：指定是否允用户重新排序 TreeGrid 控件的列。
  • filterable：指定是否启用 TreeGrid 控件的过滤器。
  • pageable：指定是否启用 TreeGrid 控件的分页器。
  • pagerMode：指定 TreeGrid 控件的分页器模式。
  • pagerButtonsCount：指定 TreeGrid 控件的分页器按钮数量。
    -Renderer：指定 TreeGrid 控件的分页器渲染器。
  • pagerHeight：指定 TreeGrid 控件的分页器高度。
  • pagerPosition：指定 TreeGrid 控件的分页器位置。
  • pagerSizeOptions：指定 TreeGrid 控件分页器大小选项。
  • sortable：指定是否启用 TreeGrid 控件的排序器。
  • showToolbar：指定是否显示 TreeGrid 控件的工具栏。
  • toolbarHeight：指定 TreeGrid 控件的工具栏高度。
  • toolbarRenderer：指定 TreeGrid 控件的工具栏渲染器。

语法

$('#treegrid').jqxTreeGrid({
    altRows: true,
    columnsHeight: 30,
    columnsResize: true,
    columnsReorder: true,
    filterable: true,
    pageable: true,
    pagerMode: 'advanced',
    pagerButtonsCount: 10,
    pagerRenderer: null,
    pagerHeight: 30,
    pagerPosition: 'bottom',
    pagerSizeOptions: ['10', '20', '50'],
    sortable: true,
    showToolbar: true,
    toolbarHeight: 30,
    toolbarRenderer: null
});

示例

以下两个示例演示了如何使用渲染属性。

示例 1

// 启用过滤器和排序器
$('#treegrid').jqxTreeGrid({
    filterable: true,
    sortable: true
});

在示例 1 中，我们使用 filterable 和 sortable 渲染属性启用 TreeGrid 控件的过滤器和排序器。

示例 2

// 启用分页器和工具栏
$('#treegrid').jqxTreeGrid({
    pageable: true,
   Toolbar: true
});

在示例 2 中，我们使用 pageable 和 showToolbar 渲染属性启用 TreeGrid 控件的分页器和工具栏。

总之，渲染属性可以让您控制 TreeGrid 控件的外观和行为。将其与其他属性一起使用，以实现更复杂的 TreeGrid 控件配置。

Tags: