排序

1. 按钮排序

点击排序按钮，页面的序号变为可点击的方向键，实现手动排序（第一行没有下箭头，最后一行没有上尖头）

实现方式

1.击则“编辑”，改变内容

<button class="btn btn-info editBtn" style="display:inline-block" onclick="handleTableEditBtn(this)">编辑</button>
<button class="btn btn-primary saveBtn" style="display:none" onclick="handleTableEditBtn(this)">保存</button>
     
   var handleTableEditBtn = function(el){
    "use strict";
    if(el){ // TODO 保存到服务器
        var $el = $(el);
        var $tr = $el.closest("tr");
        var rowspanNum = $tr.data("rowspanNum");
        var btnOption = $el.closest(".tableOptionBtnBox").data("btn");
        var tableOptionBtnBox = $el.closest(".tableOptionBtnBox");
        var $editBtn = $el.closest(".tableOptionBtnBox").find(".editBtn");
        if(btnOption){ // 编辑状态 -> 查看状态
            $el.attr("disabled",true);
            updateAppDataDialog($el);

        }else{ // 查看状态 -> 编辑状态 检查当前APP是否可编辑
            $editBtn.attr("disabled",true);
            checkUpdateAppDataStatus().done(function () {
                $editBtn.attr("disabled",false);
                tableOptionBtnBox.data("btn", 1);
                tableOptionBtnBox.find(".saveBtn").show();
                tableOptionBtnBox.find(".editBtn").hide();
                nextElements($tr, rowspanNum, handleNotEditable);
            }).fail(function () {
                $editBtn.attr("disabled",false);
            });
        }
    }
};  

2.首位行的特殊显示

 // 当点击第一行的⬇时，该行显示两个按钮，目标行显示一个按钮
    if (oldId == 1 && dir == 1) {
        // 共两行，该行显示一个按钮，目标行显示一个按钮
        if (total == 2) {
            $tr.find(".upImgBtn").show();
            $tr.find(".downImgBtn").hide();
            var $nextTr = $(el).parents("tr").next("tr");
            $nextTr.find(".upImgBtn").hide();
            $nextTr.find(".downImgBtn").show();
        } else {
            $tr.find(".upImgBtn").show();
            $tr.find(".downImgBtn").show();
            var $nextTr = $(el).parents("tr").next("tr");
            $nextTr.find(".upImgBtn").hide();
            $nextTr.find(".downImgBtn").show();
        }
    }

    // 当点击第二行的⬆时，该行显示一个按钮，目标行显示两个按钮
    else if (oldId == 2 && dir == 0) {
        if (total == 2) {
            $tr.find(".upImgBtn").hide();
            $tr.find(".downImgBtn").show();
            var $nextTr = $(el).parents("tr").prev("tr");
            $nextTr.find(".upImgBtn").show();
            $nextTr.find(".downImgBtn").hide();
        } else {
            $tr.find(".upImgBtn").hide();
            $tr.find(".downImgBtn").show();
            var $nextTr = $(el).parents("tr").prev("tr");
            $nextTr.find(".upImgBtn").show();
            $nextTr.find(".downImgBtn").show();
        }
    }

    // 当点击倒数第二行的⬇时，该行显示一个按钮，目标行显示两个按钮
    else if (oldId == total - 1 && dir == 1) {
        $tr.find(".upImgBtn").show();
        $tr.find(".downImgBtn").hide();
        var $nextTr = $(el).parents("tr").next("tr");
        $nextTr.find(".upImgBtn").show();
        $nextTr.find(".downImgBtn").show();
    }

    // 当点击倒数第一行的⬆时，该行显示两个按钮，目标行显示一个按钮
    else if (oldId == total && dir == 0) {
        $tr.find(".upImgBtn").show();
        $tr.find(".downImgBtn").show();
        var $nextTr = $(el).parents("tr").prev("tr");
        $nextTr.find(".upImgBtn").show();
        $nextTr.find(".downImgBtn").hide();
    }

3.上移下移

 // 目标行
    var $targetTr;

    // 特殊处理（首行下移）
    if ($div.attr("data-rowid") == 1 && dir == 1) {
        $tr.find(".rowNum").find(".rowNumClass").attr("data-rowid", 2);
        $tr.data("rowspanNum",total);
        var str = $tr.html();
        var start = str.indexOf("</td>") + 5;
        var end = str.lastIndexOf("<td")
        // 第一行头部
        var startPart = str.substring(0, start);

        // 第一行尾部
        var endPart = str.substring(str.lastIndexOf("<td"));

        // 第一行中部
        var oneLine = str.substring(start, end);//截取字符串

        // 第二行
        $targetTr = $(el).parents("tr").next("tr");
        $targetTr.find(".rowNum").find(".rowNumClass").attr("data-rowid", 1);
        var twoLine = $targetTr.html();

        var result1 = startPart + twoLine + endPart;
        var result2 = oneLine

        $tr.html(result1);
        $targetTr.html(result2);

        var data = $targetTr.find("td").eq(3).find(".editable").find("input").val();
        var editable = "";
        if (data == 0) {
            editable += '<input value=0 type="checkbox" class="js-switch form-control" checked name="openStatus">';
        } else {
            editable += '<input value=1 type="checkbox" class="js-switch form-control" name="openStatus">';
        }
        $targetTr.find("td").eq(2).find(".editable").html(editable);

        $targetTr.before("<tr>" + $tr.html() + "</tr>")
        // $targetTr.insertBefore
        $targetTr.data("updatedSort", true);
        // $targetTr.closest(".tableOptionBtnBox").attr("btn", 1);
        $tr.remove();
        // return;
    }
    // 特殊处理（第二行上移）
    // else if ($div.data("rowid") == 2 && dir == 0) {
    else if ($div.attr("data-rowid") == 2 && dir == 0) {
        // 第一行
        $targetTr = $(el).parents("tr").prev("tr");
        $targetTr.data("rowspanNum",total);

        var data = $tr.find("td").eq(3).find(".editable").find("input").val();
        var editable = "";
        if (data == 0) {
            editable += '<input value=0 type="checkbox" class="js-switch form-control" checked name="openStatus">';
        } else {
            editable += '<input value=1 type="checkbox" class="js-switch form-control" name="openStatus">';
        }
        $tr.find("td").eq(2).find(".editable").html(editable);

        var data = $tr.find("td").eq(2).find(".editable").find("input").val();
        var editable = "";
        if (data == 0) {
            editable += '<input value=0 type="checkbox" class="js-switch form-control" checked name="openStatus">';
        } else {
            editable += '<input value=1 type="checkbox" class="js-switch form-control" name="openStatus">';
        }
        $tr.find("td").eq(2).find(".editable").html(editable);

        var str = $targetTr.html();
        var start = str.indexOf("</td>") + 5;
        var end = str.lastIndexOf("<td")
        // 第一行头部
        var startPart = str.substring(0, start);
        // 第一行尾部
        var endPart = str.substring(str.lastIndexOf("<td"));
        // 第一行中部
        var oneLine = str.substring(start, end);//截取字符串

        // 第二行
        var twoLine = $tr.html();

        var result1 = startPart + twoLine + endPart;
        var result2 = oneLine
        $tr.html(result1);
        $targetTr.html(result2);
        $targetTr.before("<tr>" + $tr.html() + "</tr>")
        $targetTr.data("updatedSort", true);
        // $targetTr.closest(".tableOptionBtnBox").attr("btn", 1);
        $tr.remove();
    }
    // 上移
    else if (dir == 0) {
        $targetTr = $(el).parents("tr").prev("tr");

        var data = $tr.find("td").eq(2).find(".editable").find("input").val();
        var editable = "";
        if (data == 0) {
            editable += '<input value=0 type="checkbox" class="js-switch form-control" checked name="openStatus">';
        } else {
            editable += '<input value=1 type="checkbox" class="js-switch form-control" name="openStatus">';
        }
        $tr.find("td").eq(2).find(".editable").html(editable);

        $targetTr.before("<tr>" + $tr.html() + "</tr>");
        $targetTr.data("updatedSort", true);
        $tr.remove();
    }
    // 下移
    else {
        $targetTr = $(el).parents("tr").next("tr");

        var data = $targetTr.find("td").eq(2).find(".editable").find("input").val();
        var editable = "";
        if (data == 0) {
            editable += '<input value=0 type="checkbox" class="js-switch form-control" checked name="openStatus">';
        } else {
            editable += '<input value=1 type="checkbox" class="js-switch form-control" name="openStatus">';
        }
        $targetTr.find("td").eq(2).find(".editable").html(editable);

        $tr.before("<tr>" + $targetTr.html() + "</tr>");
        $tr.data("updatedSort", true);
        $targetTr.remove();

2. 模态框排序

点击排序时，弹出模态框

该方法为bootstrap自带方法，可是找遍全网也没看到示例，不确定是不是被新版本删除掉了。但还是比较实用的。

实现方式

需提前导入 bootstrap-order.min.js

function initSortEvent(index) {

    $("#btn-order").click(function () {

        var numDatas = "";
        var nameDatas = "";
        var data = index.getData();

        $.each(data,function(d_index){
            numDatas=numDatas+ data[d_index].num+",";
            nameDatas=nameDatas+ data[d_index].name+",";
        });
        $.ajax({
            url: contextPath+"/oper/ios/config/sort",
            type: "post",
            dataType: "json",
            cache: false,
            async: false,
            data: {"numDatas":numDatas,"nameDatas":nameDatas},
            success: function (d) {
                if(d.code==200){
                    dataTable.ajax.reload();
                }else{
                    console.log("排序失败");
                }
            }
        });
        index.hide();
    });
    $('#content').on("click", function (){
        index.hide();
    });
    $('#sidebar').on("click", function (){
        index.hide();
    });
    $('#showSourceSort').on('click',function (event) {
        event.stopPropagation();//阻止事件冒泡
        $("#ios-config-table").find("tr").each(function (i) {
            var status = $(this).find(".options").data("status");
            // 只排序启用状态
            if (i > 0 && status == 0) {
                var order = $(this).find('td').eq(0).html();
                var title = $(this).find('td').eq(1).find('span').html();
                index.addItem({id: order, name: title, num: parseInt(order)})
                // addSort({id: order, name: title, num: parseInt(order)}, index)
            }
        });
        index.toggleShow();
    });
}

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用vue框架怎么制作可拖拽的页面编辑器功能

  这篇文章主要介绍了Vue 实现可视化拖拽页面编辑器的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下

• 在ElementUI中因为关联对象给模型层没有给value-key赋值，导致下拉框点选后看不到值

  这篇文章主要介绍了ElementUI下拉框选择后不显示值问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

• 使用JS获取url参数有几种方法，如何实现

  目录一、字符串 split 方法二、使用 URLSearchParams 方法1、解析搜索字符串2、生成搜索字符串3、Node.js 代码三、使用正则匹配方法四、使用第三方库 qs一、字符串 split 方法url地址是字符串形式的，所以利用split方法将参数提取出来，该方法比较常用，而且容易理解（无关正则）let

• 如何用原生JS写一个五子棋游戏，代码是什么

  这篇文章主要为大家详细介绍了原生JavaScript实现五子棋游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• 用JavaScript如何写周日历，代码是什么

  周日历是日常生活中不常用到的历法系统，一般用于政府、商务的会计年度或者学校教学日历中。本文将利用JavaScript制作个简单的周日历，感兴趣的可尝试一下