jQWidgets jqxTreeGrid 排序事件

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

当指定jqxTreeGrid的排序顺序或排序列发生变化时触发排序事件。

句法：

$('#treeGrid').on('sort', function (event) {
    var args = event.args;
    // column's data field.
    var sortcolumn = args.sortcolumn;  
    // sort order:
    // { 'ascending': true or false,
    //   'descending': true or false }
    var sortdirection = args.sortdirection;
});

链接文件：从给定链接下载 jQWidgets。在 HTML 文件中，找到下载文件夹中的脚本文件。

下面的示例说明了 jQWidgets jqxTreeGrid排序事件。

例子：

HTML

  

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

  

    
        
            GeeksforGeeks
        
        
            jQWidgets jqxTreeGrid sort Event
        
        
        
        
        
            $(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,
                    sortable: true,
                    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
                    }]
  
                });
                $('#jqxTreeGrid').on('sort', function (event) {
                    var Arguments = event.args;
                    var Sort_Direction = Arguments.sortdirection;
                    var Column_Sorting = Arguments.sortcolumn;
                    var Sorting_Order = Sort_Direction.ascending ?
                        "Ascending" : "Descending";
                    $("#log").html(JSON.stringify("Sorting_Column: " +
                        Column_Sorting + ", Sorting_Order: "
                                                  + Sorting_Order))
                });
  
            });
        
    

  

输出：

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