DataTables Editor表格select字段如何绑定ControllerDrpDwn返回的下拉选项

1. 后端接口适配 #

Editor的select字段默认要求下拉选项包含label（前端显示文本）和value（提交到后端的值）两个属性，你可以选择两种适配方式：

• 方式1：修改返回结构（推荐）

public async Task<IActionResult> ControllerDrpDwn()
{ 
    return Ok(await _context.Dropdownoptions
        .Where(x => x.Selectbezeichnung == "xyz")
        .Select(x => new
        { 
            label = x.Optionbezeichnung, // 前端显示的文本
            value = x.Optionbezeichnung  // 提交给后端的值，如有主键ID建议换成ID
        }).ToListAsync());
}

• 方式2：不改后端，前端指定字段映射
  如果不想调整后端代码，后续前端配置时增加optionsPair参数指定字段映射即可。

2. 前端配置实现 #

方案A：预加载选项（适合选项不频繁变动的场景） #

先请求下拉接口拿到数据后再初始化Editor：

// 先请求下拉选项
$.get("/Controller/ControllerDrpDwn")
.done(function(drpOptions) {
    // 初始化Editor
    editor = new $.fn.dataTable.Editor({
        ajax: { url: "/Controller/EditorTable", type: "POST"},
        table: "#tbl",
        fields: [{
            label: "abc:",
            name: "abc"
        },{
            label: "xyz:",
            name: "xyz",
            type: "select",
            options: drpOptions,
            // 如果你用了上面的方式2没改后端，加下面这行配置
            // optionsPair: { label: 'name', value: 'name' }
        }]
    });
})
.fail(function() {
    alert("下拉选项加载失败");
});

方案B：打开编辑器时动态刷新选项（适合选项实时变动的场景） #

Editor初始化后监听打开事件，每次打开编辑器时请求最新的下拉选项：

// 先正常初始化Editor
editor = new $.fn.dataTable.Editor({
    ajax: { url: "/Controller/EditorTable", type: "POST"},
    table: "#tbl",
    fields: [{
        label: "abc:",
        name: "abc"
    },{
        label: "xyz:",
        name: "xyz",
        type: "select",
        // 没改后端的话同样加optionsPair配置
        // optionsPair: { label: 'name', value: 'name' }
    }]
});
// 监听编辑器打开事件，动态刷新下拉选项
editor.on('open', function() {
    $.get("/Controller/ControllerDrpDwn")
    .done(function(drpOptions) {
        editor.field('xyz').update(drpOptions);
    });
});

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