jQWidgets jqxDataTable filterHeight属性

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

简介

jqx 控件提供了 filterHeight 属性，用于设置表格选器的高度。通过设置 filterHeight 属性，我们可以控制表格筛选器的高度，以适应不同的需求。

详细攻略

以下是 jqxDataTable 控件的 filterHeight 属性的详细攻略：

filterHeight属性

filterHeight 属性是 jqxDataTable 控件的一个属性，用于设置表格筛选器的高度。该属性的默认值为 30。

示例1

在此示例中，创建了 jqxDataTable 控件，并使用 filterHeight 属性来设置表格筛选器的高度。

<div id="jqxdatatable"></div>
<script>
    $(document).ready(function () {
        // 创建 jqxDataTable 控件
        var data = [
            { name: '张三', age: 20, gender: '男', address: '北京市' },
            { name: '李四', age: 25, gender: '女', address: '上海市' },
            { name: '王五', age: 30, gender: '男', address: '州市' },
            { name: '赵六', age: 35, gender: '女', address: '深圳市' },
            { name: '钱七', age: 40, gender: '男', address: '杭州市' },
            { name: '孙八', age: 45, gender: '女', address: '南京市' },
            { name: '周九', age: 50, gender: '男', address: '成都市' },
            { name: '吴十', age: 55, gender: '女', address: '重庆市' }
        ];
        var source = {
            datatype: 'json',
            datafields: [
                { name: 'name', type: 'string' },
                { name: 'age', type: 'number' },
                { name: 'gender', type: 'string' },
                { name: 'address', type: 'string' }
            ],
            localdata: data,
            totalrecords: data.length
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#jqxdatatable").jqxDataTable({
            columns: [
                { text: '姓名', datafield: 'name' },
                { text: '年龄', datafield: 'age' },
                { text: '性别', datafield: 'gender' },
                { text: '地址', datafield: 'address' }
            ],
            source: dataAdapter,
            filterHeight: 50
        });
    });
</script>

在上述代码中，我们创建了一个 jqxDataTable 控件，并使用 filterHeight 属性来设置表格筛选器的高度。

示例2

在此示例中，我们创建了一个 jqxDataTable 控件，并使用 filterHeight 属性来设置表格筛选器的高度。在表格的 rendered 事件中，我们使用 setFilterHeight() 方法来动态设置表格筛选器的高度。

<div id="jqxdatatable"></div>
<script>
    $(document).ready(function () {
        // 创建 jqxDataTable 控件
        var data = [
            { name: '张三', age: 20, gender: '男', address: '北京市' },
            { name: '李四', age: 25, gender: '女', address: '上海市' },
            { name: '王五', age: 30, gender: '男', address: '州市' },
            { name: '赵六', age: 35, gender: '女', address: '深圳市' },
            { name: '钱七', age: 40, gender: '男', address: '杭州市' },
            { name: '孙八', age: 45, gender: '女', address: '南京市' },
            { name: '周九', age: 50, gender: '男', address: '成都市' },
            { name: '吴十', age: 55, gender: '女', address: '重庆市' }
        ];
        var source = {
            datatype: 'json',
            datafields: [
                { name: 'name', type: 'string' },
                { name: 'age', type: 'number' },
                { name: 'gender', type: 'string' },
                { name: 'address', type: 'string' }
            ],
            localdata: data,
            totalrecords: data.length
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        $("#jqxdatatable").jqxDataTable({
            columns: [
                { text: '姓名', datafield: 'name' },
                { text: '年龄', datafield: 'age' },
                { text: '性别', datafield: 'gender' },
                { text: '地址', datafield: 'address' }
            ],
            source: dataAdapter,
            filterHeight: 30,
            rendered: function () {
                $("#jqxdatatable").jqxDataTable('setFilterHeight', 50);
            }
        });
    });
</script>

在上述代码中，我们创建了一个 jqxDataTable 控件，并使用 filterHeight 属性来设置表格筛选器的高度。在表格的 rendered 事件中，我们使用 setFilterHeight() 方法来动态设置表格筛选器的高度。