我有一些列表允许我使用sortable.js重新排列,并且我需要在拖动完成时创建一个排序顺序数组。HTML如下:
<div id="catscontainer">
<div id="parentcat1" class="parentcatcontainer">
<h4 class="parentcathead">Parent Category One</h4>
<ul class="subcatlist" id="ul-parentcat1">
<li id="parentcat1-subcat1">Sub Category One</li>
<li id="parentcat1-subcat2">Sub Category Two</li>
<li id="parentcat1-subcat3">Sub Category Three</li>
</ul>
</div>
<div id="parentcat2" class="parentcatcontainer">
<h4 class="parentcathead">Parent Category Two</h4>
<ul class="subcatlist" id="ul-parentcat2">
<li id="parentcat2-subcat1">Sub Category One</li>
<li id="parentcat2-subcat2">Sub Category Two</li>
<li id="parentcat2-subcat3">Sub Category Three</li>
</ul>
</div>
</div>
我一直在使用以下可排序的代码:
var sortySubCats = Sortable.create(el, {
group: 'titles',
animation: 150,
dataIdAttr: 'id',
onUpdate: function( /**Event*/ evt) {
var orderListSub = sortySubCats.toArray();
}
}
这导致了一个数组,该数组orderListSub
仅输出与之交互的父类别中的项目列表。很好,但是不适合我的目的。在mySQL中,我存储了整个层次结构数组的序列化版本。这个问题的结构是多余的,但是在完成每个拖动后,我确实需要按顺序输出以下内容:
Parent Category ID
> Sub Category ID
> Sub Category ID
> Sub Category ID
Parent Category ID
> Sub Category ID
> Sub Category ID
> Sub Category ID
etc...
放入一个我可以序列化的数组中 目前,我正在遍历catscontainer div的每个UL以获取ID名称,并在其中进行子迭代以获取LI ID名称。这应该按顺序返回它们。是否有通过jquery进行清理的特别干净的方法,或者sortable实际上是否比我所经历的更好地实现了此功能?
更新:
我使用以下简单的jquery来捕获列表中父级和子级元素的ID,它们的顺序与拖动后它们的外观相匹配。似乎是最直接的方法,我可以添加更多代码以将其转换为所需的数组。如果没有更好的建议,我将其添加为答案。
function catsToArrayJSON() { // called after drag complete
$("#catscontainer ul").each(function () {
console.log('Parent is: ' + this.id);
$(this).children("li").each(function () {
console.log('Child is: ' + this.id);
})
});
}
我使用以下简单的jquery来捕获列表中父级和子级元素的ID,它们的顺序与拖动后它们的外观相匹配。似乎是最直接的方法,我可以添加更多代码以将其转换为所需的数组。
function catsToArrayJSON() { // called after drag complete
$("#catscontainer ul").each(function () {
console.log('Parent is: ' + this.id);
$(this).children("li").each(function () {
console.log('Child is: ' + this.id);
})
});
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句