使用 php 和 nestable.js jquery 插件更新嵌套集树

update nestet set tree with php and nestable.js jquery plugin

EDIT: After great answer the @vadim-ashikhman. The end of the question.

我正在使用的资源:

我成功地添加了类别和子类别。

我还能够使用 nestable jQuery 库显示包含所有类别的菜单。

到目前为止一切顺利。

现在,当我尝试通过拖放进行排序时。捕获整个阵列,这里是一个例子:

[{
  "id": 1,
  "children": [{
    "id": 2,
    "children": [{
      "id": 3
    }, {
      "id": 6
    }, {
      "id": 5
    }, {
      "id": 7
    }, {
      "id": 9
    }]
  }, {
    "id": 8,
    "children": [{
      "id": 10,
      "children": [{
        "id": 11
      }, {
        "id": 12
      }, {
        "id": 13
      }, {
        "id": 14
      }, {
        "id": 15
      }]
    }, {
      "id": 16,
      "children": [{
        "id": 17
      }, {
        "id": 18
      }, {
        "id": 19
      }, {
        "id": 20
      }]
    }]
  }, {
    "id": 22,
    "children": [{
      "id": 23
    }, {
      "id": 24
    }, {
      "id": 25
    }, {
      "id": 26
    }]
  }, {
    "id": 27,
    "children": [{
      "id": 28
    }, {
      "id": 29
    }, {
      "id": 30
    }, {
      "id": 31
    }]
  }, {
    "id": 32
  }, {
    "id": 39
  }, {
    "id": 40
  }]
}]

但是不知道如何更新位置,这让我很困惑,我测试了将近16个小时运行但没有任何结果。

没有任何有利的结果。

所以我来找你,看看你能不能帮我。

EDIT: After great answer the @vadim-ashikhman

$('#nestable').nestable({
          group: 1,
          maxDepth :6

      }).on('dragEnd', function(event, item, source, destination, position) {
     // Make an ajax request to persist move on database
     // here you can pass item-id, source-id, destination-id and position index to the server
     // ....
     var parent_id = $(item).parent().parent().data('idcata');
     var actual_id = $(item).data('idcata');
     var prev_id   = $(item).prev("li").data('idcata');
     var page_id   = $(item).data('pagina-id');

     console.log("id "+ actual_id + "\nParent: "+ parent_id +"\nPosition:" + position + "\nPrev : " +  prev_id + "\nPagina_id: "+page_id);

     $.ajax({
                type: "POST",
                dataType: "json",
                url: '<?=site_url("admin/categories/ordenar")?>',
                data: {

                  id:actual_id,
                  parent_id:parent_id,
                  position:position,
                  prev_id:prev_id,
                  page_id:page_id,
                },
                cache: false,
                success: function(data) {

                    if(data.data==1)
                        alert('Guardado!!');
                    else
                       alert('No se ha podido guardar la posición');
    
                   },
                   error: function() {
                    alert('No se ha podido guardar la posición');
                  }
          });

 });

    $idcata      = $this->input->post('id');
 $newParentId = $this->input->post('parent_id');
 $newPosition = $this->input->post('position');
 $prevId      = $this->input->post('prev_id');
 $page_id     = $this->input->post('page_id');

 $this->nested_set = new Nested_set();
 $this->nested_set->setControlParams('nested_set_tree');
 $categoria = $this->nested_set->getNodeFromId($idcata);
 $categoriaPadre = $this->nested_set->getNodeFromId($newParentId);

 if($newPosition == 0 ){
  $newCategoria = $this->nested_set->setNodeAsFirstChild($categoria,$categoriaPadre);
 }else{

  $prevCategoria = $this->nested_set->getNodeFromId($prevId);
  $newCategoria  = $this->nested_set->setNodeAsNextSibling($categoria,$prevCategoria);
 }

田田!!!而且效果很好

当您将节点移动到新位置时,获取新位置的前一个节点和父节点:

  1. 如果未找到前一个节点,则插入移动的节点作为父节点的第一个子节点。
  2. 如果找到前一个节点,只需使用库中的 setNodeAsNextSibling() 方法。

您不需要捕获和更新整棵树。