Django中点击单选/多选复选框展示对应表格整行数据求助

当前问题：已通过Django从数据库获取员工数据并展示为表格，表格末尾的复选框以薪资为选项，但点击后仅能展示薪资值，无法展示对应员工的完整行数据。需要实现单选/多选复选框后，以表格形式展示选中薪资对应的完整员工信息。

修改方案 #

核心改动点 #

• 将复选框的value改为员工唯一ID（避免薪资重复导致匹配错误）
• 在页面加载时把员工数据存入JS变量，方便筛选
• 重写getvalues函数，根据选中的ID筛选数据并生成完整表格

视图层准备（Django） #

先在视图中将员工数据序列化为JSON格式传递给模板：

import json
from django.shortcuts import render
from .models import Employee

def employee_list(request):
    # 提取需要的字段并转为字典列表
    employee_data = list(Employee.objects.all().values('id', 'empname', 'email', 'salary', 'phone'))
    # 序列化为JSON字符串
    employee_json = json.dumps(employee_data)
    return render(request, 'employee.html', {'EmployeeDetails': employee_json})

修改后的模板代码 #

<head>
    <script>
        // 将Django传递的JSON数据转为JS数组
        let employeeData = {{ EmployeeDetails|safe }};

        function getvalues() {
            let selectedIds = [];
            // 获取所有筛选复选框
            const checkboxes = document.querySelectorAll('#tab1 input[type="checkbox"]');
            
            // 收集选中的员工ID
            checkboxes.forEach(checkbox => {
                if (checkbox.checked) {
                    selectedIds.push(parseInt(checkbox.value));
                }
            });

            // 筛选出对应ID的员工数据
            const selectedEmployees = employeeData.filter(emp => selectedIds.includes(emp.id));

            // 生成结果表格HTML
            let resultHtml = '';
            if (selectedEmployees.length > 0) {
                resultHtml += '<table border="1">';
                resultHtml += '<tr><th>ID</th><th>NAME</th><th>EMAIL</th><th>SALARY</th><th>PHONE</th></tr>';
                selectedEmployees.forEach(emp => {
                    resultHtml += `<tr>
                        <td>${emp.id}</td>
                        <td>${emp.empname}</td>
                        <td>${emp.email}</td>
                        <td>${emp.salary}</td>
                        <td>${emp.phone}</td>
                    </tr>`;
                });
                resultHtml += '</table>';
            } else {
                resultHtml = '未选中任何记录';
            }

            // 更新展示区域内容
            document.getElementById("displayvalues").innerHTML = resultHtml;
        };
    </script>
</head>
<body>
    <!-- 原始员工数据表格 -->
    <table border="1">
        <tr>
            <th> ID </th>
            <th> NAME </th>
            <th> EMAIL </th>
            <th> SALARY </th>
            <th> PHONE   </th>
        </tr>
        {% for getdata in EmployeeDetails|json_script:"employee-data" %}
        <tr>
            <td> {{ getdata.id }}</td>
            <td> {{ getdata.empname }}</td>
            <td> {{ getdata.email }}</td>
            <td> {{ getdata.salary }}</td>
            <td> {{ getdata.phone }}</td>
        </tr>
        {% endfor %}
    </table>

    <!-- 筛选复选框表格 -->
    <table id="tab1">
        <tr>
            <td> 
                {% for display in EmployeeDetails|json_script:"employee-data" %}
                    <input type="checkbox" value="{{ display.id }}" /> {{ display.salary }}
                {% endfor %}
            </td>
        </tr>
    </table>

    <input id="but1" type="button" value="display records" onclick="getvalues()"/>     
    <div id="displayvalues"></div>
</body>

关键说明 #

1. 员工数据序列化：通过视图将员工数据转为JSON格式，确保JS能直接读取所有字段信息。
2. 复选框关联唯一ID：用员工ID作为复选框的value，避免薪资重复导致多条记录匹配错误的问题。
3. 动态生成结果表格：在JS中筛选出选中的员工数据后，通过字符串拼接生成完整的HTML表格，替换展示区域内容，实现完整行数据的展示。

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