Bootstrap table列上下移动效果

本文实例为大家分享了Bootstrap table列上下移动效果的具体代码,供大家参考,具体内容如下

排序

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • JS组件Bootstrap Table使用方法详解

    最近客户提出需求,想将原有的管理系统,做下优化,通过手机也能很好展现,想到2个方案: a方案:保留原有的页面,新设计一套适合手机的页面,当手机访问时,进入m.zhy.com(手机页面),pc设备访问时,进入www.zhy.com(pc页面) b方案:采用bootstrap框架,替换原有页面,自动适应手机.平板.PC 设备 采用a方案,需要设计一套界面,并且要得重新写适合页面的接口,考虑到时间及成本问题,故项目采用了b方案 一.效果展示 二.BootStrap table简单介绍 bootStra

  • Bootstrap Table列宽拖动的方法

    在之前做过的一个web项目中,前端表格是基于jQuery和Bootstrap Table做的,客户要求能利用拖动改变列宽,为了总结和备忘,现将实现的过程记录如下: 1. Bootstrap Table可拖动,需要用到它的Resizable扩展插件,具体可见bootstrap-table的官方文档链接: http://bootstrap-table.wenzhixin.net.cn/zh-cn/extensions/ 进入之后,找到Resizable插件,点击Home进入github可以找到详细的

  • Bootstrap Table使用方法详解

    bootstrap-table使用总结 bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述.本文将着重讲解自己在项目中使用到bootstrap-table的一些理解和如何学习它. 首先交代一下,jquery ,bootstrap

  • 值得分享的bootstrap table实例

    bootstrap table 封装了一套完善的数据表格组件,把下面的代码复制一下估计你需要的基本功能都有了,没有的再看看手册对比着我给的实例也能很快的熟悉了. 客户端 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap-Table</title> <link rel="stylesheet" href

  • Bootstrap Table 在指定列中添加下拉框控件并获取所选值

    背景 最近在使用Bootstrap table ,有一个在某一列添加一个下拉列表,并且通过 "getAllSelections"方法获取所选行的需求,在实现这个功能的时,走了一些弯路,遇到了一些坑.所以今天总结出来,既是自己的学习,也分享给大家,希望能够有些帮助. 如何解决 添加这个下拉列表有以下两种方法: 利用Column options 中的 formatter 将数据转换成下拉列表的形式 使用bootstrap-table拓展中的editable插件 这次主要介绍第一种,基本的思

  • 基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)

    在上篇文章:基于Bootstrap的Metronic框架实现页面链接收藏夹功能,介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按钮的方式移动收藏记录,功能虽然实现的还算不错,不过文章出来后,有读者同行指出可以利用直接拖动的方式实现排序更方便,因此对其中列表记录的排序进行了研究,从而介绍了如何利用Sortable开源JS组件实现拖动排序的处理,本篇随笔介绍了该组件在连接收藏夹排序中的应用. 1.收藏记录的排序处理回顾 上篇随笔介绍的收藏夹处理,主要就是为了方便用户快速进

  • bootstrap table列和表头对不齐的解决方法

    我们在使用bootstraptable做表格展示时,有时需要固定表格的高度当数据超出高度会出现滚动条,这时有可能出现表头列和数据列对不齐.出现这个问题的原因是数据列出现了滚动条占了宽度,造成表头 数据 的div宽度不一样. 通过Chrome浏览器 f12,看到样式为 .fixed-table-header  .fixed-table-body .fixed-table-footer的3个div容器宽度不一样, .fixed-table-header  .fixed-table-footer这两个

  • bootstrap table单元格新增行并编辑

    table单元格新增行并编辑,具体内容如下 需要 bootstrap.min.css -- [ Bootstrap ] jquery-1.8.2.min.js -- [ Jquery ] 代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>新建HTML</title> <

  • bootstrap table实现单击单元格可编辑功能

    要使bootstrap-table实现可编辑,需要配合使用x-editable插件. 先在页面上导入必要的css和js文件 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <

  • 值得分享的轻量级Bootstrap Table表格插件

    基于Bootstrap的轻量级表格插件Bootstrap Table只需简单的配置,就可以拥有强大的支持固定表头.单/复选.排序.分页.搜索及自定义表头等功能,更好的提高开发效率和减少开发时间. 1.插件描述:Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框.复选框.排序.分页等,插件下载. 2.特点: 基于Bootstrap 3开发(同时支持 Bootstrap 2) 响应式界面 固定表头 完全可配置 支持data属性 显示/隐藏列 显示/隐藏表头 使用AJAX获取JS

随机推荐