jQuery的排序与自定义规则
问题描述:
我有一个HTML表格有很多下面就类分级规则:“categorie”>“家庭”>“组”>“项目”jQuery的排序与自定义规则
我想要实现jQuery的排序在这个表格部件(TBODY要准确)而是使用自定义的规则,我不明白,使工作:
- “项”只在上面或下面的其他“项”
- “组放“应该只放在一个”团体“之上或”家庭“之下
- ”家庭“守LD只能在另一个“家庭”的顶部或下方的“类别”
- “类别”应该仅放置在另一个“类别”
顶端要排序元素时保持层次放。
换句话说,我正在寻找一个函数,告诉可以在拖动“是(否),你可以(不能)放在这里”进行排序,因此显示或不显示占位符。
答
我找到了解决办法,也许不漂亮,但它的工作:
var isValidPlacement = true;
$('#input-table tbody').sortable({
placeholder: {
element: function (currentItem) {
return $('<tr id="placeholder"/>')[0];
},
update: function (container, p) {
return;
}
},
change: function (event, ui) {
var placeholder = document.getElementById('placeholder');
var currentLevel = $(placeholder).data('level');
var prev = $(placeholder).prev();
var next = $(placeholder).next();
var prevLevel = prev ? prev.data('level') : 0;
var nextLevel = next ? next.data('level') : 0;
// If prevLevel > nextLevel
// then whe are at the end of a container
// so we can put an element of any level between those ones
// Else if prevLevel < newtLevel
// then we are just at the begging of a container
// so we can only put an element of level == prevLevel + 1 == nextLevel
// Finally if prevLevel == nextLevel
// then we are in the middle of a container
// so we can only put an element of level == prevLevel == nextLevel
isValidPlacement = (
prevLevel > nextLevel
&& prevLevel >= currentLevel
&& currentLevel >= nextLevel
||
prevLevel <= nextLevel
&& currentLevel === nextLevel);
placeholder.style.visibility = isValidPlacement ? "" : "hidden";
},
stop: function (event, ui) {
if (!isValidPlacement) {
$(this).sortable("cancel");
}
}
}).disableSelection();
其中 '水平' 是hierarchi水平(这里:类=> 1,家庭=> 2 ...)