Как я могу добавить строки в таблицы данных с помощью веточек из массивов? - PullRequest
Новая
       22

Как я могу добавить строки в таблицы данных с помощью веточек из массивов?

0 голосов
/ 30 января 2019

Это мой массив 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 Но я просто не могу понять, как это сделать.

1 Ответ

0 голосов
/ 30 января 2019

Я могу привести пример того, как вы можете сделать это динамически через объекты javascript, в массиве веток вы можете назначить свой массив объекту 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/

Вот базовый пример, как это сделать.Обратите внимание, что вам нужно повторно инициализировать таблицу после того, как вы получили данные, потому что все данные будут в объекте, который вы собираетесь предоставить в таблицы данных.

В настоящее время нет возможности динамически загружать столбцы без повторной инициализации, поэтому единственный способ - его повторная инициализация.Пожалуйста, проверьте ссылку на уничтожить таблицу, они там говорят.

...