时间戳

首页 > 解决方案 > 如何使用数组中的树枝循环将行添加到数据表？

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

问题描述

这是我的数组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但我只是不知道该怎么做。

标签： jqueryarrayssymfonydatatablestwig

解决方案

我可以给你举个例子，你可以如何通过 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/

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

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

推荐阅读