使用 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.
我正在使用的资源:
- PHP 框架 Codeigniter
- 嵌套集库:https://github.com/olimortimer/ci-nested-sets/
- jQuery图书馆:http://dbushell.github.io/Nestable/
我成功地添加了类别和子类别。
我还能够使用 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);
}
田田!!!而且效果很好
当您将节点移动到新位置时,获取新位置的前一个节点和父节点:
- 如果未找到前一个节点,则插入移动的节点作为父节点的第一个子节点。
- 如果找到前一个节点,只需使用库中的
setNodeAsNextSibling()
方法。
您不需要捕获和更新整棵树。
EDIT: After great answer the @vadim-ashikhman. The end of the question.
我正在使用的资源:
- PHP 框架 Codeigniter
- 嵌套集库:https://github.com/olimortimer/ci-nested-sets/
- jQuery图书馆:http://dbushell.github.io/Nestable/
我成功地添加了类别和子类别。
我还能够使用 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);
}
田田!!!而且效果很好
当您将节点移动到新位置时,获取新位置的前一个节点和父节点:
- 如果未找到前一个节点,则插入移动的节点作为父节点的第一个子节点。
- 如果找到前一个节点,只需使用库中的
setNodeAsNextSibling()
方法。
您不需要捕获和更新整棵树。