Bootstrap?table列上下移動效果
更新時(shí)間：2022年02月22日 09:43:20 作者：此生無悔入暴漫
這篇文章主要為大家詳細(xì)介紹了Bootstrap?table列上下移動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Bootstrap table列上下移動效果的具體代碼，供大家參考，具體內(nèi)容如下
排序
1. 按鈕排序
點(diǎn)擊排序按鈕，頁面的序號變?yōu)榭牲c(diǎn)擊的方向鍵，實(shí)現(xiàn)手動排序（第一行沒有下箭頭，最后一行沒有上尖頭）
實(shí)現(xiàn)方式
1.擊則“編輯”，改變內(nèi)容
<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 保存到服務(wù)器
? ? ? ? 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){ // 編輯狀態(tài) -> 查看狀態(tài)
? ? ? ? ? ? $el.attr("disabled",true);
? ? ? ? ? ? updateAppDataDialog($el);
? ? ? ? }else{ // 查看狀態(tài) -> 編輯狀態(tài) 檢查當(dāng)前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.首位行的特殊顯示
?// 當(dāng)點(diǎn)擊第一行的?時(shí)，該行顯示兩個(gè)按鈕，目標(biāo)行顯示一個(gè)按鈕
? ? if (oldId == 1 && dir == 1) {
? ? ? ? // 共兩行，該行顯示一個(gè)按鈕，目標(biāo)行顯示一個(gè)按鈕
? ? ? ? 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();
? ? ? ? }
? ? }
? ? // 當(dāng)點(diǎn)擊第二行的?時(shí)，該行顯示一個(gè)按鈕，目標(biāo)行顯示兩個(gè)按鈕
? ? 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();
? ? ? ? }
? ? }
? ? // 當(dāng)點(diǎn)擊倒數(shù)第二行的?時(shí)，該行顯示一個(gè)按鈕，目標(biāo)行顯示兩個(gè)按鈕
? ? 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();
? ? }
? ? // 當(dāng)點(diǎn)擊倒數(shù)第一行的?時(shí)，該行顯示兩個(gè)按鈕，目標(biāo)行顯示一個(gè)按鈕
? ? 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.上移下移
?// 目標(biāo)行
? ? 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. 模態(tài)框排序
點(diǎn)擊排序時(shí)，彈出模態(tài)框
該方法為bootstrap自帶方法，可是找遍全網(wǎng)也沒看到示例，不確定是不是被新版本刪除掉了。但還是比較實(shí)用的。
實(shí)現(xiàn)方式
需提前導(dǎo)入 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");
? ? ? ? ? ? // 只排序啟用狀態(tài)
? ? ? ? ? ? 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();
? ? });
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
- Bootstrap Table列寬拖動的方法
- bootstrap table列和表頭對不齊的解決方法
- Bootstrap Table使用方法詳解
- JS組件Bootstrap Table使用方法詳解
- bootstrap table實(shí)現(xiàn)單擊單元格可編輯功能
- bootstrap table單元格新增行并編輯
- 值得分享的bootstrap table實(shí)例
- 值得分享的輕量級Bootstrap Table表格插件
- 基于BootStrap的Metronic框架實(shí)現(xiàn)頁面鏈接收藏夾功能按鈕移動收藏記錄(使用Sortable進(jìn)行拖動排序)
相關(guān)文章
原生JS實(shí)現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法
這篇文章主要介紹了原生JS實(shí)現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法,涉及javascript動態(tài)創(chuàng)建頁面元素、事件監(jiān)聽、回調(diào)函數(shù)使用等相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
Javascript設(shè)計(jì)模式之觀察者模式(推薦)
觀察者模式有時(shí)也稱為發(fā)布--訂閱模式，在觀察者模式中，有一個(gè)觀察者可以管理所有的目標(biāo)，等到有狀態(tài)發(fā)生改變的時(shí)候發(fā)出通知2016-03-03
跳轉(zhuǎn)到另一個(gè)頁面的方法有很多，在本文將為大家詳細(xì)介紹下js中如何實(shí)現(xiàn)5秒后跳轉(zhuǎn)到另一個(gè)頁面，感興趣的朋友可不要錯(cuò)過2013-10-10
靈活使用數(shù)組制作圖片切換js實(shí)現(xiàn)
這篇文章主要介紹了靈活使用數(shù)組制作圖片切換效果，js實(shí)現(xiàn)圖片切換特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
JavaScript控制各種瀏覽器全屏模式的方法、屬性和事件介紹
瀏覽器全屏模式的啟動函數(shù)requestFullscreen仍然需要附帶各瀏覽器的js方言前綴，相信下面這段代碼需要你花大量的搜索才能湊齊：2014-04-04
JavaScript實(shí)現(xiàn)Sleep函數(shù)的代碼
大家知道，JavaScript中沒有內(nèi)置我們常用的sleep()函數(shù)，只有定時(shí)器setTimeout()和循環(huán)定時(shí)器setInterval()2007-03-03
這篇文章主要為大家詳細(xì)介紹了JavaScript周期性獲取短信驗(yàn)證碼的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
javascript異常處理實(shí)現(xiàn)原理詳解
這篇文章主要介紹了javascript異常處理實(shí)現(xiàn)原理詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
高山登不上,不是因?yàn)轶w力不支,只因鞋里一粒。學(xué)習(xí)也是如此，因而有必要把JavaScript中常見的和與其它語言不同的那些細(xì)節(jié)學(xué)習(xí)一下2012-06-06
這篇文章主要介紹了詳解微信JS-SDK選擇圖片遇到的坑，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08