jQWidgets jqxTreeGrid columnsHeight 属性(1)

📌 相关文章

📜 jQWidgets jqxTreeGrid columnsHeight 属性(1)

📅 最后修改于: 2023-12-03 14:43:27.970000 🧑 作者: Mango

jQWidgets jqxTreeGrid columnsHeight 属性介绍

jqxTreeGrid 是一款基于 jQuery 的树形表格插件，用于在 Web 页面上渲染具有分级结构的表格数据。columnsHeight 属性是 jqxTreeGrid 中的一个配置属性，用于设置每一列的高度。

语法

$('#treeGrid').jqxTreeGrid({
    columnsHeight: [heightArray]
});

参数说明：

heightArray：一个数字数组，包含每一列的高度值。

用法

首先在页面上引入 jQWidgets 的相关库文件：

<link rel="stylesheet" href="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxtreegrid.js"></script>

然后，在 HTML 标签中添加一个空的 jqxTreeGrid 容器：

<div id="treeGrid"></div>

最后，在 JavaScript 中设置参数，生成表格：

$('#treeGrid').jqxTreeGrid({
    columns: [
        { text: 'Name', dataField: 'name', width: 260 },
        { text: 'Salary', dataField: 'salary', cellsAlign: 'right', width: 120, cellsFormat: 'c2' },
        { text: 'Gender', dataField: 'gender', align: 'center', width: 80 },
        { text: 'Title', dataField: 'title', width: 200 }
    ],
    columnsHeight: [40, 40, 40, 40],
    width: 600,
    source: dataAdapter,
});

示例

下面是一个简单的示例，用于演示如何使用 columnsHeight 属性来设置 jqxTreeGrid 中每一列的高度：

<!DOCTYPE html>
<html>
<head>
    <title>jqxTreeGrid Demo</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="https://cdn.jqwidgets.com/jquery-widgets/12.0.0/jqwidgets/jqxtreegrid.js"></script>
</head>
<body>
    <div id="treeGrid"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            // 数据源
            var data = [
                {
                    'name': '员工1',
                    'salary': 60000,
                    'gender': '男',
                    'title': '总经理',
                    'children': [
                        {
                            'name': '员工1.1',
                            'salary': 30000,
                            'gender': '女',
                            'title': '销售经理'
                        },
                        {
                            'name': '员工1.2',
                            'salary': 25000,
                            'gender': '男',
                            'title': '行政经理'
                        }
                    ]
                },
                {
                    'name': '员工2',
                    'salary': 45000,
                    'gender': '女',
                    'title': '部门经理',
                    'children': [
                        {
                            'name': '员工2.1',
                            'salary': 20000,
                            'gender': '女',
                            'title': '人事主管'
                        },
                        {
                            'name': '员工2.2',
                            'salary': 25000,
                            'gender': '男',
                            'title': '财务主管'
                        }
                    ]
                }
            ];

            // 数据适配器
            var dataAdapter = new $.jqx.dataAdapter({
                datafields: [
                    { name: 'name', type: 'string' },
                    { name: 'salary', type: 'number' },
                    { name: 'gender', type: 'string' },
                    { name: 'title', type: 'string' }
                ],
                hierarchy: {
                    keyDataField: { name: 'name' },
                    parentDataField: { name: 'parent' }
                },
                localData: data,
                id: 'name'
            });

            // 生成表格
            $('#treeGrid').jqxTreeGrid({
                columns: [
                    { text: 'Name', dataField: 'name', width: 260 },
                    { text: 'Salary', dataField: 'salary', cellsAlign: 'right', width: 120, cellsFormat: 'c2' },
                    { text: 'Gender', dataField: 'gender', align: 'center', width: 80 },
                    { text: 'Title', dataField: 'title', width: 200 }
                ],
                columnsHeight: [40, 40, 40, 40],
                width: 600,
                source: dataAdapter,
            });
        });
    </script>
</body>
</html>

效果如下：

jqxTreeGrid