您的位置:首页 > Web前端 > JQuery

jquery 实现表格行的上下移动和置顶

2017-08-29 14:06 417 查看
先上效果图:



点击上移、下移、置顶,可以实现对应的效果。

上代码:

<td>
<a href="javascript:" data-opt="delete" class="layui-btn layui-btn-mini layui-btn-danger">删除</a>
{{# if(index > 0){ }}  //layui的模板语法
<a href="javascript:" data-opt="moveup" class="layui-btn layui-btn-mini">上移</a>
<a href="javascript:" data-opt="movetop" class="layui-btn layui-btn-mini">置顶</a>
<a href="javascript:" data-opt="movedown" style="display: none;" class="layui-btn layui-btn-mini">下移</a>
{{# } else if(index ==0){ }}
<a href="javascript:" data-opt="movedown"  class="layui-btn layui-btn-mini">下移</a>
<a href="javascript:" data-opt="moveup" style="display: none;"  class="layui-btn layui-btn-mini">上移</a>
<a href="javascript:" data-opt="movetop" style="display: none;"  class="layui-btn layui-btn-mini">置顶</a>
{{# } }}

</td>


$('#content').children("tr").each(function (index) {
var $that_tr=$(this);
var diseaseDoctorId=$that_tr.data("id");
$that_tr.children("td:last-child").children("a").each(function () {
var $that_a=$(this);
var action=$that_a.data("opt");
$that_a.on('click',function (e) {
switch (action){
case 'delete':
var name = $that.parent('td').siblings('td[data-field=name]').text();
//询问框
layerTips.confirm('确定要删除[ <span style="color:red;">' + name + '</span> ] ?', { icon: 3, title: '系统提示' }, function (index) {

$.ajax({
url:'<%=staticPath%>/doctor/diseaseDoctor/delere/'+diseaseDoctorId,
type:'get',
dataType:'json',
success:function (result) {
if (result.code==200) {
layer.msg("删除成功");
location.reload();
}
else
layer.msg("删除失败");
},
error:function (result) {
layer.msg("删除失败");
}
});
});
break;
case 'moveup':
console.log("上移");
var prev=$that_a.parents("tr").prev();
var prevIndex=$(prev).index('tr');
$that_a.parents("tr").insertBefore(prev);

if(prevIndex==1){
$that_a.prop("style","display:none");
$that_a.siblings("a[data-opt=movetop]").prop("style","display:none");
$that_a.siblings("a[data-opt=movedown]").prop('style','display:');
$(prev).children("td:last-child").find("a[data-opt=movedown]").prop("style","display:none");
$(prev).children("td:last-child").find("a[data-opt=moveup]").prop("style","display:");
$(prev).children("td:last-child").find("a[data-opt=movetop]").prop("style","display:");
}

break;
case 'movetop':
console.log("置顶");
var first=$that_a.parents("tr").siblings("tr:first");
$that_a.parents("tr").insertBefore(first);
$(first).children("td:last-child").find("a[data-opt=movedown]").prop("style","display:none");
$(first).children("td:last-child").find("a[data-opt=moveup]").prop("style","display:");
$(first).children("td:last-child").find("a[data-opt=movetop]").prop("style","display:");
$that_a.siblings("a[data-opt=moveup]").prop("style","display:none");
$that_a.prop("style","display:none");
$that_a.siblings('a[data-opt=movedown]').prop("style","display:");
break;
case 'movedown':
console.log("下移");
var next=$that_a.parents("tr").next();
$that_a.parents("tr").insertAfter(next);
$that_a.siblings("a[data-opt=moveup]").prop("style","display:");
$that_a.siblings("a[data-opt=movetop]").prop("style","display:");
$that_a.prop("style","display:none");
$(next).children("td:last-child").find("a[data-opt=moveup]").prop("style","display:none");
$(next).children("td:last-child").find("a[data-opt=movetop]").prop("style","display:none");
$(next).children("td:last-child").find('a[data-opt=movedown]').prop("style","display:");

break;
}
});
});
});


我是做后台的,js写的可能比较 low,各位看看即可,欢迎提出修改意见
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息