Layui选择单选框实现table行上下移动，并实现数据的排序

描述

由于表格是layui的方法渲染完成的，所以使用js无法获取到某个表格的tr（等待方法），只能使用layui的方法table.cache.testReload（testReload为table.render中的id）；

在仅仅进行上下移动表格行后，layui无法获取到调整顺序后的表格数据；

so，在上下移动的时候就可以把表格数据进行交换（比如：上移某行时，把这行数据和他上一行的数据交换），这样不论怎么移动，最终表格数据都是移动之后的。

实现

关键点

前台的table使用单选框；

前台三个按钮，上移、下移、确认顺序；

使用table监听；

请求时，给数据的排序字段赋值；

请求成功后，重载表格；

 

table渲染关键字

table.render{

elem: '#test'

id:"testReload"

} 

js

最外层包裹组件

layui.use(['form', 'table', 'layer'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
}

//监听单选框数据
//获取选中的tr
var data_tr;
table.on('radio(test)',function (obj) {
    data_tr = $(this);
});
//上移
$(".upformButton").on("click",function() {
    var tbData = table.cache.testReload; //是一个Array
    if (data_tr == null) {
        layer.msg("请选择元素");
        return;
    }
    var tr = $(data_tr).parent().parent().parent();
    if ($(tr).prev().html() == null) {
        layer.msg("已经是最顶部了");
        return;
    }else{
        // 未上移前，记录本行和下一行的数据
        var tem = tbData[tr.index()];
        var tem2 = tbData[tr.prev().index()];

        // 将本身插入到目标tr之前
        $(tr).insertBefore($(tr).prev());
        // 上移之后，数据交换
        tbData[tr.index()] = tem;
        tbData[tr.next().index()] = tem2;
    }
})
// 下移
$(".downformButton").on("click",function() {
    var tbData = table.cache.testReload;
    if (data_tr == null) {
        layer.msg("请选择元素");
        return;
    }
    var tr = $(data_tr).parent().parent().parent();
    if ($(tr).next().html() == null) {
        layer.msg("已经是最底部了");
        return;
    } else{
        // 记录本行和下一行的数据
        var tem = tbData[tr.index()];
        var tem2 = tbData[tr.next().index()];
        // 将本身插入到目标tr的后面
        $(tr).insertAfter($(tr).next());
        // 交换数据
        tbData[tr.index()] = tem;
        tbData[tr.prev().index()] = tem2;
    }

});

//表单元素确认顺序按钮
$(".confirmormButton").on("click",function (){
    // 已经调整好顺序了
    var tbData = table.cache.testReload;
    // 用于存放elementKey和elementOrder，主键和排序字段，用于后台更新
    var data = [];
    for (var i = 0; i < tbData.length; i++) {
        var elementKey = tbData[i].elementKey;
        var elementOrder = i + 1;
         data.push({
             "elementKey":elementKey,
             "elementOrder":elementOrder
         });
    }
    $.ajax({
        url: ajaxRoot,
        contentType: "application/json",
        type: "post",
        dataType: 'json',
        data: params,
        success: function (res) {
            layer.msg("确认成功", {icon: 6});
            // 重载表格
            table.reload('testReload', {
            });
        }

    });

});