博客

以下是关于 jQWidgets jqxTreeGrid 的 columnReordered 事件的完整攻略：

jQWidgets jqxTreeGrid columnReordered 事件

columnReordered 事件在 jqxTreeGrid 组件中，当用户重新排序列时触发。该事件提供了新的列顺序和旧的列顺序。

语法

$('#jqxTreeGrid').on('columnReordered', function (event) {
    // 处理事件
});

参数

• event：事件对象，包含以下属性：
• args.columns：新的列顺序，为类型。
• args.oldIndex：旧的列顺序，为数字类型。

示例

以下是两个示例，演示了如何使用 columnReordered 事件在 jqxTreeGrid 组件中重新排序列。

示例 1

// 创建 jqxTree 组件
$('#jqxTreeGrid').jqxTreeGrid({
    source: dataAdapter,
    columns: [
        { text: 'Name', dataField: 'name', width: 200 },
        { text: 'Age', dataField: 'age', width: 100 },
        { text: 'Address', dataField: 'address', width: 300 }
    ]
});

// 监听 columnReordered 事件
$('#jqxTreeGrid').on('columnReordered', function (event) {
    // 获取新的列顺序
    var newColumns = event.args.columns;
    console.log('New column order:', newColumns);

    // 获取旧的列顺序
    var oldIndex = event.args.oldIndex;
    console.log('Old column order:', oldIndex);
});

在示例 1 中，我们使用 jqxTreeGrid() 方法创建了一个 jqxTreeGrid 组件，并在组件中添加了一些数据。接着，我们监听了 columnReordered 事件，并在事件处理函数中获取了新的列顺序和旧的列顺序。

示例 2

// 创建 jqxTreeGrid 组件
var treeGrid = $('#jqxTreeGrid').jqxTreeGrid({
    source: dataAdapter,
    columns: [
        { text: 'Name', dataField: 'name', width: 200 },
        { text: 'Age', dataField: 'age', width: 100 },
        { text: 'Address', dataField: 'address', width: 300 }
    ]
});

// 监听 columnReordered 事件
treeGrid.on('columnReordered', function (event) {
    // 获取新的列顺序
    var newColumns = event.args.columns;
    console.log('New column order:', newColumns);

    // 获取旧的列顺序
    var oldIndex = event.args.oldIndex;
    console.log('Old column order:', oldIndex);
});

在示例 2 中，我们将 jqxTreeGrid() 方法的返回值存储在一个变量 treeGrid 中，并通过该变量监听了 columnReordered 事件。这个示例演示了如何在使用 jqxTreeGrid 组件时，通过变量引用的方式监听组件事件。