jQWidgets jqxTreeGrid sortBy() 方法(1)

📌 相关文章

📜 jQWidgets jqxTreeGrid sortBy() 方法(1)

📅 最后修改于: 2023-12-03 14:43:28.212000 🧑 作者: Mango

jQWidgets jqxTreeGrid sortBy() 方法

jqxTreeGrid 是 jQWidgets 中提供的一种树形结构的网格组件，它拥有树形数据的所有特性，同时提供了基于 jQuery 的交互性和丰富的 API 方法。其中，jqxTreeGrid 的 sortBy() 方法可以对树形结构数据进行排序。

方法定义

sortBy(columnDataField, sortOrder)

columnDataField 为待排序的数据字段名称，必填。
sortOrder 为排序方式，可选值为 asc （升序）和 desc （降序），如不填默认为 asc。

方法作用

该方法用于对根据数据字段对树形结构数据进行排序，可以在 jqxTreeGrid 初始化后调用该方法进行排序，也可以在某个操作之后（如增、删、改）进行调用，以刷新树形数据。

使用示例

<head>
  <link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet">
  <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
</head>

<body>
  <div id="treeGrid"></div>
</body>

<script>
$(document).ready(function () {
    // 初始化 jqxTreeGrid 组件
    var data = [
      { id: "1", parentid: null, name: "name1", column1: "1-1", column2: "1-2" },
      { id: "2", parentid: null, name: "name2", column1: "2-1", column2: "2-2" },
      { id: "3", parentid: "1", name: "name1-1", column1: "1-1-1", column2: "1-1-2" },
      { id: "4", parentid: "1", name: "name1-2", column1: "1-2-1", column2: "1-2-2" },
      { id: "5", parentid: "3", name: "name1-1-1", column1: "1-1-1-1", column2: "1-1-1-2" },
      { id: "6", parentid: "3", name: "name1-1-2", column1: "1-1-2-1", column2: "1-1-2-2" },
    ];
    $("#treeGrid").jqxTreeGrid({
        source: data,
        columns: [
            { text: "ID", dataField: "id" },
            { text: "Name", dataField: "name" },
            { text: "Column1", dataField: "column1" },
            { text: "Column2", dataField: "column2" },
        ],
        filterable: true,
        sortable: true,
        ready: function() {
            // 默认按“id”升序排列
            $("#treeGrid").jqxTreeGrid('sortBy', 'id');
        },
    });
});
</script>

在该示例中，我们实现了一个 jqxTreeGrid 组件，并初始化了一个包含 6 条数据的树形数据。在初始化时，我们通过调用 sortBy() 方法，将数据按照 “ID” 数据字段进行升序排序。用户可以根据需要修改该方法的参数以实现不同的排序需求。

注意事项

sortBy() 方法只能用于排序，不能用于筛选。
在调用 sortBy() 方法时，必须保证组件已经初始化完毕，否则该方法无法生效。
若 jqxTreeGrid 使用的数据源为异步请求，建议在更新数据源后立即调用该方法。