动态填充Bootstrap Table时行值无法返回Outer HTML且函数返回Promise问题

问题根源 #

Bootstrap Table的data-formatter要求绑定的函数同步返回HTML字符串，但你当前的handleFormatFileCategory是异步函数（async标记），本质返回的是Promise对象，表格会直接将Promise转为字符串[object Promise]渲染，导致列显示异常。同时原代码每行渲染都发起一次API请求，存在性能浪费。

解决思路 #

预加载附件分类数据，将异步请求移到表格初始化前完成，再用同步函数生成select的HTML内容，既解决异步渲染问题，又优化请求次数。

步骤1：预加载分类数据 #

定义全局变量存储分类数据，提前发起一次API请求获取数据：

// 全局存储预加载的附件分类数据
let attachmentCategories = [];

// 预加载分类数据函数
function loadAttachmentCategories() {
    const urlService = VirtualPathUtility + "api/Fleet/Vehicles/VehicleDetails/AttachmentCategoryList/";
    return fetch(urlService)
        .then(response => {
            if (response.ok) {
                return response.json();
            } else {
                throw new Error("Error retrieving attachment categories.");
            }
        })
        .then(data => {
            attachmentCategories = data;
            return data;
        })
        .catch(error => {
            SendMessage("Vehicles", "populateAttachmentCAT: " + error.message, HiddenContactId.val());
            console.error(error);
        });
}

步骤2：修改为同步格式化函数 #

直接使用预加载好的分类数据，同步生成select的HTML，并自动选中当前行的分类值：

// 同步格式化函数，生成select的HTML字符串
function handleFormatFileCategory(value, row) {
    const selectElement = document.createElement("select");
    
    // 添加默认选项
    const defaultOption = document.createElement("option");
    defaultOption.value = "0";
    defaultOption.innerText = "Please Select";
    selectElement.appendChild(defaultOption);

    // 添加分类选项并设置选中状态
    attachmentCategories.forEach(category => {
        const option = document.createElement("option");
        option.value = category.Id;
        option.innerText = category.CatName;
        if (category.Id === row.FileCategory) {
            option.selected = true;
        }
        selectElement.appendChild(option);
    });

    return selectElement.outerHTML;
}

步骤3：调整表格初始化逻辑 #

确保分类数据加载完成后再初始化表格，避免渲染时数据未就绪：

1. 先修改ASPX中的表格标签，移除自动初始化的data-toggle="table"属性：

<table id="attachmentTable"
       class="table-condensed table-striped mGrid"
       data-search="false"
       data-sort-name="Id"
       data-sort-order="asc"
       data-show-columns="false"
       data-advanced-search="false"
       data-id-table="advancedTable"
       data-show-multi-sort="false"
       data-show-export="false"
       data-toolbar="#toolbar"
       data-click-to-select="false"
       data-cookie="false"
       data-pagination="true"
       data-show-jump-to="false"
       data-url="api/Fleet/Vehicles/VehicleDetails/AttachmentList/<%=Hidden_VehicleId.Value %>/"
       data-cookie-id-table=""
       data-page-size="10"
       data-page-list="[10, 25, 500, 1000, 10000, All]"
       data-custom-view="attachmentCardViewFormatter"
       data-show-custom-view="false">
    <!-- 表头内容不变 -->
</table>

2. 页面加载完成后手动初始化表格：

document.addEventListener("DOMContentLoaded", () => {
    // 先加载分类数据，再初始化表格
    loadAttachmentCategories().then(() => {
        $('#attachmentTable').bootstrapTable();
    });
});

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