XH_Digital_Management/templates/upload_excel_modal.html

<div id="uploadModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="uploadModalLabel">上传文件</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 上传表单 -->
                <form id="upload-form" enctype="multipart/form-data">
                    <input type="file" name="excel_file" class="form-control" id="inputFile" hidden accept=".xlsx">
                    <label class="btn btn-outline-primary" for="inputFile">选择文件</label>
                    <span id="file-chosen" style="font-size: 12px; margin-left: 10px;">未选择文件</span>
                </form>
            </div>
            <div class="modal-footer">
                <a href="{{ download_template_url }}" class="btn btn-secondary">下载模板</a>
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="uploadBtn">上传</button>
            </div>
        </div>
    </div>
</div>

<div id="excelPreviewModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="excelPreviewModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="excelPreviewModalTitle">上传文件预览</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div style="overflow-x: auto;">
                    <table id="form-input-table" class="table table-striped table-bordered nowrap">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <!-- ... 其他标题列 ... -->
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 表格内容将通过JavaScript动态填充 -->
                        </tbody>
                    </table>
                </div>
                <div id="pagination" class="mt-3">
                    <button id="prevPage" class="btn btn-secondary">上一页</button>
                    <span id="pageInfo" class="mx-2"></span>
                    <button id="nextPage" class="btn btn-secondary">下一页</button>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 当模态框打开时清空文件输入和文件名显示
    $('#uploadModal').on('show.bs.modal', function() {
        $('#inputFile').val(''); // 清空文件输入
        $('#file-chosen').text('未选择文件'); // 重置文件名显示
    });

    // 当选择文件变化时，更新文件名显示
    $('#inputFile').on('change', function() {
        var fileName = $(this).val().split('\\').pop();
        $('#file-chosen').text(fileName || '未选择文件');
    });

    // 每页显示的行数
    var rowsPerPage = 10;
    var currentPage = 1;
    var tableData = [];

    // 处理上传按钮的点击事件
    $('#uploadBtn').on('click', function() {
        var formData = new FormData($('#upload-form')[0]);
        if ($('#inputFile').get(0).files.length === 0) {
            alert("没有文件选中");
            return;
        }
        $.ajax({
            url: '{{ parse_excel_url }}',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                // 隐藏上传模态框
                $('#uploadModal').modal('hide');

                // 获取表头和表体的jQuery对象
                var tableHead = $('#form-input-table thead');
                var tableBody = $('#form-input-table tbody');

                // 清空现有的表头和表体内容
                tableHead.empty();
                tableBody.empty();

                // 从Django模板上下文传递配置到JavaScript
                var upload_excel_preview_config = {{ upload_excel_preview_config|safe }};

                // 使用从服务器返回的数据来构造表头
                var headerRow = $('<tr>'); // 创建表头行
                headerRow.append($('<th>').text('序号')); // 添加序号标题
                $.each(upload_excel_preview_config.columns, function(index, column) {
                    headerRow.append($('<th>').text(column.header)); // 添加其他标题列，设置宽度
                });
                tableHead.append(headerRow); // 将表头行添加到表头中

                // 遍历数据行
                $.each(response, function(index, rowData) {
                    var row = $('<tr>'); // 创建新的行元素
                    row.append($('<td>').text(index + 1)); // 添加序号列，从1开始

                    var cellIndex = 0; // 初始化列索引

                    // 为每个单元格创建对应的输入框或下拉菜单
                    $.each(upload_excel_preview_config.rows, function(key, cell) {
                        var cellElement;
                        var cellValue = rowData[cellIndex] || ''; // 通过列索引获取值

                        if (cell.type === 'text') {
                            // 创建输入框
                            cellElement = $('<input>').attr({
                                style: "width: " + cell.width,
                                type: 'text',
                                class: 'form-control',
                                id: key,
                                name: key,
                                value: cellValue,
                            });
                        } else if(cell.type === 'select') {
                            // 创建下拉菜单
                            cellElement = $('<select>').attr({
                                style: "width: " + cell.width,
                                class: 'form-control',
                                id: key,
                                name: key,
                            });
                            // 添加选项
                            $.each(cell.options, function(optionIndex, optionValue) {
                                var optionElement = $('<option>').val(optionValue).text(optionValue);
                                if(cellValue === optionValue) {
                                    optionElement.attr('selected', 'selected');
                                }
                                cellElement.append(optionElement);
                            });
                        }

                        // 将输入框或下拉菜单添加到单元格中
                        var td = $('<td>').append(cellElement);
                        row.append(td);

                        cellIndex++; // 增加列索引
                    });

                    tableBody.append(row); // 将新的行元素添加到表体中
                });

                // 显示数据预览模态框
                $('#excelPreviewModal').modal('show');
            },
            error: function(xhr, status, error) {
                // 上传失败的回调函数
                // 错误处理...
            }
        });
    });
});
</script>