jQWidgets jqxTreeGrid ready 属性

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

ready属性用于在渲染指定的 jqxTreeGrid 并完成数据绑定时调用的回调函数。

句法：

• 设置就绪属性：

  $('#treeGrid').jqxTreeGrid({ready:function()});

• 为了获得 准备好的财产：

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

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

示例：下面的示例说明了 jQWidgets jqxTreeGrid就绪属性。在下面的示例中，已为选择第二、第三和第四行设置了 ready 属性的值。

HTML

  

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        
            jQWidgets jqxTreeGrid ready 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,
                    ready: function () {
                        $("#jqxTreeGrid").jqxTreeGrid(
                            'selectRow', '2');
                        $("#jqxTreeGrid").jqxTreeGrid(
                            'selectRow', '3');
                        $("#jqxTreeGrid").jqxTreeGrid(
                            'selectRow', '4');
                    },
                    columns: [{
                        text: 'Employee_Name',
                        align: 'center',
                        dataField: 'Employee_Name',
                        width: 140
                    }, {
                        text: 'Company',
                        align: 'center',
                        dataField: 'Company',
                        width: 150
                    }, {
                        text: 'Designation',
                        align: 'center',
                        dataField: 'Designation',
                        width: 150
                    }]
                });
            });
        
    

  

输出：

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