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

Question

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

我正在使用的资源:

• PHP 框架代码点火器
• 嵌套集库:https://github.com/olimortimer/ci-nested-sets/
• jQuery 库:http://dbushell.github.io/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 个小时的运行测试，但没有任何结果。

• 我尝试用左右字段重新排序相同的数据。
• 我还尝试清理 table 并再次添加菜单。

没有任何有利的结果。

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

EDIT: After great answer the @vadim-ashikhman

• 我用的是库nestable.js的一个Fork，因为他有一个函数可以获取position(https://github.com/BeFiveINFO/Nestable/)
• 代码 Javsascript:

$('#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');
                  }
          });

	});

• PHP 代码:

    $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);
	}

多田!!!而且效果很好

Answer 1

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

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

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