Select2与DataTables Editor联动问题：编辑回显失效求助

在使用Select2作为DataTables Editor的输入框实现自动补全功能时，选项展示、数据保存至数据库均正常，但刷新页面后再次编辑行，单选项和多选项的Select2输入框都无法回显已保存的信息，需修复单文本选项和多选项的回显问题。

提供的代码 #

HTML代码 #

<table class="table nowrap" id="tbbl" width="100%">
<thead>
<tr>
<th>Marca</th>
<th>Cor</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

<script>
$(document).ready(function () {
    var editor = new $.fn.dataTable.Editor({
        ajax: 'includes/table.sells.php',
        table: '#tbbl',
        fields: [
            {
                label: 'Marca:',
                name: 'marca',
                type: 'select2',
                opts: {
                    "theme": "bootstrap",
                    tags: true,
                    minimumInputLength: 0,
                    placeholder: 'Marca',
                    allowClear: true,
                    ajax: {
                        url: 'select2.php',
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return {
                                q: params.term,
                                nomecampo: "marca",
                            };
                        },
                        processResults: function (data) {
                            return {
                                results: data
                            };
                        },
                        cache: false,
                    }
                }
            },
            {
                label: 'Cor:',
                name: 'cor',
                type: 'select2',
                opts: {
                    "theme": "bootstrap",
                    tags: true,
                    minimumInputLength: 0,
                    placeholder: 'Cor',
                    allowClear: true,
                    multiple: true,
                    ajax: {
                        url: 'select2.php',
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return {
                                q: params.term,
                                nomecampo: "cor",
                            };
                        },
                        processResults: function (data) {
                            return {
                                results: data
                            };
                        },
                        cache: false,
                    }
                }
            },
            {
                "label": "Estado:",
                "name": "estado",
                "type": "select",
                "options": ["Pendente", "Concluído", "Rejeitado", "Outro"]
            },
        ]
    });
    var table = $('#tbbl').DataTable({
        dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>",
        scrollX: false,
        scrollY: false,
        autoWidth: false,
        "select": true,
        lengthChange: false,
        stateSave: false,
        "stateDuration": 10,
        deferRender: true,
        responsive: true,
        "paging": false,
        "order": [
            [0, "desc"]
        ],
        ajax: 'includes/table.sells.php',
        columns: [
            {
                "data": "estado"
            },
            {
                "data": "marca"
            },
            {
                "data": "cor"
            },
        ],
        "initComplete": function (settings, json) {
            this.api().buttons().container().appendTo('#tbbl_wrapper .col-sm-6:eq(0)');
        },
    });
    new $.fn.dataTable.Buttons(table, {
        buttons: [{
                extend: "create",
                editor: editor,
                className: 'btn-group btn btn-primary',
                text: 'add',
                key: 'a'
            },
            {
                extend: "edit",
                editor: editor,
                className: 'btn-group btn btn-warning',
                text: 'edit',
                key: 'e'
            },
            {
                extend: "remove",
                editor: editor,
                className: 'btn-group btn btn-danger',
                text: 'del',
                key: 'x'
            },
        ],
    });
});
</script>

PHP代码（select2.php） #

<?php
if (!isset($_GET['q'])){ $_GET['q']="";}
if (!isset($_GET['nomecampo'])){ $_GET['nomecampo']="";}
$db = new PDO('mysql:host=127.0.0.1;dbname=61HSD65G', 'D65G', 'ASDD561HSD65G');
$db->exec("set names utf8");
$stmt = $db->prepare("SELECT DISTINCT ".$_GET['nomecampo']." FROM `sells` WHERE ".$_GET['nomecampo']." LIKE :pesquisa");
$stmt->execute(array(':pesquisa' => '%' . $_GET['q'] . '%'));
$results = array();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
  $results[] = array('id' => $row[$_GET['nomecampo']], 'text' => $row[$_GET['nomecampo']]);
}

header('Content-Type: application/json');
echo json_encode($results);
?>

解决方案 #

问题根源 #

编辑已存在行时，Select2需要将已保存的id值与选项列表匹配才能回显，但当前配置下，Editor打开表单时不会自动加载对应已选值的选项，尤其是AJAX动态加载场景下，已保存的值可能不在初始选项列表中。

修复步骤 #

1. 为单选项（Marca）添加回显处理

在Editor的open事件中，手动为Select2输入框添加已保存的选项：

editor.on('open', function(e, mode, action) {
    // 处理单选项Marca
    var marcaValue = this.field('marca').val();
    if (marcaValue && mode === 'edit') {
        var $marcaSelect = this.field('marca').input();
        // 检查选项是否已存在，不存在则添加
        if ($marcaSelect.find('option[value="' + marcaValue + '"]').length === 0) {
            $marcaSelect.append(new Option(marcaValue, marcaValue, true, true));
            $marcaSelect.trigger('change');
        }
    }
});

2. 为多选项（Cor）添加回显处理

多选项需拆分已保存值（假设数据库用逗号分隔存储），逐个添加选项：

editor.on('open', function(e, mode, action) {
    // 处理多选项Cor
    var corValue = this.field('cor').val();
    if (corValue && mode === 'edit') {
        var $corSelect = this.field('cor').input();
        var values = corValue.split(',').map(val => val.trim());
        values.forEach(function(val) {
            if ($corSelect.find('option[value="' + val + '"]').length === 0) {
                $corSelect.append(new Option(val, val, true, true));
            }
        });
        $corSelect.val(values).trigger('change');
    }
});

3. 优化Select2 AJAX配置（可选）

让Select2初始化时自动加载已选值对应的选项，修改ajax的data参数：

// 以Marca为例，修改opts中的ajax部分
ajax: {
    url: 'select2.php',
    dataType: 'json',
    delay: 250,
    data: function (params) {
        var query = {
            q: params.term,
            nomecampo: "marca",
        };
        // 初始化无搜索词但有已选值时，传递已选值给后端加载
        if (params.action === 'query' && !params.term && editor.field('marca').val()) {
            query.q = editor.field('marca').val();
        }
        return query;
    },
    processResults: function (data) {
        return {
            results: data
        };
    },
    cache: false,
}

内容的提问来源于stack exchange，提问作者José Oliveira