Bootstrap table列上下移动效果
时间：2022-06-28 09:17:44 | 栏目：JavaScript代码 | 点击：次
本文实例为大家分享了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();
});
}