jQWidgets jqxTreeGrid columns 属性

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

columns属性用于设置指定 jqxTreeGrid 的列。

有一个可以在 columns 属性内设置的属性列表：

• 文字：这是一个 用于设置列标题文本的字符串属性。
• dataField：这是一个字符串属性，用于设置列的绑定字段。
• displayField：这是一个字符串属性，用于设置列的显示字段。
• sortable：这是一个布尔属性，用于确定列是否可排序。
• filterable：这是一个布尔属性，用于确定列是否可过滤。
• hidden：这是一个布尔属性，用于确定列是可见还是隐藏。
• columnGroup：这是一个字符串属性，用于确定列的父组的名称。
• autoCellHeight：这是一个布尔属性，确定是否启用单元格的数据换行。
• renderer：这是一个用于自定义渲染列标题的回调函数。

句法：

$("#jqxTreeGrid").jqxTreeGrid({
    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/download/。在 HTML 文件中，找到下载文件夹中的脚本文件。

示例：下面的示例说明了 jQWidgets jqxTreeGrid列属性。

HTML

  

    
     
     
     
     
     
     
     
     
     

  

    
        
            GeeksforGeeks
        
        
            jQWidgets jqxTreeGrid columns 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(
                            'expandRow', '1');
                        $("#jqxTreeGrid").jqxTreeGrid(
                            'expandRow', '3');
                    },
                    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=