Bootstrap中table列上下移动咋办 代码是什么

这篇文章给大家分享的是“Bootstrap中table列上下移动怎样做，代码是什么”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

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

实现方式

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();

    });

}

到此这篇关于“Bootstrap中table列上下移动怎样做，代码是什么”的文章就介绍到这了,更多相关内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!