jQWidgets jqxTreeGrid 排序事件

jQWidgets jqxTreeGrid 是一个强大的网格控件，可以支持树形结构。在 jqxTreeGrid 中，排序事件可以用来响应用户对树形表格的排序操作。本文将介绍 jqxTreeGrid 的排序事件，在此之前，需要先了解 jqxTreeGrid 和其基本设置。

jqxTreeGrid 简介

jqxTreeGrid 是一个高级的树形表格控件，用于向用户展示有父子关系的多层次数据。它具有如下特点：

• 与 jqxGrid 结构相似，更强大的显示和编辑功能；
• 可支持多选，多行拖拽和多层复杂数据；
• 使用 AJAX 或 JSON 数据源，可简单地绑定数据；
• 使用模板和样式可自定义行并添加外观和交互；
• 支持表单验证和自定义输入。

jqxTreeGrid 基本设置

初始化一个 jqxTreeGrid 控件需要如下基本参数：

$("#jqxTreeGrid").jqxTreeGrid({
    source: dataAdapter,
    columns: [
        { text: '编号', dataField: 'id', width: 100 },
        { text: '名称', dataField: 'name', width: 250 },
        { text: '数量', dataField: 'quantity', align: 'right', width: 100 },
        { text: '价格', dataField: 'price', cellsAlign: 'right', cellsFormat: 'c2' }
    ],
});

其中需要指定数据源和列信息，除此之外，还有一些其他常用的设置可以参考官方文档。

jqxTreeGrid 排序事件

排序事件主要有两个，一是前台排序，一个是后台排序。

前台排序

前台排序即是在客户端实现，摆脱了后台的压力。需要打开 jqxTreeGrid 的 sortMode 配置项，并设置为 ‘client’。

$("#jqxTreeGrid").jqxTreeGrid({
    source: dataAdapter,
    sortMode: 'client',
    // 更多配置....
});

然后为排序的列添加 sortFunction 属性，用于排序。

$("#jqxTreeGrid").jqxTreeGrid({
    source: dataAdapter,
    sortMode: 'client',
    columns: [
        { text: '编号', dataField: 'id', sortFunction: sortByID, width: 100 },
        { text: '名称', dataField: 'name', sortFunction: sortByName, width: 250 },
        { text: '数量', dataField: 'quantity', align: 'right', sortFunction: sortByQuantity, width: 100 },
        { text: '价格', dataField: 'price', cellsAlign: 'right', cellsFormat: 'c2' }
    ],
    // 更多配置....
});

其中 sortFunction 接收两个参数，第一个是需要排序的列，第二个是两个需要比较的行。

function sortByName(column,record1,record2){
    let name1 = record1.name.toLowerCase();
    let name2 = record2.name.toLowerCase();
    return name1.localeCompare(name2);
}

后台排序

后台排序比前台排序更复杂，需要涉及到后台代码的修改，涉及的参数如下：

• sortcolumn 客户端排序的列名；
• sortdirection 客户端排序的方向：ascending/descending；
• pagenum 当前页数；
• pagesize 每页的大小；

后台接口需要对以上参数进行处理，返回新的数据。此处不再详细展开。

总结

jqxTreeGrid 是一个强大的树形表格控件，使用 sortMode 属性可以简单实现客户端排序。后台排序比较复杂，需要数据服务器的支撑。排序事件可以在不同的场景下实现不同的操作，每一个参数的设定都需要注意。