如何在Django模板中集成Grid.js插件并实现HTML与SVG单元格渲染？

核心思路 #

Grid.js的formatter配置项支持传入函数（而非字符串），通过该函数可直接返回HTML/SVG代码，实现自定义单元格内容。以下是针对需求的具体实现：

1. 状态列（Status）格式化HTML #

针对状态列，利用formatter函数将状态文本和颜色值组合成带样式的HTML标签：

{
  name: "{% translate "Status" %}",
  formatter: (cell, row) => {
    // row[7]对应状态颜色值，row[8]对应状态文本
    return `<span style="padding: 4px 8px; border-radius: 4px; background-color: ${row[7]}; color: #fff;">${row[8]}</span>`;
  }
}

2. 性别列（Gender）插入SVG #

通过formatter函数直接返回SVG的HTML代码，可根据数据动态切换内容：

{
  name: "{% translate "Gender" %}",
  formatter: (cell) => {
    // cell对应data中的性别标识（如"male"/"female"）
    if (cell === "male") {
      return `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">
                <path d="M20 12v-2M16 6h4M16 18h4M12 20v-2M8 6h4M8 18h4M4 12v-2" />
              </svg>`;
    } else {
      return `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2">
                <path d="M12 22v-2M12 6v2M4 12h2M18 12h2M8 8l4 4 4-4M8 16l4-4 4 4" />
              </svg>`;
    }
  }
}

完整可运行代码 #

替换原有代码，调整data中的对应字段（确保性别列传入可判断的标识值，如p.gender）：

<script>
  $("div#pigeon-table").Grid({
    search: true,
    pagination: true,
    sort: true,
    columns: [
      {
        name: "{% translate "Gender" %}",
        formatter: (cell) => {
          if (cell === "male") {
            return `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">
                      <path d="M20 12v-2M16 6h4M16 18h4M12 20v-2M8 6h4M8 18h4M4 12v-2" />
                    </svg>`;
          } else {
            return `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="2">
                      <path d="M12 22v-2M12 6v2M4 12h2M18 12h2M8 8l4 4 4-4M8 16l4-4 4 4" />
                    </svg>`;
          }
        }
      },
      "{% translate "Ring details" %}",
      "{% translate "Color" %}",
      "{% translate "Section" %}",
      "{% translate "Strain" %}",
      "{% translate "Sire" %}",
      "{% translate "Dam" %}",
      {
        name: "{% translate "Status" %}",
        formatter: (cell, row) => {
          return `<span style="padding: 4px 8px; border-radius: 4px; background-color: ${row[7]}; color: #fff;">${row[8]}</span>`;
        }
      }
    ],
    data: [
      {% for p in pigeons %}
        [
         "{{ p.gender }}",
         "{{ p.ring_serial }}",
         "{% translate p.color.color %}",
         "{{ p.get_section_display }}",
         "{{ p.strain }}",
         "{{ p.sire }}",
         "{{ p.dam }}",
         "{{ p.status.color }}",
         "{% translate p.status.status %}"
        ],
      {% endfor %}
    ]
  });
</script>

关键说明 #

• formatter函数接收cell（当前单元格原始值）和row（整行数据数组）两个参数，可灵活组合数据生成HTML。
• 确保Django模板变量正确传递（如p.gender需对应模型中存储的性别标识）。
• SVG代码可按需自定义样式（颜色、尺寸等），直接以字符串返回即可。

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