fancytree - сортировка с получением порядка узлов, сортировка только на одном уровне гнезда - PullRequest
Новая
       23

fancytree - сортировка с получением порядка узлов, сортировка только на одном уровне гнезда

0 голосов
/ 09 октября 2018

Я использую fancytree с сортируемыми расширениями и обнаружил 2 проблемы, с которыми пытаюсь бороться часами.Может быть, кто-то может мне помочь.Цель состоит в том, чтобы иметь возможность сортировать элементы на одном уровне гнезда, но теперь я могу сортировать только корневые узлы.Во-вторых, думаю, что важнее, и я понятия не имею, почему это так работает.Когда я пытаюсь получить необычные узлы дерева (конечно, я хотел бы получить их в текущем отсортированном порядке), я все время получаю один и тот же порядок, не полагаясь на отображение вида.Я использую эти события для получения узлов: $('#tree').fancytree("getTree").toDict()

html: 

<div id="tree"></div>

Javascript: 

$(function() { // on page load
  $("#tree").fancytree({
    debugLevel: 0,
    selectMode: 1,
    extensions: ["dnd"],
    source: [{
        title: "Node 1",
        key: "1",
        "baloney": 44
      },
      {
        title: "Node 2",
        key: "2432"
      },
      {
        title: "Folder 2",
        key: "2",
        folder: true,
        children: [{
            title: "Node 2.1",
            key: "3",
            myOwnAttr: "abc"
          },
          {
            title: "Node 2.2",
            key: "4"
          },
                    {
            title: "Node 2.3",
            key: "5"
          },          {
            title: "Node 2.4",
            key: "6"
          },          {
            title: "Node 2.5",
            key: "7"
          }
        ]
      }
    ],
dnd5: {
                    preventForeignNodes: true,
                    preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
                    preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
                    dragStart: function(node, data) {

                        return true;
                    },
                    dragEnter: function(node, data) {

                        return true;
                    },
                    dragDrop: function(node, data) {
                        data.otherNode.moveTo(node, data.hitMode);
                    },
                    activate: function(event, data) {
                    },
                    draggable: {
                        appendTo: "body",
                        connectToSortable: '#tree > ul',
                        containment: "parent",
                        revert: "invalid"
                    }
                },
  });

  $('#tree > ul').sortable({
    connectWith:"#fancytree",
    out: function(event, ui) {
      if (event.originalEvent.type === "mousemove") {
        $(ui.item).data('drugout', true);
      }
    }
  });

});

А вот ссылка на скрипку: Ссылка

1 Ответ

0 голосов
/ 09 октября 2018

Вам также необходимо добавить сортируемые дочерние узлы.Добавьте приведенный ниже код для инициализации fancytree.Эта функция в основном наблюдает за расширением дочерних узлов, а затем активирует сортировку для дочерних узлов. 

expand: function() {
    $('.fancytree-has-children').siblings().sortable();
},

Я также обновил jsfiddle.Проверьте ссылку: https://jsfiddle.net/3zmLfe1h/11/

Ответ на ваш второй вопрос: я не уверен в этом, но, возможно, fancytree каким-то образом сохраняет заказ и возвращает его вам всякий раз, когда вы пытаетесь его получить.Вы можете получить все значения, используя jQuery и Sortable.

...