以下是关于 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({
: 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 组件时,通过变量引用的方式监听组件事件。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQWidgets jqxTreeGrid columnReordered事件 - Python技术站