jQWidgets jqxTreeGrid height 属性

介绍

jQWidgets jqxTreeGrid 是一个基于jQuery和Bootstrap的界面库，提供了多种UI组件，包括jqxTreeGrid。 jqxTreeGrid以树形结构来展示数据和子节点，通过height属性可以设置组件的高度，调整树形结构的展示效果。

使用方法

$("#jqxTreeGrid").jqxTreeGrid({
    source: dataAdapter,
    columns: [
        // 列的定义
    ],
    height: '400px'
});

属性说明

• 属性名：height
• 类型：string
• 默认值：null
• 描述：设置树形结构的高度。可以使用CSS的度量单位比如px、em等。

注意事项

• 如果height属性被设置为null，则树形结构会自适应父容器的高度。
• 通过设置height属性可以控制树形结构的滚动条，并保持固定高度的显示区域。
• 如果树形结构的高度小于实际内容的高度，则会显示垂直滚动条来滚动未显示的内容。

示例

HTML

<div id="jqxTreeGrid"></div>

JS

var data = [
    // 数据来源
];

var source = {
    dataType: 'json',
    dataFields: [{
        name: 'name',
        type: 'string'
    }, {
        name: 'code',
        type: 'string'
    }, {
        name: 'nodes',
        type: 'array',
        // 树形结构
        recursive: true,
        // 数据来源
    }],
    hierarchy: {
        // 树形结构
        keyDataField: {
            name: 'id'
        },
        parentDataField: {
            name: 'parentId'
        }
    },
    id: 'id',
    localData: data
};

var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxTreeGrid").jqxTreeGrid({
    source: dataAdapter,
    columns: [{
        text: '名称',
        dataField: 'name'
    }, {
        text: '编码',
        dataField: 'code'
    }],
    height: '400px'
});

参考链接

• jQWidgets jqxTreeGrid - API文档
• jQWidgets jqxTreeGrid - 官网