JQuery TablEdit 从数据库中添加可编辑的列下拉选项

【问题标题】：JQuery TablEdit add editable column dropdown option from databaseJQuery TablEdit 从数据库中添加可编辑的列下拉选项
【发布时间】：2022-01-21 15:46:30
【问题描述】：

我在使用 TableEdit 时遇到问题

这是我阅读的文档中的内容：

// Example #2
columns: {
    // Column used to identify table row.
    // [column_index, input_name]
    identifier: [0, 'id'],
    // Columns to transform in editable cells.
    // [[column_index, input_name], [column_index, input_name, select_options]]
    editable: [[1, 'car'], [2, 'color', '{"1": "Red", "2": "Green", "3": "Blue"}']]
}

在可编辑键中，第二个数组包含一个类似 json 的字符串，当我按下编辑按钮时，该字符串呈现为下拉列表。

我的问题是，我如何动态地制作类似 json 的字符串？

我有一个返回部门列表的 ajax 请求。我想将这些部门传递到该可编辑列中。

【问题讨论】：

标签： javascript jquery ajax tabledit

【解决方案1】：

在我看来，您可以尝试调用 ajax 请求来获取部门列表。之后创建tabledit。你可以这样试试：

Javascript：

ajax 请求完成后。您可以使用 JSON.stringify() 将 JavaScript 对象转换为字符串。

function initTableEdit() {
     $.post('select-data.php')
          .done(function (res) {
               let data = [[1, 'First Name'], [2, 'Last Name'], [3, 'Username', JSON.stringify(res)]]
               creatTableEdit(data)
          })
 }

function creatTableEdit(data) {
     $('#example2').Tabledit({
          editButton: true,
          removeButton: false,
          columns: {
              identifier: [0, 'id'],
              editable: data
          }
     });
}

PHP：select-data.php

<?php
header('Content-Type: application/json');
echo json_encode([
    1 => '@mdo', 2 => '@fat', 3 => '@twitter',
]);

die();

【讨论】：