Question

这是我的数组group：

array:4 [▼
  0 => Fields {#7444 ▼
    -id: 1
    -name: "ID"
    -unique_id: "6ab8c870ed"
    -productgroup: PersistentCollection {#7448 ▶}
    -type: Type {#7525 ▼
      +__isInitialized__: true
      -id: 2
      -name: "hidden"
      -unique_id: "5e1086c862"
      -label: "hidden"
       …2
    }
  }
  1 => Fields {#7526 ▼
    -id: 2
    -name: "Name"
    -unique_id: "deb1e9ddda"
    -productgroup: PersistentCollection {#7527 ▶}
    -type: Type {#7529 ▶}
  }
  2 => Fields {#7530 ▶}
  3 => Fields {#7534 ▶}
]

这是我的数组columns：

array:3 [▼
  "id" => ReflectionProperty {#7240 ▶}
  "name" => ReflectionProperty {#7241 ▶}
  "type" => ReflectionProperty {#7244 ▶}
]

这是将行添加到数据表中的方式：

 $(document).on('change', '.item-select', function() {

    var optionValue = $(this).val();
    var myArray = [];

    {% for key, value in group %}
    if(optionValue == "{{ value.id }}"){
      var id = "{{ value.id }}";
      var name = "{{ value.name }}";
      var type = "{{ value.type.name }}";
    }
    {% endfor %}


    if (optionValue) {
      table.row.add({
        {% for key, value in columns %}
        {% if key == "id" %}
        "{{ key }}": id,
        {% elseif key == "name" %}
        "{{ key }}": name,
        {% elseif key == "type" %}
        "{{ key }}": type,
        {% else %}
        "{{ key }}": '',
        {% endif %}
        {% endfor %}
      }).draw();
      $('option', this).first().prop('selected', true);
    }

  });

工作正常。问题是，它是硬编码的。但是我的领域和内容总是不同的。在此示例中，它是id:1, name: ID, type:hidden，但在其他情况下，它可能是id:14, profession:teacher, color: blue, friends: 14。因此，我需要替换变量id, name and type，但我只是不知道该怎么做。

Answer 1

我可以举个例子，说明如何通过javascript对象动态地执行此操作，在twig数组中，可以将数组分配给javascript对象，也可以直接通过ajax获取它，这取决于您。

为了用新列创建数据表，您需要销毁数据表并重新初始化它。销毁和加载表中新列的文档在这里：

https://datatables.net/reference/api/destroy()

我在jsfiddle中为您创建了示例，如何动态加载数据和列，您可以根据需要进行调整：

var data = {
  "data": [
     {
      "id": "1",
      "One": "Row 1 - Field 1",
      "Two": "Row 1 - Field 2",
      "Three": "Row 1 - Field 3"
    },
    {
      "id": "2",
      "One": "Row 2 - Field 1",
      "Two": "Row 2 - Field 2",
      "Three": "Row 2 - Field 3"
    },
    {
      "id": "2",
      "One": "Row 2 - Field 1",
      "Two": "Row 2 - Field 2",
      "Three": "Row 2 - Field 3"
    }
  ],
  "options": [],
  "files": [],
  //in columns you need to map data to key in data array above!!
  "columns": [
    {
      "title": "id",
      "data": "id"
    },
    {
      "title": "One",
      "data": "id"
    },
    {

      "title": "Two",
      "data": "Two"
    },
    {
      "title": "Three",
      "data": "Three"
    }
  ]
}

初始化：

 $('#example').DataTable( {
        dom: "Bfrtip",
        data: data['data'] ,
        columns: data['columns']
    });

https://jsfiddle.net/nicandr/xjue540a/4/

这是基本示例，如何执行。请注意，在获取数据之后，您需要重新初始化表，因为所有数据都将在要提供给数据表的对象中。

现在，没有选项可以不重新初始化而动态加载列，因此，唯一的方法是重新初始化它。请检查有关销毁表的链接，他们在那儿说了。

如何使用数组的树枝循环将行添加到数据表中？

1 个答案: