1

Есть входящие данные:

    {
  "id": 3,
  "name": "Основной заголовок",
  "description": "Основное описание",
  "company_id": 1,
  "owner_id": 1,
  "elements": [
    {
      "id": 8,
      "name": "Заголовок 1",
      "position": 0,
      "description": "",
      "parent": 3,
      "type_change": 1,
      "answer_from": 0,
      "answer_to": 10
    },
    {
      "id": 7,
      "name": "Заголовок 2",
      "position": 0,
      "description": "",
      "parent": 6,
      "type_change": 1,
      "answer_from": 0,
      "answer_to": 10
    },
    {
      "id": 1,
      "name": "Заголовок 3",
      "position": 0,
      "description": "",
      "parent": 0,
      "type_change": 1,
      "answer_from": 0,
      "answer_to": 10,
      "answer_list": [
        "Да",
        "Нет"
      ],
      "need_photo": true,
      "need_video": false
    },
    {
      "id": 2,
      "name": "Заголовок 4",
      "position": 0,
      "description": "",
      "parent": 1,
      "type_change": 1,
      "answer_from": 0,
      "answer_to": 10
    },
    {
      "id": 3,
      "name": "Заголовок 5",
      "position": 0,
      "description": "",
      "parent": 2,
      "type_change": 1,
      "answer_from": 0,
      "answer_to": 10
    },
    {
      "id": 4,
      "name": "Заголовок 6",
      "position": 1,
      "description": "",
      "parent": 1,
      "type_change": 1,
      "answer_list": [
        "Да",
        "Нет"
      ]
    },
    {
      "id": 5,
      "name": "Заголовок 7",
      "position": 1,
      "description": "",
      "parent": 1,
      "type_change": 1,
      "answer_list": [
        "Да",
        "Нет"
      ]
    },
    {
      "id": 6,
      "name": "Заголовок 8",
      "position": 0,
      "description": "",
      "parent": 0,
      "type_change": 1,
      "answer_from": 0,
      "answer_to": 10
    }
  ]
}

Для вывода и drag'n'drop используется https://vue.ant.design/components/tree/ Он на входе кушает key и title: Добавляю:

array.forEach((item) => {
                    item.key = item.id;
                    item.title = item.name;
            });

Нужно перестроить массив учитывая вложенность согласно parent свойству. На выходе должно получаться:

    {
  "id": 6,
  "name": "Заголовок 8",
  "position": 0,
  "description": "",
  "parent": 0,
  "type_change": 1,
  "answer_from": 0,
  "answer_to": 10
  "children": [{
     "id": 7,
     "name": "Заголовок 2",
     "position": 0,
     "description": "",
     "parent": 6,
     "type_change": 1,
     "answer_from": 0,
     "answer_to": 10
   }]
}

Не могу сообразить как это сделать.

И второй вопрос: К примеру сделал вывод дерева учитывая специфику. Как связать при клике на элемент из дерева с элементом массива?

5
  • Там же есть кнопочки <> в примерах для показа исходного кода. Ни один из примеров не подходит вам ?
    – user256824
    16 июн 2019 в 7:15
  • Частично подходит. Тот что с drag'n'drop использую. Вот только не соображу как входные данные подогнать учитывая вложенность. Хмм да и мне нужно будет потом отдать данные в "плоском" наборе элементов - без вложенности. Опять же без понятия как... 16 июн 2019 в 7:18
  • Нет, самое важное применить вложенность. Что бы элементы вложить в родительские. В последнем примере образец. 16 июн 2019 в 15:09
  • 1 Создали вложенный массив объектов. 2 Передали в компонент. 3 Попользовались, нажали сохранить. 4 Опять переделали в одноуровневый массив. 5 По факту у них только parent поменяется, так ведь?
    – user256824
    16 июн 2019 в 15:17
  • У них не должен меняться parent. Дочерние элементы должны стать частью предка. 16 июн 2019 в 23:15

1 ответ 1

1

На выходе должно получаться ...

Создание дерева из массива объектов по свойству parent с добавлением новых свойств к каждому объекту из массива.

const inData = {
  "id": 3,
  "name": "Основной заголовок",
  "description": "Основное описание",
  "company_id": 1,
  "owner_id": 1,
  "elements": [
    {"id":8,"name":"Заголовок 1","position":0,"description":"","parent":3,"type_change":1,"answer_from":0,"answer_to":10},
    {"id":7,"name":"Заголовок 2","position":0,"description":"","parent":6,"type_change":1,"answer_from":0,"answer_to":10},
    {"id":1,"name":"Заголовок 3","position":0,"description":"","parent":0,"type_change":1,"answer_from":0,"answer_to":10,"answer_list":["Да","Нет"],"need_photo":true,"need_video":false},
    {"id":2,"name":"Заголовок 4","position":0,"description":"","parent":1,"type_change":1,"answer_from":0,"answer_to":10},
    {"id":3,"name":"Заголовок 5","position":0,"description":"","parent":2,"type_change":1,"answer_from":0,"answer_to":10},
    {"id":4,"name":"Заголовок 6","position":1,"description":"","parent":1,"type_change":1,"answer_list":["Да","Нет"]},
    {"id":5,"name":"Заголовок 7","position":1,"description":"","parent":1,"type_change":1,"answer_list":["Да","Нет"]},
    {"id":6,"name":"Заголовок 8","position":0,"description":"","parent":0,"type_change":1,"answer_from":0,"answer_to":10}
  ]
}

// Создадим дубликат массива объектов только с необходимым набором свойств.
let nested = inData.elements.map(function(item) {
  return {
    // Раскомментируйте для вывода всех свойств.
    // ...item,
    key: item.id,
    title: item.name,
    parent: item.parent
  }
});

// Добавим дочерние элементы.
nested.forEach(function(item, index, array) {
  item.children = array.filter(subItem => item.key === subItem.parent);
});

// Оставим только корневые элементы.
const gData = nested.filter(item => item.parent === 0);

// Распечатаем результат.
result.textContent = JSON.stringify(gData, null, 2);
<pre id="result"></pre>

Как связать при клике на элемент ...

select - функция обратного вызова, когда пользователь щелкает treeNode.

<a-tree class="draggable-tree" draggable @drop="onDrop" @select="edit" :treeData="gData" />

// ...

methods: {
  edit(key, event) {
    key = parseInt(key)

    if (key > 0) {
      let element = this.inData.elements.find(i => i.id === key);
      console.log(element)
    }

    console.log({event})
  }
}

Полный пример dragable списка вложенных элементов.

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false
Vue.config.devtools = false

const App = {
  template: `
<a-layout-content style="padding: 50px">
  <a-tree class="draggable-tree" draggable @drop="onDrop" @select="edit" :treeData="gData" />
  <a-button type="primary" @click="printResult">Результат</a-button><hr />
  <table>
    <thead>
      <tr><th>ID</th><th>Name</th><th>Parent</th></tr>
    </thead>
    <tbody>
      <tr v-for="item in inData.elements">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.parent }}</td>
      </tr>
    </tbody>
  </table>
</a-layout-content>`,
  data() {
    return {
      gData: [],
      inData: {
        "id": 3,
        "name": "Основной заголовок",
        "description": "Основное описание",
        "company_id": 1,
        "owner_id": 1,
        "elements": [
          {"id":8,"name":"Заголовок 1","position":0,"description":"","parent":3,"type_change":1,"answer_from":0,"answer_to":10},
          {"id":7,"name":"Заголовок 2","position":0,"description":"","parent":6,"type_change":1,"answer_from":0,"answer_to":10},
          {"id":1,"name":"Заголовок 3","position":0,"description":"","parent":0,"type_change":1,"answer_from":0,"answer_to":10,"answer_list":["Да","Нет"],"need_photo":true,"need_video":false},
          {"id":2,"name":"Заголовок 4","position":0,"description":"","parent":1,"type_change":1,"answer_from":0,"answer_to":10},
          {"id":3,"name":"Заголовок 5","position":0,"description":"","parent":2,"type_change":1,"answer_from":0,"answer_to":10},
          {"id":4,"name":"Заголовок 6","position":1,"description":"","parent":1,"type_change":1,"answer_list":["Да","Нет"]},
          {"id":5,"name":"Заголовок 7","position":1,"description":"","parent":1,"type_change":1,"answer_list":["Да","Нет"]},
          {"id":6,"name":"Заголовок 8","position":0,"description":"","parent":0,"type_change":1,"answer_from":0,"answer_to":10}
        ]
      }
    }
  },

  mounted() {
    // Отсортируем данные для визуализации снипета.
    this.inData.elements.sort((a, b) => a.id - b.id);

    // Создадим дубликат массива объектов только с необходимым набором свойств.
    // Исходные данные НЕ меняем!
    let nested = this.inData.elements.map(function(item) {
      return {
        key: item.id,
        title: 'ID: '+item.id+'. Name: '+item.name,
        parent: item.parent,
        position: item.position
      }
    });

    // Добавим дочерние элементы.
    nested.forEach(function(item, index, array) {
      item.children = array.filter(subItem => item.key === subItem.parent);
    });

    // Оставим только корневые элементы.
    this.gData = nested.filter(item => item.parent === 0);
  },

  methods: {
    edit(key, event) {
      key = parseInt(key)
      if (key > 0) {
        let element = this.inData.elements.find(i => i.id === key);
        console.log(element)
      }
      console.log({event})
    },
    printResult() {
      // Используем стрелочные функции для поднятия контекста.
      const setParent = (children, key) => {
        // Перебираем всех потомков.
        children.forEach((item) => {
          let element = this.inData.elements.find(i => i.id === item.key);
          // Меняем исходные данные!
          element.parent = key;

          // Отправляем потомков текущего объекта на перебор.
          setParent(item.children, item.key);
        })
      }

      // Всем корневым элементам ставим `parent = 0`.
      setParent(this.gData, 0);
    },
    onDrop(info) {
      // Дальше идет метод из документации.
      // Скопируйте его повторно из документации.
      const dropKey = info.node.eventKey
      const dragKey = info.dragNode.eventKey
      const dropPos = info.node.pos.split('-')
      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) return callback(item, index, arr)
          if (item.children) return loop(item.children, key, callback)
        })
      }
      const data = [...this.gData]
      let dragObj
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1)
        dragObj = item
      })
      if (!info.dropToGap) {
        loop(data, dropKey, (item) => {
          item.children = item.children || [];
          item.children.push(dragObj);
        });
      } else if ((info.node.children || []).length > 0 && info.node.expanded && dropPosition === 1) {
        loop(data, dropKey, (item) => {
          item.children = item.children || [];
          item.children.unshift(dragObj);
        });
      } else {
        let ar, i;
        loop(data, dropKey, (item, index, arr) => {
          ar = arr;
          i = index;
        });
        dropPosition === -1 ? ar.splice(i, 0, dragObj) : ar.splice(i + 1, 0, dragObj);
      }
      this.gData = data;
    },
  }
}

new Vue({
  el: '#app',
  components: {
    'app': App
  },
  template: '<app></app>'
});
<div id="app"></div>

<link href="https://cdn.jsdelivr.net/npm/ant-design-vue@1.3.10/dist/antd.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>
<script src="https://cdn.jsdelivr.net/npm/ant-design-vue@1.3.10/dist/antd.min.js"></script>

2
  • Рустам большое спасибо. Отличный ответ! 17 июн 2019 в 11:20
  • @user2196016, пожалуйста. Там только метод onDrop скопируйте из документации. Жаль, что его нужно постоянно писать, а может я не до конца с ним разобрался. onDrop полностью из документации.
    – user256824
    17 июн 2019 в 11:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.