Bootstrap-Table 单元格格式化：实现动态下拉选择与数据绑定

Bootstrap-Table formatter 函数概述

bootstrap-table 提供了一个强大的 formatter 函数，允许开发者自定义单元格的显示内容。当表格渲染时，formatter 函数会被调用，接收当前单元格的值 (value)、整行数据 (row) 和行索引 (index) 作为参数。该函数的核心职责是返回一个 html 字符串，这个字符串将替换原始单元格的内容。这为在表格中嵌入复杂的交互式元素（如按钮、链接或本文讨论的下拉选择框）提供了极大的灵活性，使得表格不仅能展示数据，还能成为数据输入的界面。

实现动态下拉选择框并设置默认选中值

要在 bootstrap-table 单元格中实现一个动态的下拉选择框 (<select>)，并根据单元格的现有数据预选一个值，关键在于 formatter 函数的正确实现。以下是具体的实现步骤和代码示例：

1. 定义选项数据源： 首先，需要一个映射对象来存储下拉框所有可能的选项值及其对应的显示文本。这个对象通常是固定不变的，用于构建下拉框的所有选项。

   const callResults = {
     "79": "Sale Made",
     "335": "Rep will call back",
     "81": "Upsold Device",
     "83": "Outbound Call Needed",
     "337": "Not Interested/Bad Call",
     "739": "Support Call",
     "773": "Dropped Call",
     "775": "RMA",
     "777": "Other"
   };

   登录后复制

2. 创建 <select> 元素： 在 formatter 函数内部，使用 document.createElement 方法创建一个 <select> 元素。为了与页面的整体风格保持一致，通常会为其添加必要的 CSS 类，例如 form-control 以适配 Bootstrap 样式。

   const select = document.createElement("select");
   select.className = "form-control"; // 添加 Bootstrap 样式类

   登录后复制

3. 遍历数据源并创建 <option> 元素： 遍历 callResults 对象，为每个键值对创建一个 <option> 元素。将 key 设置为 option.value，将 text 设置为 option.text。

4. 关键：设置默认选中项： 在创建每个 <option> 元素时，需要将其 value 与当前单元格的原始数据 value 进行比较。如果两者匹配，则为该 <option> 元素添加 selected 属性。这一步必须在选项添加到 <select> 元素之前完成，以确保浏览器在渲染时能够正确识别并预选该选项。

   for (const [key, text] of Object.entries(callResults)) {
     const option = document.createElement("option");
     option.value = key; // 设置选项的值
     option.text = text; // 设置选项的显示文本
   
     // 比较当前单元格的值与选项的键，如果匹配则设置其为选中状态
     // 注意：这里使用 '==' 进行类型不严格比较，以应对可能的类型差异（如数字字符串与数字）
     if (value == key) {
       option.setAttribute("selected", "true"); // 设置 selected 属性
     }
   
     select.appendChild(option); // 将选项添加到 <select> 元素中
   }

   登录后复制

5. 返回 HTML 字符串： 最后，将构建好的 <select> 元素的 outerHTML 返回。bootstrap-table 会将这个 HTML 字符串渲染到单元格中，从而显示带有预选值的下拉选择框。

   return select.outerHTML;

   登录后复制

完整示例代码

以下是整合上述逻辑的 callResultFormatter 函数：

/**
 * Bootstrap-Table 单元格格式化函数，用于生成带有预选值的下拉选择框。
 * @param {string|number} value 当前单元格的原始值。
 * @param {object} row 当前行的数据对象。
 * @param {number} index 当前行的索引。
 * @returns {string} 包含下拉选择框的 HTML 字符串。
 */
function callResultFormatter(value, row, index) {
    // 定义下拉框的选项数据源，键为选项值，值为显示文本
    const callResults = {
        "79": "Sale Made",
        "335": "Rep will call back",
        "81": "Upsold Device",
        "83": "Outbound Call Needed",
        "337": "Not Interested/Bad Call",
        "739": "Support Call",
        "773": "Dropped Call",
        "775": "RMA",
        "777": "Other"
    };

    // 创建 <select> 元素
    const select = document.createElement("select");
    select.className = "form-control"; // 添加 Bootstrap 样式类，使下拉框美观

    // 遍历选项数据源，为每个选项创建 <option> 元素并添加到 <select> 中
    for (const [key, text] of Object.entries(callResults)) {
        const option = document.createElement("option");
        option.value = key; // 设置选项的实际值
        option.text = text; // 设置选项的显示文本

        // 检查当前单元格的原始值是否与当前选项的键匹配
        // 使用 '==' 进行非严格相等比较，以处理可能存在的类型差异（例如，value是字符串"79"，key是数字79）
        if (value == key) {
            option.setAttribute("selected", "true"); // 如果匹配，则设置该选项为默认选中状态
        }

        select.appendChild(option); // 将创建好的选项添加到下拉框中
    }

    // 返回 <select> 元素的完整 HTML 字符串，bootstrap-table 会将其渲染到单元格中
    return select.outerHTML;
}

集成到 Bootstrap-Table 配置

将上述 formatter 函数集成到 bootstrap-table 的 columns 配置中非常简单。只需在目标列的定义中指定 formatter 属性为你的函数名即可：

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

function initTable() {
    $table.bootstrapTable('destroy').bootstrapTable({
        height: 760,
        locale: "en-US",
        classes: "table table-bordered table-hover table-striped",
        sortable: true,
        filterControl: true,
        columns: [
            // ... 其他列的定义
            {
                title: 'Result', // 列标题
                field: 'UF_CRM_1678511065', // 对应数据源中的字段名
                formatter: callResultFormatter // 指定自定义的格式化函数
            }
            // ... 其他列的定义
        ]
    });
}

常见陷阱与注意事项

在实现过程中，有几个常见的错误点需要特别注意，它们可能导致下拉框无法正确显示预选值：

1. 比较操作符的选择 (== vs ===)：

   • 推荐使用 value == key 而不是 value === key 进行比较。bootstrap-table 传递给 formatter 的 value 可能是一个字符串类型（例如 "79"），而你的 callResults 对象的键如果定义为数字（例如 79），则 ===（严格相等）会因为类型不匹配而导致比较失败。==（非严格相等）会尝试进行类型转换后再比较，这在大多数情况下是期望的行为。

2. 设置 selected 属性的方式：

   • 务必使用 option.setAttribute("selected", "true") 来设置选项的选中状态。尝试使用 option.selected = true 可能在某些情况下（尤其是在返回 outerHTML 字符串时）不起作用。setAttribute 确保了 HTML 字符串中包含 selected 属性，从而在浏览器解析时能够正确渲染出预选状态。

3. selected 属性的设置时机：

   • selected 属性必须在创建每个 option 元素时，并在将其添加到 select 元素之前（或紧随其后）设置。最安全和推荐的做法是在遍历 callResults 的循环内部，当匹配条件满足时立即设置 option.setAttribute("selected", "true")。试图在循环外部统一设置可能会因为 select.querySelector 在尚未完全构建的 DOM 片段中查找失败而导致问题。

4. formatter 函数的返回类型：

   • formatter 函数必须返回一个 HTML 字符串。select.outerHTML 正是这样做的，它返回整个 <select> 元素及其所有子元素的 HTML 表示。返回其他类型（如 DOM 对象本身）将不会被 bootstrap-table 正确渲染。

总结

通过 bootstrap-table 提供的 formatter 函数，我们可以非常灵活地在表格单元格中嵌入复杂的交互式组件。要实现一个动态的下拉选择框并根据单元格数据预选，关键在于在 formatter 函数内部，针对每个选项创建时进行条件判断，并使用 option.setAttribute("selected", "true") 正确地设置选中状态。理解这些实现细节和常见的陷阱，将有助于构建功能更强大、用户体验更佳的 bootstrap-table 应用。

以上就是Bootstrap-Table 单元格格式化：实现动态下拉选择与数据绑定的详细内容，更多请关注php中文网其它相关文章！