📌  相关文章
📜  jQWidgets jqxGrid pagerheight 属性(1)

📅  最后修改于: 2023-12-03 15:02:19.059000             🧑  作者: Mango

jQWidgets jqxGrid pagerheight Property介绍

简介

jQWidgets jqxGrid是一个非常流行的JavaScript网格控件，它可以实现数据展示、数据编辑等功能。jqxGrid控件提供了大量的属性和方法来帮助程序员控制和管理网格控件的行为和外观。

pagerheight是jqxGrid控件的一个属性。它决定控件的分页栏高度。

用法

pagerheight属性是用来设置jqxGrid控件分页栏的高度。它的默认值是38。可以通过以下代码来设置它的值：

$('#jqxgrid').jqxGrid({
    pagerheight: 50
});
示例

以下示例演示如何使用pagerheight属性来控制jqxGrid控件分页栏的高度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jqxGrid pagerheight Property Demo</title>
    <!-- 引入jqwidgets的样式表和javascript脚本 -->
    <link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
    <script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
</head>
<body>
    <!-- 创建一个jqxGrid控件 -->
    <div id="jqxgrid"></div>
    <script>
        // 初始化jqxGrid控件，并设置pagerheight属性
        $('#jqxgrid').jqxGrid({
            source: {
                dataType: 'json',
                dataFields: [
                    { name: 'name', type: 'string' },
                    { name: 'age', type: 'number' },
                    { name: 'gender', type: 'string' }
                ],
                localData: [
                    { name: 'John', age: 35, gender: 'male' },
                    { name: 'Mary', age: 27, gender: 'female' },
                    { name: 'Joe', age: 42, gender: 'male' },
                    { name: 'Lisa', age: 32, gender: 'female' }
                ]
            },
            columns: [
                { text: 'Name', dataField: 'name' },
                { text: 'Age', dataField: 'age' },
                { text: 'Gender', dataField: 'gender' }
            ],
            pageable: true,
            pagerheight: 50
        });
    </script>
</body>
</html>

输出结果如下：

image

总结

pagerheight属性是jqxGrid控件的一个重要属性，它决定了控件分页栏的高度。如果程序员想要控件的分页栏高度不同于默认值，可以通过设置pagerheight属性来实现。