如何在Django模板的JS脚本中用循环填充AG-Grid数据网格？

1. 后端视图：将查询集转为结构化数据 #

避免在模板中混写Django语法和JS循环，先在视图层把Cocktail数据处理成AG-Grid能直接使用的结构：

from django.shortcuts import render
from .models import Cocktail

def cocktail_list(request):
    cocktails = Cocktail.objects.all()
    # 手动构造字典列表，可自定义字段名和结构
    cocktail_data = [
        {
            'name': item.name,
            'ingredient1': item.ingredient1,
            'ingredient2': item.ingredient2,
            # 补充你的其他字段
        } for item in cocktails
    ]
    # 若字段直接映射，也可用Django序列化器
    # from django.core import serializers
    # raw_data = serializers.serialize('python', cocktails, fields=('name', 'ingredient1', 'ingredient2'))
    # cocktail_data = [item['fields'] for item in raw_data]
    
    return render(request, 'your_template.html', {'cocktail_data': cocktail_data})

2. 前端模板：直接绑定数据到AG-Grid #

在模板中把后端传递的Python列表直接转为JS数组，赋值给AG-Grid的rowData，无需嵌套循环：

<!-- 引入AG-Grid资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.min.css">
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>

<div id="cocktailGrid" style="height: 600px; width: 100%;" class="ag-theme-alpine"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 直接将Django上下文变量转为JS数组
    const rowData = {{ cocktail_data|safe }};
    
    // 定义列配置，字段名需和后端构造的字典键完全匹配
    const columnDefs = [
        { field: 'name', headerName: '鸡尾酒名称', flex: 1 },
        { field: 'ingredient1', headerName: '主配料', flex: 1 },
        { field: 'ingredient2', headerName: '辅配料', flex: 1 },
        // 添加剩余字段对应的列
    ];

    const gridOptions = {
        columnDefs: columnDefs,
        rowData: rowData,
        defaultColDef: {
            sortable: true,
            filter: true,
            resizable: true
        }
    };

    // 初始化网格
    const gridDiv = document.getElementById('cocktailGrid');
    new agGrid.Grid(gridDiv, gridOptions);
});
</script>

关键注意点 #

• 使用|safe过滤器：确保Django渲染的列表能被正确识别为JS数组，避免语法错误。
• 字段名一致性：columnDefs中的field必须和后端构造的字典键完全一致，否则AG-Grid无法匹配数据。
• 避免嵌套循环：之前的写法失败核心原因是Django模板渲染和JS执行时机冲突，直接传递结构化数据是最可靠的方案。

内容的提问来源于stack exchange，提问作者George Pt