Javascript 数据表：单元格中的下拉列表

我正在尝试用Datatables生成一个表

我从我的控制器收到一个json，下面是一个示例：

这个json可以更改（列数、列名），我可以用正确的列数和名称构建表

我的问题是:

当“liste”有一个数组和一个空的简单输入时，我怎么能有一个下拉列表呢

有可能吗

编辑： 我忘了解释一些事情。我收到的Json是用于构建表而不是填充表的Json。因此，是否可以在数据进入单元格之前执行columnsDef

编辑编号2： 我使用了我接受的解决方案，但问题在于我的json。我试图发送一个json来构建，并发送一个json来填充表。因此，我更改了json，并发送json中的选项列表来填充表

希望它能帮助其他人

---

谢谢这里有两个解决方案：

1） 使用下拉列表

2） 使用格式化数组（作为替代）

1） 带下拉菜单 最终结果如下所示：

datatables定义如下：

<script type="text/javascript">

  var dataSet = { "records" : [
    { "data" : "123456789",
      "liste" : null,
      "name" : "Nombre Enfants"
    },
    { "data" : "5678901234",
      "liste" : [ "Oui", "Non" ],
      "name" : "Transport"
    }]};

  $(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet.records,
        columnDefs: [
          { targets: [ 0 ], 
            title: "Data", 
            data: "data" },
          { targets: [ 1 ], 
            title: "Liste", 
            data: function ( row ) {
              if (row.liste == null) {
                return null;
              } else {
                return buildDropdown(row.liste);
              }
            } },
          { targets: [ 2 ], 
            title: "Name", 
            data: "name" }
        ]
    } );

  function buildDropdown(data) {
    var dropdown = "<select>";
    for (var i = 0; i < data.length; i++) {
      var option = "<option value=\"" + data[i] + "\">" + data[i] + "</option>";
      dropdown = dropdown + option;
    }
    dropdown = dropdown + "</select>";
    return dropdown;
  }

  } );
</script>

具体来说，

[，]

符号允许您格式化数组数据

我之所以提到这一点，是因为它允许您显示单元格中的所有数组数据，而不是单击下拉列表。但这只是一个建议

您可能会发现，使用此选项，搜索和排序等其他功能会更好

更新 问题已经澄清，表需要根据JSON中提供的数据动态构建

您可以将变量传递给datatables初始值设定项-例如：

var col1 = { targets: [ 0 ], title: "Data", data: "data" };
var col2 = { targets: [ 1 ], title: "Liste", data: "liste" };
var col2 = { targets: [ 2 ], title: "Name", data: "name" };
var dynamicCols = [ col1, col2, col3 ];

上面的

col1

变量定义了列的标题，以及列从哪里获取数据（从

dataSet.data

字段）

dynamicCols

变量可以在

columnDefs

中使用，如下所示：

$(document).ready(function() {
  $('#example').DataTable( {
    data: dataSet.records,
    columnDefs: dynamicCols
} );

但是，我不知道如何使用这种方法在columndef中包含函数（例如，如果需要，将单元格数据显示为下拉列表）

---

还有一些附加的技术可以用来使数据表更具动态性——例如，在线提供了几个示例。在没有看到提供JSON的更详细示例的情况下，我不确定是否还有其他建议。

谢谢您的回答。但是，我的问题是我无法知道目标，因为有时一列有输入，但有时同一目标是一列有数组。所以我不能这么做。@C.Ramp-好的-在这种情况下，你可以对每一列使用我的方法，而不是一列。如果这仍然没有帮助，那么我想我不理解这种情况-对此感到抱歉。也许您可以在您的问题中提供更多的JSON示例，以澄清？关于注释“JSON构建表而不是填充表”，是的，您可以动态构建

columnsDef

。请参阅我最新答案的底部。但我怀疑这仍然不能让你找到解决方案。也许它会给你一些想法。

$(document).ready(function() {
  $('#example').DataTable( {
    data: dataSet.records,
    columnDefs: dynamicCols
} );