如何在jQuery Nestable插件中获取子项和id后拖放项目并在数据库中更新?
2022-08-30 15:20:33
我正在使用jQuery Nestable插件为网站创建菜单编辑器。我试图在用户点击菜单项并更改其位置后获取项目ID和子项。
问题:我不知道如何获取ID和儿童并更新到数据库中。
这是jQuery Nestable插件
<script>
$(document).ready(function () {
var updateOutput = function (e) {
var list = e.length ? e : $(e.target), output = list.data('output');
if (window.JSON) {output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
} else {
output.val('JSON browser support required for this demo.');
}
console.log(list.nestable('serialize'));
console.log(window.JSON.stringify(list.nestable('serialize')));
};
$('#nestable').nestable({
group: 1,
maxDepth: 7,
}).on('change', updateOutput);
updateOutput($('#nestable').data('output', $('#nestable-output')));
});
</script>
这是菜单的HTML
<div class="cf nestable-lists">
<div class="dd" id="nestable">
<ol class="dd-list">
<li class="dd-item" data-id="1"> <div class="dd-handle">Item 1 when parent == 0</div> </li>
<li class="dd-item" data-id="44"> <div class="dd-handle"> Item 2 when this parent_id == its id </div>
<ol class="dd-list">
<li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
<li class="dd-item" data-id="4"><div class="dd-handle">Item 3</div></li>
<li class="dd-item" data-id="5"><div class="dd-handle">Item 3</div></li>
<li class="dd-item" data-id="6"><div class="dd-handle">Item 3</div></li>
</ol>
</li>
</ol>
</div>
</div>
控制台上的结果
[{"id":1},{"id":44,"children":[{"id":3},{"id":4},{"id":5},{"id":6}]}]
版
在我的结构中,我想在Parent_id == id时更新菜单,其中菜单id并创建菜单项的级别,M_order的次数。但我不知道要创建这个结构。
这里是var_dump($this->input->post('list'));
1 =>
array (size=1)
'id' => string '2' (length=1)
2 =>
array (size=1)
'id' => string '3' (length=1)
3 =>
array (size=1)
'id' => string '4' (length=1)
4 =>
array (size=1)
'id' => string '5' (length=1)
5 =>
array (size=2)
'id' => string '6' (length=1)
'children' =>
array (size=1)
0 =>
array (size=2)
...
这是我的表格结构和菜单的图像