BootstrapTable Load方法无法生成复选框问题求助

问题场景 #

我用以下代码创建了Bootstrap Table：

<table id="vendor-table" data-toggle="table" data-sort-class="table-active" data-sortable="true"
        data-search="true" data-virtual-scroll="false">
    <thead>
        <tr>
            <th></th>
            <th data-field="brand" data-sortable="true">Brand </th>
            <th data-field="client" data-sortable="true">Client</th>
            <th data-field="spid" data-sortable="true">Selling Partner ID</th>
            <th data-field="acct" data-sortable="true">Account Type</th>
            <th data-field="cc" data-sortable="true">Country Code</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

编写了填充表格的函数：

function updateVendorTable(filteredVendorAccts) {
    var table = $('#vendor-table');

    // Map the data to include the checkbox column before the id column
    var mappedData = filteredVendorAccts.map(function (account) {
        return {
            '':'<label class="checkbox"><input type="checkbox" name="vendor-ids" value="' + account.id + '" /></label>',
            brand: account.brand,
            client: account.client,
            spid: account.sp_id,
            acct: account.account_type,
            cc: account.country_code

        };
    });

    // Update the table data using the load method
    table.bootstrapTable('load', mappedData);
   
}

期望第一列显示复选框，但实际该列显示为“-”。已确认映射后的数据中空键对应的HTML字符串是正确的，示例数据如下：

{
    "": "<label class=\"checkbox\"><input type=\"checkbox\" name=\"vendor-ids\" value=\"15324\" /></label>",
    "brand": "Edge",
    "client": "GSK_DE",
    "spid": "amzn1.vg.5666682",
    "acct": "vendor",
    "cc": "DE",
    "id": 15324
}

解决方案 #

问题出在两个关键地方，修正后即可正常渲染复选框：

1. 为第一列指定合法的data-field并开启HTML渲染 #

Bootstrap Table无法识别空字符串作为字段名，且默认会转义HTML内容。修改表头的第一列，指定字段名并关闭HTML转义：

<th data-field="checkboxCol" data-escape="false"></th>

2. 修改数据映射的键名 #

将映射数据中的空键改为和表头一致的字段名checkboxCol：

var mappedData = filteredVendorAccts.map(function (account) {
    return {
        checkboxCol: '<label class="checkbox"><input type="checkbox" name="vendor-ids" value="' + account.id + '" /></label>',
        brand: account.brand,
        client: account.client,
        spid: account.sp_id,
        acct: account.account_type,
        cc: account.country_code
    };
});

额外修正：HTML语法错误 #

原表格标签中data-search="true"后面多了一个逗号，需要去掉，避免潜在的语法问题：

<!-- 修正前 -->
data-search="true",data-virtual-scroll="false"

<!-- 修正后 -->
data-search="true" data-virtual-scroll="false"

完成以上修改后，第一列的复选框即可正常渲染显示。

内容的提问来源于stack exchange，提问作者Nabeel Khan Ghauri