对页面的table表格进行上下移动排序,移动操作不写入数据库,最后对操作统一保存。下面是详细代码:html代码:
<table class="layui-table layui-table-min"> <tbody> <tr> <th width="100">编号</th> <th width="100">类型</th> <th>名称</th> <th width="150">课时时长</th> <th width="150">操作</th> </tr> <tr class="queue"> <td>1001</td> <td>视频</td> <td style="text-align:left;">回顾三先天曾合招过的战役,曾多次拯救苦境</td> <td>5小时12分钟36秒</td> <td> <div class="layui-btn-group"> <span class="layui-btn layui-btn-xs question-up">上移</span> <span class="layui-btn layui-btn-normal layui-btn-xs question-down">下移</span> <span class="layui-btn layui-btn-xs layui-btn-danger question-del" data-mid="1001">删除</span> </div> </td> </tr> <tr class="queue"> <td>1002</td> <td>Word</td> <td style="text-align:left;">霹雳2021年强档大作《碧血玄黄》登场人物介绍</td> <td>4小时36分钟56秒</td> <td> <div class="layui-btn-group"> <span class="layui-btn layui-btn-xs question-up">上移</span> <span class="layui-btn layui-btn-normal layui-btn-xs question-down">下移</span> <span class="layui-btn layui-btn-xs layui-btn-danger question-del" data-mid="1002">删除</span> </div> </td> </tr> <tr class="queue"> <td>1000</td> <td>PDF</td> <td style="text-align:left;">意琦行,倦收天双双黑化,正道战力堪忧</td> <td>6小时59分钟59秒</td> <td> <div class="layui-btn-group"> <span class="layui-btn layui-btn-xs question-up">上移</span> <span class="layui-btn layui-btn-normal layui-btn-xs question-down">下移</span> <span class="layui-btn layui-btn-xs layui-btn-danger question-del" data-mid="1000">删除</span> </div> </td> </tr> </tbody> </table>
javascript代码:
$('#questionDiv').on('click','.question-del',function(){ let qBox = $(this).parents('.question-item'); $(this).parents('tr').remove(); set_mids(qBox) }) $('#questionDiv').on('click','.question-up',function(e){ let obj = $(e.target).closest('tr'); let qBox = $(this).parents('.question-item'); tr_pre($(obj[0]),qBox); }) $('#questionDiv').on('click','.question-down',function(e){ var obj = $(e.target).closest('tr'); let qBox = $(this).parents('.question-item'); tr_next($(obj[0]),qBox); }) function set_mids(qBox){ let items = qBox.find('.question-del'); let ids = []; if(items.length>0){ items.each(function(index,item){ ids.push($(item).data('mid')); }) }else{ qBox.find('table').append('<tr class="question-none"><td colspan="5">请选择章节内容</td></tr>'); } qBox.find('[name="mids[]"]').val(ids.join(',')); } function tr_pre(o,qBox) { var pres = o.prevAll('tr.queue'); if (pres.length > 0) { var tmp = o.clone(true); var oo = pres[0]; o.remove(); $(oo).before(tmp); set_mids(qBox); } else{ layer.msg('已经第一个了'); } } function tr_next(o,qBox) { var nexts = o.nextAll('tr.queue'); if (nexts.length > 0) { var tmp = o.clone(true); var oo = nexts[0]; o.remove(); $(oo).after(tmp); set_mids(qBox); }else{ layer.msg('已经最后一个了'); } }