jQWidgets jqxPivotGrid scrollBarsEnabled 属性

jQWidgets jqxPivotGrid是一个强大的JavaScript组件，用于在Web应用程序中展示多维数据透视表。scrollBarsEnabled是其中的一个属性，用于控制是否显示水平和垂直滚动条。

语法

$("#pivotgrid").jqxPivotGrid({
    scrollBarsEnabled: true
});

默认值

scrollBarsEnabled属性的默认值是false，即不显示水平和垂直滚动条。

取值范围

scrollBarsEnabled属性接受布尔类型的值，true表示显示滚动条，false表示不显示。

使用示例

显示滚动条

下面是一个示例，展示如何将scrollBarsEnabled设置为true以显示滚动条：

<div id="pivotgrid"></div>

<script>
    $(document).ready(function () {
        var source = {
            dataType: "tabular",
            dataFields: [{ name: "Country", type: "string" }, { name: "City", type: "string" }, { name: "Year", type: "number" }, { name: "Month", type: "number" }, { name: "Amount", type: "number" }],
            localData: [
                { Country: "USA", City: "New York", Year: 2022, Month: 1, Amount: 200 },
                { Country: "USA", City: "New York", Year: 2022, Month: 2, Amount: 300 },
                { Country: "USA", City: "New York", Year: 2022, Month: 3, Amount: 400 },
                { Country: "USA", City: "Los Angeles", Year: 2022, Month: 1, Amount: 250 },
                { Country: "USA", City: "Los Angeles", Year: 2022, Month: 2, Amount: 350 },
                { Country: "USA", City: "Los Angeles", Year: 2022, Month: 3, Amount: 450 },
                { Country: "Canada", City: "Toronto", Year: 2022, Month: 1, Amount: 150 },
                { Country: "Canada", City: "Toronto", Year: 2022, Month: 2, Amount: 250 },
                { Country: "Canada", City: "Toronto", Year: 2022, Month: 3, Amount: 350 },
                { Country: "Canada", City: "Vancouver", Year: 2022, Month: 1, Amount: 100 },
                { Country: "Canada", City: "Vancouver", Year: 2022, Month: 2, Amount: 200 },
                { Country: "Canada", City: "Vancouver", Year: 2022, Month: 3, Amount: 300 }
            ]
        };

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

        $("#pivotgrid").jqxPivotGrid({
            source: dataAdapter,
            showToolbar: true,
            showStatusbar: true,
            showAggregates: true,
            showColumnTotals: true,
            showRowTotals: true,
            scrollBarsEnabled: true,
            width: 600,
            height: 400
        });
    });
</script>

隐藏滚动条

下面是一个示例，展示如何将scrollBarsEnabled设置为false以隐藏滚动条：

<div id="pivotgrid"></div>

<script>
    $(document).ready(function () {
        var source = {
            dataType: "tabular",
            dataFields: [{ name: "Country", type: "string" }, { name: "City", type: "string" }, { name: "Year", type: "number" }, { name: "Month", type: "number" }, { name: "Amount", type: "number" }],
            localData: [
                { Country: "USA", City: "New York", Year: 2022, Month: 1, Amount: 200 },
                { Country: "USA", City: "New York", Year: 2022, Month: 2, Amount: 300 },
                { Country: "USA", City: "New York", Year: 2022, Month: 3, Amount: 400 },
                { Country: "USA", City: "Los Angeles", Year: 2022, Month: 1, Amount: 250 },
                { Country: "USA", City: "Los Angeles", Year: 2022, Month: 2, Amount: 350 },
                { Country: "USA", City: "Los Angeles", Year: 2022, Month: 3, Amount: 450 },
                { Country: "Canada", City: "Toronto", Year: 2022, Month: 1, Amount: 150 },
                { Country: "Canada", City: "Toronto", Year: 2022, Month: 2, Amount: 250 },
                { Country: "Canada", City: "Toronto", Year: 2022, Month: 3, Amount: 350 },
                { Country: "Canada", City: "Vancouver", Year: 2022, Month: 1, Amount: 100 },
                { Country: "Canada", City: "Vancouver", Year: 2022, Month: 2, Amount: 200 },
                { Country: "Canada", City: "Vancouver", Year: 2022, Month: 3, Amount: 300 }
            ]
        };

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

        $("#pivotgrid").jqxPivotGrid({
            source: dataAdapter,
            showToolbar: true,
            showStatusbar: true,
            showAggregates: true,
            showColumnTotals: true,
            showRowTotals: true,
            scrollBarsEnabled: false,
            width: 600,
            height: 400
        });
    });
</script>

总结

scrollBarsEnabled属性是jQWidgets jqxPivotGrid组件中的一个属性，用于控制是否显示水平和垂直滚动条，其取值范围为布尔类型的值，true表示显示滚动条，false表示不显示。在使用时，可以根据自己的需求设置该属性以显示或隐藏滚动条。