jquery中的置顶,置底,向上,向下的排序功能
css
.selectedLi{background: #f0ad4e;color:#fff;}
html部分
<ul class="seetSelect2" id='sysAllSet'> <li value="1" index='1'>集团考核保障</li> <li value="2" index='2'>业务全景监控视图</li> <li value="3" index='3'>专家辅助分析</li> <li value="4" index='4'>动态基线</li> <li value="5" index='5'>综合报表</li> <li value="6" index='6'>告警监控综合管理</li> <li value="7" inddex='7'>告警分析系统</li> </ul>
<button type="button" class="btn btn-default" id='setTop'>置顶</button>
<button type="button" class="btn btn-default" id='toTop'>向上</button>
<button type="button" class="btn btn-default" id='toBottom'>向下</button>
<button type="button" class="btn btn-default" id='setBottom'>置底</button>
js部分
//事件初始化:点击li时候,为当前点击的li添加样式,方便后续操作 判断 是否选中当前点击的元素(用的是ul li,不是select option);
$("#sysAllSet li").click(function(){ $(".seetSelect2 li").removeClass('selectedLi'); $(this).addClass('selectedLi'); }); $("#sysAllSet li").dblclick(function(){//双击元素 去除样式类名 取消当前选中
$(this).removeClass('selectedLi'); });
//置顶
$("#setTop").click(function(){ if($("#sysAllSet>li").hasClass("selectedLi")){ var selLi = $("#sysAllSet>li.selectedLi"); if (selLi.index() != 0) { selLi.fadeOut(10).fadeIn(100); $("#sysAllSet").prepend(selLi); }else{ alert("已经置顶啦~"); return; } }else{ return false; } });
//置底
$("#setBottom").click(function(){
if($("#sysAllSet>li").hasClass("selectedLi")){
var selLi = $("#sysAllSet>li.selectedLi");
var length = $("#sysAllSet>li").length;
if (selLi.index() != length-1) {
selLi.fadeOut(10).fadeIn(100);
$("#sysAllSet").append(selLi);
}else{
alert("已经置底啦~");
return;
};
}else{
return false;
}
});
//向上
$("#toTop").click(function(){
if($("#sysAllSet>li").hasClass("selectedLi")){
var selLi = $("#sysAllSet>li.selectedLi");
if (selLi.index() != 0) {
selLi.fadeOut(10).fadeIn(100);
selLi.prev().before(selLi);
}else{
alert("已经置顶啦~");
return;
}
}else{
return false;
}
});
//向下
$("#toBottom").click(function(){
if($("#sysAllSet>li").hasClass("selectedLi")){
var selLi = $("#sysAllSet>li.selectedLi");
var length = $("#sysAllSet>li").length;
if (selLi.index() != length-1) {
selLi.fadeOut(10).fadeIn(100);
selLi.next().after(selLi);
}else{
alert("已经置底啦~");
return;
}
}else{
return false;
}
});
数组数据:
// 上移:
up(index, array) { if (index === 0) return false // 将上一个数组元素值替换为当前元素值,并将被替换的元素值赋值给当前元素 array[index] = array.splice(index - 1, 1, array[index])[0] return array }
// 下移:
down(index, array) { if (index === array.length - 1) return false // 将上下个数组元素值替换为当前元素值,并将被替换的元素值赋值给当前元素 array[index] = array.splice(index + 1, 1, array[index])[0] return array }
// 置顶:
top(index, array) { if (index === 0) return false // 删除当前数组元素,并将被删除的值添加到数组开头 array.unshift(array.splice(index, 1)[0]) return array }
// 置底:
bottom(index, array) { if (index === array.length - 1) return false // 删除当前数组元素,并将被删除的值添加到数组末尾 array.push(array.splice(index, 1)[0]) return array }
// 交换:
exchange(i, j, array) { array[i] = array.splice(j, 1, array[i])[0] return array }