jQWidgets jqxTreeGrid columnGroups 属性

概述

jQWidgets是一套基于HTML5和JavaScript的UI组件库，其中包含了jqxTreeGrid组件。jqxTreeGrid是一种广泛用于展示分层数据的UI控件，columnGroups是它的一种属性，用于分组显示树表格中的列。

使用方法

使用columnGroups属性可以把树表格的列进行分组显示。它可以接收一个数组参数，其中每个元素都表示一组列。每个元素可以包含两个属性：

• text：用于显示该列组的标题；
• name：用于指定该列组的列名，必须是一个数组格式，数组中的每个元素表示该列组中各列的列名。

示例代码：

var data = [
    {
        id: "1",
        name: "name 1",
        treeGridRow: {
            cells: ["1", "name 1", "description 1", 100]
        }
    },
    {
        id: "2",
        name: "name 2",
        treeGridRow: {
            cells: ["2", "name 2", "description 2", 200]
        }
    }
];
var source = {
    dataType: "json",
    dataFields: [
        { name: "id", type: "string" },
        { name: "name", type: "string" },
        { name: "description", type: "string" },
        { name: "value", type: "number" }
    ],
    hierarchy:
    {
        keyDataField: { name: 'id' },
        parentDataField: { name: 'parentid' }
    },
    id: "id",
    localData: data
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxTreeGrid").jqxTreeGrid({
    source: dataAdapter,
    columns: [
        { text: 'Id', dataField: 'id' },
        { text: 'Name', dataField: 'name' },
        { text: 'Description', dataField: 'description' },
        { text: 'Value', dataField: 'value' }
    ],
    columnGroups: [
        {
            text: "Group1", name: [
                "Name",
                "Description"
            ]
        },
        {
            text: "Group2", name: [
                "Id",
                "Value"
            ]
        }
    ]
});

总结

使用columnGroups属性可以让树型表格的列进行分组显示，方便用户查看数据。使用方法简单，只需要指定每一组的列名和标题即可。而jQWidgets作为一个功能强大的UI组件库，不仅提供了树型表格控件，还包含了数十种常用控件，可以大大提高开发效率，提供更好的用户体验。