数据:单元格中的下拉列表

Question

我正在尝试用数据表生成一个表。

我从我的控制器收到一个json，这里有一个示例：

​

​

这个json可以更改(列数、列名)，我可以用好的列数和好的名称构建我的表。

我的问题是：

当"liste“有一个数组，当它为null时，我如何才能有一个下拉列表？

有可能吗？

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

编辑编号2:我使用了我接受的解决方案，但问题在于我的json。我试着派一个json去建房子，派一个json去填桌子。因此，我更改了json，并在json中发送选项列表，以填充表。

希望它能帮助其他人。

谢谢

Answer 1

以下是两种解决方案：

( 1)跌落。

( 2)使用格式化数组(作为替代)。

( 1)下坠

最终结果如下：

​

​

可数据的定义如下：

<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>

它根据一个非空值是一个数组的假设构建了一个下拉列表。这在你的数据中可能并不总是如此--只是我的一个假设而已。

2)使用格式化数组

为了防止这也是有意义的，DataTables有一个格式化数组数据的内置语法，因此它显示在如下单元格中：

​

​

在这种情况下，您不再需要下拉构建器函数。除本部分外，其他一切均与备选案文(1)相同：

{ targets: [ 1 ], 
  title: "Liste", 
  data: "liste[, ]" },

具体来说，[, ]表示法允许您格式化数组数据。

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

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

更新

这个问题澄清了，表需要根据JSON中提供的数据动态构建。

您可以将变量传递给可数据初始化器-例如：

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
} );

但是，我不知道如何使用这种方法将函数包含在列中(例如，如果需要，可以将单元格的数据作为下拉列表)。

还有一些额外的技术可以用来使datatable更加动态，例如这里。没有看到提供更详细的JSON示例，我不确定是否还有其他建议可供参考。