Flask-GridJS 使用教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00478/article/details/141878995

Flask-GridJS 使用教程

flask-gridjsBeautiful Interactive tables in your Flask templates using grid.js.项目地址:https://gitcode.com/gh_mirrors/fl/flask-gridjs

项目介绍

Flask-GridJS 是一个结合了 Flask 和 GridJS 的开源项目，旨在帮助开发者在其 Flask 应用中快速集成美观且交互性强的表格。GridJS 是一个强大的 JavaScript 表格库，而 Flask 是一个流行的 Python Web 框架。通过 Flask-GridJS，开发者可以轻松地在 Flask 模板中渲染出功能丰富的表格。

项目快速启动

安装依赖

首先，克隆项目仓库并安装必要的依赖：

git clone https://github.com/miguelgrinberg/flask-gridjs.git
cd flask-gridjs
pip install -r requirements.txt

运行示例

项目中包含多个表格示例。以下是一个基本的表格示例：

启动 Flask 应用：

python basic_table.py

在浏览器中访问 http://127.0.0.1:5000，即可看到渲染出的表格。

代码示例

以下是一个基本的表格初始化代码示例：

<!DOCTYPE html>
<html>
<head>
    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
</head>
<body>
    <div id="table"></div>
    <script>
        new gridjs.Grid({
            columns: [
                { id: 'name', name: 'Name' },
                { id: 'age', name: 'Age' },
                { id: 'address', name: 'Address' },
                { id: 'phone', name: 'Phone Number' },
                { id: 'email', name: 'Email' }
            ],
            data: [
                { name: 'John Doe', age: 30, address: '123 Main St', phone: '555-1234', email: 'john@example.com' },
                { name: 'Jane Smith', age: 25, address: '456 Elm St', phone: '555-5678', email: 'jane@example.com' }
            ],
            search: true,
            sort: true,
            pagination: true
        }).render(document.getElementById('table'));
    </script>
</body>
</html>