jQWidgets jqxTreeGrid pageSizeOptions 属性

jQWidgets 是一个 JavaScript 框架，用于为 PC 和移动设备制作基于 Web 的应用程序。它是一个非常强大、经过优化、独立于平台且得到广泛支持的框架。这 jqxTreeGrid用于以树状结构表示数据。此小部件可用于显示多列分层数据、数据分页、排序和过滤、数据编辑、列大小调整、固定列、条件格式、聚合和行选择。这些小部件还从任何类型的数据源（例如 XML、JSON、Array、CSV 或 TSV）读取和显示数据。

这 pageSizeOptions属性用于设置或获取指定 jqxTreeGrid 的页面大小选项。当pageable属性的值设置为 true 并且pagerMode属性的值设置为 'advanced' 时，此属性将有效。

句法：

• 设置pageSizeOptions属性：

  $('#treeGrid').jqxTreeGrid({ 
      pageSizeOptions: ['1', '2', '3', '4'] 
  });  

• 用于获取pageSizeOption的属性。：

  var pageSizeOptions = 
      $('#treeGrid').jqxTreeGrid('pageSizeOptions'); 

链接文件：从给定链接下载 https://www.jqwidgets.com/download/。在 HTML 文件中，找到下载文件夹中的脚本文件。

示例：下面的示例说明了 jQWidgets jqxTreeGrid pageSizeOptions属性。在下面的示例中， pageSizeOptions属性的值已设置为 ['1', '2', '3', '4']。

HTML

  

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    

    
        
            GeeksforGeeks
        
        
            jQWidgets jqxTreeGrid pageSizeOptions Property
        
  
        
        
  
        
  
        
  
        
  
            $(document).ready(function () {
                var A = [{
                    "ID": 1,
                    "Employee_Name": "Amit",
                    "Company": "GeeksforGeeks",
                    "Designation": "Content Writer",
                    "expanded": true,
                    A1: [{
                        "ID": 2,
                        "Employee_Name": "Sumit",
                        "Company": "Amazon",
                        "Designation": "Software Engineer",
                    }, {
                        "ID": 3,
                        "Employee_Name": "Vivek",
                        "Company": "Apple",
                        "Designation": "Product Manager",
                        "expanded": true,
                        A1: [{
                            "ID": 4,
                            "Employee_Name": "Soni",
                            "Company": "Flipkart",
                            "Designation": "HR",
                        }]
                    }]
                }];
  
                var Data_Source = {
                    dataFields: [{
                        name: 'ID'
                    }, {
                        name: 'Employee_Name'
                    }, {
                        name: 'Company'
                    }, {
                        name: 'Designation'
                    }, {
                        name: 'A1',
                        type: 'array'
                    }, {
                        name: 'expanded'
                    }],
                    hierarchy: {
                        root: 'A1'
                    },
                    id: 'ID',
                    localData: A,
                };
  
                var Data = new
                    $.jqx.dataAdapter(Data_Source);
  
                $("#jqxTreeGrid").jqxTreeGrid({
                    source: Data,
                    pageable: true,
                    pageSize: 1,
                    pagerMode: 'advanced',
                    pageSizeOptions: ['1', '2',
                        '3', '4'],
                    ready: function () {
                        $("#jqxTreeGrid").jqxTreeGrid(
                            'expandRow', '1');
                        $("#jqxTreeGrid").jqxTreeGrid(
                            'expandRow', '3');
                    },
                    columns: [{
                        text: 'Employee_Name',
                        align: 'center',
                        dataField: 'Employee_Name',
                        width: 145
                    }, {
                        text: 'Company',
                        align: 'center',
                        dataField: 'Company',
                        width: 155
                    }, {
                        text: 'Designation',
                        align: 'center',
                        dataField: 'Designation',
                        width: 155
                    }]
                });
                $("#jqxbutton_for_pageSizeOptions").
                    jqxButton({
                        width: 310
                    });
                      
                $('#jqxbutton_for_pageSizeOptions').
                    click(function () {
                        var value_of_pageSizeOptions =
                            $('#jqxTreeGrid').
                                jqxTreeGrid(
                                    'pageSizeOptions');
                        $("#log").html(JSON.stringify(
                            value_of_pageSizeOptions))
                    });
            });
        
    

  

输出：

参考： https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxtreegrid/jquery-treegrid-api.htm?search=