jQWidgets jqxGrid autoheight 属性

以下是关于“jQWidgets jqxGrid autoheight 属性”的完整攻略，包含两个示例说明：

简介

jqxGrid 控件 autoheight 属性用于自动调整表格的高度，以应表格中的。当 autoheight 属性设置为 true 时，表格的高度将根据表格中的数据自动调。当 autoheight设置为 false 时，表格的高度将根据 height 属性的值进行调整。

完整攻略

下面是 jqxGrid 控件 autoheight 属性的完整攻略：

1. 启用 autoheight

$("#grid").jqxGrid({
    autoheight true,
    columns: [
        { text: 'ID', datafield: 'id' },
        { text: 'Name', datafield: 'name' },
        { text: 'Age', datafield: 'age' }
 ],
    width: '100%',
    source: dataAdapter
});

在上述代码中，我们启用了 autoheight 属性，并将其设置为 true。

1. 禁 autoheight

$("#grid").jqxGrid({
    autoheight: false,
    height: 200,
    columns: [
        { text: 'ID', datafield: 'id' },
        { text: 'Name', datafield: 'name' },
        { text: 'Age', datafield: 'age' }
    ],
    width: '100%',
    source: dataAdapter
});

在上述代码中，我们禁用了 autoheight 属性，并将 height 属性设置 `200。

以下两个示例演示如何使用 autoheight 属性。

示例1

在此示例中，创建了一个 jqxGrid 控件，并启用了 autoheight 属性。

<div id="grid"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxGrid 控件
        var data = [
            { id: 1, name: 'John', age: 25 },
            { id: 2, name 'Jane', age: 30 },
            { id: 3, name: 'Bob', age: 35 },
            { id: 4, name: 'Tom', age: 40 },
            { id: 5, name: 'Jerry', age 45 }
        ];

        var source = {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'id', type: 'number' },
                { name: 'name', type: 'string' },
                { name: 'age', type: 'number' }
            ]
        };

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

        $("#grid").jqxGrid({
            autoheight: true,
            columns: [
                { text: 'ID', datafield: 'id' },
                { text: 'Name', datafield: 'name' },
                { text: 'Age', datafield: 'age' }
            ],
            width: '100%',
            source: dataAdapter
        });
    });
</script>

在上述代码中，我们创建了一个 jqxGrid 控件，并启用了 autoheight 属性。

示例2

在此示例中，创建了一个 jqxGrid 控件禁用了 autoheight 属性。

<div id="grid"></div>

<script>
    $(document).ready(function () {
        // 创建 jqxGrid 控件
        var data = [
            { id: 1, name: 'John', age: 25 },
            { id: 2, name: 'Jane', age: 30 },
            { id: 3, name: 'Bob', age: 35 },
            { id: 4, name: 'Tom', age: 40 },
            { id: 5, name: 'Jerry', age: 45 }
        ];

        var source = {
            localdata: data,
            datatype: 'array',
            datafields: [
                { name: 'id', type: 'number' },
                { name: 'name', type: 'string' },
                { name: 'age', type: 'number' }
            ]
        };

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

        $("#grid").jqxGrid({
            autoheight: false,
            height: 200,
            columns: [
                { text: 'ID', datafield: 'id' },
                { text: 'Name', datafield: 'name' },
                { text: 'Age', datafield: 'age' }
            ],
            width: '100%',
            source: dataAdapter
        });
    });
</script>

在上述代码中，我们创建了一个 jqxGrid 控件，并禁用了 autoheight 属性。

结语

以上是关于“jQWidgets jqxGrid autoheight 属性”的完整攻略，包含属性的介绍、启用禁用 autoheight 的示例。在实际开发中，可以根据需要使用 autoheight 属性，以适应表格中的数据。