使用php和nestable.js jquery插件更新nestet set tree

Question

编辑:经过很好的回答@ vadim-ashikhman.问题的结尾.

我正在使用的资源:

• PHP框架Codeigniter
• 嵌套集库: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个小时运行测试,但没有任何结果.

• 我试图用左边和右边的字段重新排序相同的数据.
• 此外,我试图清理表格并再次添加菜单.

没有任何有利的结果.

所以我来找你,看看你是否可以帮助我.

编辑:经过很好的回答@ vadim-ashikhman

• 我使用了一个库的nestable.js,因为他有一个可以获得该位置的函数(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);
	}

TADA!而且效果很好

Answer 1

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

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

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