器→工具, 开源项目

数据表格前端组件AG Grid

钱魏Way · · 89 次浏览

AG Grid组件

AG Grid 是一个功能强大且高度灵活的数据网格组件，广泛用于构建现代 Web 应用中的数据展示和操作界面。它支持多种 JavaScript 框架，包括 Angular、React、Vue.js 以及纯 JavaScript 应用。AG Grid 提供了丰富的功能集，适合处理各种复杂的数据展示需求。

核心特性

  • 丰富的数据操作功能：
    • 排序和过滤：支持多列排序和复杂条件过滤，用户可以轻松对数据进行筛选和排序。
    • 分页：内置分页功能，支持大数据量的分段加载和展示。
    • 分组和聚合：支持数据分组和自定义聚合操作，便于数据的层次化展示和分析。
  • 编辑和交互：
    • 单元格编辑：提供丰富的单元格编辑功能，支持多种编辑器类型，如文本框、下拉框、日期选择器等。
    • 行拖放和列调整：用户可以通过拖放调整行顺序和列宽度，提供灵活的交互体验。
  • 自定义和扩展性：
    • 主题和样式：支持多种预定义主题，并允许用户自定义样式以匹配应用的视觉设计。
    • 自定义渲染器：开发者可以使用自定义的单元格渲染器和编辑器，以实现复杂的数据展示和交互。
  • 高性能：
    • 虚拟滚动：在处理大数据集时，AG Grid 采用虚拟滚动技术，确保快速的渲染和流畅的用户体验。
    • 优化的数据处理：提供智能的数据更新和缓存机制，提高数据操作的效率。
  • 跨平台支持：
    • 兼容多种现代浏览器，并支持移动设备的触摸操作。
    • 提供对多种前端框架的支持，包括 Angular、React、js 等。

应用场景

  • 企业级数据管理：
    • 适用于构建企业级应用中的数据管理和分析工具，如客户关系管理（CRM）、企业资源规划（ERP）系统等。
    • 提供强大的数据操作和分析能力，满足复杂的业务需求。
  • 数据驱动的 Web 应用：
    • 用于构建数据密集型的 Web 应用，如数据仪表盘、实时监控系统等。
    • 提供高效的数据展示和交互功能，提升用户体验。
  • 财务和市场分析：
    • 适合用于展示和分析财务数据、市场行情等，需要复杂数据操作的场景。
    • 支持多种数据分析功能，如分组、聚合、图表展示等。

AG Grid的使用

在 Flask 环境下，使用 AG Grid 可以轻松呈现来自数据库的数据。以下是具体步骤，展示如何从数据库中查询数据，并在前端通过 AG Grid 动态展示。

安装必要的依赖

安装 Flask 和数据库相关库（以 SQLAlchemy 和 SQLite 为例）：

pip install flask flask-sqlalchemy pandas

准备 Flask 应用和数据库

数据库模型

创建一个简单的 Flask 应用，并定义数据库模型：

from flask import Flask, jsonify, render_template
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///example.db"
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = False
db = SQLAlchemy(app)

# 数据库模型
class Car(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    make = db.Column(db.String(50))
    model = db.Column(db.String(50))
    price = db.Column(db.Float)

# 初始化数据库并插入测试数据
@app.before_first_request
def init_db():
    db.create_all()
    if not Car.query.first():
        db.session.add_all([
            Car(make="Toyota", model="Celica", price=35000),
            Car(make="Ford", model="Mondeo", price=32000),
            Car(make="Porsche", model="Boxster", price=72000),
        ])
        db.session.commit()

创建后端 API

创建一个 API，将数据库中的数据以 JSON 格式返回：

@app.route("/api/data")
def get_data():
    cars = Car.query.all()
    return jsonify([{"id": car.id, "make": car.make, "model": car.model, "price": car.price} for car in cars])

前端模板使用 AG Grid

创建一个 HTML 模板文件，例如 templates/index.html，在其中集成 AG Grid：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AG Grid with Flask</title>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/styles/ag-theme-alpine.css">
</head>
<body>
    <h1>Car List</h1>
    <div id="myGrid" class="ag-theme-alpine" style="height: 400px; width: 600px;"></div>

    <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.js"></script>
    <script>
        // 初始化网格
        const gridOptions = {
            columnDefs: [
                { field: "id", sortable: true, filter: true },
                { field: "make", sortable: true, filter: true },
                { field: "model", sortable: true, filter: true },
                { field: "price", sortable: true, filter: true }
            ],
            defaultColDef: {
                resizable: true,
            },
            rowData: [] // 数据将通过 API 加载
        };

        // 挂载到 HTML 元素
        const eGridDiv = document.querySelector('#myGrid');
        new agGrid.Grid(eGridDiv, gridOptions);

        // 通过 API 加载数据
        fetch("/api/data")
            .then(response => response.json())
            .then(data => {
                gridOptions.api.setRowData(data);
            });
    </script>
</body>
</html>

渲染主页面

在 Flask 应用中定义一个路由来渲染 HTML 页面：

@app.route("/")
def index():
    return render_template("index.html")

运行 Flask 应用

启动 Flask 应用：

flask run

打开浏览器访问 http://127.0.0.1:5000，你将看到一个动态加载的 AG Grid 表格，数据来自 SQLite 数据库。

可选功能扩展

数据编辑

AG Grid 支持前端编辑单元格。可以在 columnDefs 中配置 editable: true，并通过前端提交修改的内容到后端：

columnDefs: [
    { field: "make", editable: true },
    { field: "model", editable: true },
    { field: "price", editable: true }
]

提交修改到后端

通过监听 AG Grid 的变化事件，将修改后的数据通过 fetch 提交到 Flask：

gridOptions.onCellValueChanged = (event) => {
    fetch("/api/update", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(event.data)
    });
};

在 Flask 中创建一个对应的路由来处理数据更新：

@app.route("/api/update", methods=["POST"])
def update_data():
    data = request.json
    car = Car.query.get(data["id"])
    if car:
        car.make = data["make"]
        car.model = data["model"]
        car.price = data["price"]
        db.session.commit()
    return jsonify({"success": True})

结果效果

  • 浏览器中加载 AG Grid 表格。
  • 表格数据动态从数据库加载。
  • 表格支持交互功能，如排序、筛选。
  • 可以扩展为支持数据编辑和持久化。

这种方式不仅简洁，还能有效地结合 Flask 的后端功能和 AG Grid 的强大前端展示能力。

AG Charts

AG Charts 是 AG Grid 的一个图表模块，专门用于构建高性能、可交互的图表。它支持多种图表类型，适用于现代 Web 应用的数据可视化需求。

以下是对 AG Charts 的详细介绍，包括其特点、用法和功能：

AG Charts 的特点

  • 高性能
    • 基于 WebGL 和 Canvas 渲染，支持大数据量的高效渲染。
    • 在处理复杂图表和动态交互时性能优越。
  • 灵活性
    • 支持多种图表类型，如柱状图、折线图、饼图、散点图等。
    • 提供丰富的配置选项，满足复杂的定制化需求。
  • 响应式设计
    • 自适应屏幕尺寸，支持移动端和桌面端。
  • 易集成
    • 无缝集成 AG Grid，可直接从网格数据生成图表。
    • 也可独立使用，与其他数据源结合。

安装与引入

1) 安装

通过 NPM 安装：

npm install --save ag-charts-community

或通过 CDN 引入：

<script src="https://unpkg.com/ag-charts-community/dist/ag-charts-community.min.js"></script>

2) 引入

在项目中导入 AG Charts：

import { AgChart } from 'ag-charts-community';

使用 AG Charts

基础示例

以下示例展示了一个基本的柱状图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AG Charts Example</title>
    <script src="https://unpkg.com/ag-charts-community/dist/ag-charts-community.min.js"></script>
</head>
<body>
    <div id="myChart" style="width: 600px; height: 400px;"></div>
    <script>
        // 数据源
        const data = [
            { year: '2020', revenue: 100, profit: 40 },
            { year: '2021', revenue: 200, profit: 90 },
            { year: '2022', revenue: 300, profit: 150 },
        ];

        // 配置项
        const options = {
            container: document.getElementById('myChart'),
            data: data,
            series: [
                { type: 'column', xKey: 'year', yKey: 'revenue', yName: 'Revenue' },
                { type: 'line', xKey: 'year', yKey: 'profit', yName: 'Profit' },
            ],
            axes: [
                { type: 'category', position: 'bottom', title: { text: 'Year' } },
                { type: 'number', position: 'left', title: { text: 'Amount' } },
            ],
            title: {
                text: 'Company Performance',
            },
        };

        // 渲染图表
        AgChart.create(options);
    </script>
</body>
</html>

与 AG Grid 集成

AG Charts 可以与 AG Grid 集成，直接从表格中生成图表。例如：

const gridOptions = {
    // AG Grid 配置
    columnDefs: [
        { field: 'year', sortable: true },
        { field: 'revenue', sortable: true },
        { field: 'profit', sortable: true },
    ],
    rowData: [
        { year: '2020', revenue: 100, profit: 40 },
        { year: '2021', revenue: 200, profit: 90 },
        { year: '2022', revenue: 300, profit: 150 },
    ],
    enableCharts: true,
    chartThemes: ['ag-default'],
};

// 渲染网格
const gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);

配置项详解

标题

title: {
    text: 'Chart Title',
    fontSize: 18,
    fontWeight: 'bold',
}

轴配置

axes: [
    { type: 'category', position: 'bottom', title: { text: 'X-Axis Title' } },
    { type: 'number', position: 'left', title: { text: 'Y-Axis Title' } },
]

工具提示

tooltip: {
    enabled: true,
    renderer: (params) => `Value: ${params.yValue}`,
}

图例

legend: {
    position: 'bottom',
    spacing: 10,
}

AG Charts 是一个强大且灵活的数据可视化工具，可用于创建各种类型的图表，并支持高性能渲染。无论是独立使用还是与 AG Grid 集成，都可以满足多种复杂场景的数据可视化需求。

参考链接：

相关文章:
  1. CSS体系化学习
  2. Microsoft REST API Guidelines中文翻译
  3. Flask学习之上下文
  4. Flask学习之路由
  5. JavaScript学习之版本特性
数据可视化
移动归因与营销分析平台AppsFlyer
Mermaid流程图使用指南
Nginx的竞争者Caddy

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注