Bootstrap?table列上下移動效果
更新時間：2022年02月22日 09:43:20 作者：此生無悔入暴漫
這篇文章主要為大家詳細介紹了Bootstrap?table列上下移動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Bootstrap table列上下移動效果的具體代碼，供大家參考，具體內(nèi)容如下
排序
1. 按鈕排序
點擊排序按鈕，頁面的序號變?yōu)榭牲c擊的方向鍵，實現(xiàn)手動排序（第一行沒有下箭頭，最后一行沒有上尖頭）
實現(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 保存到服務器
? ? ? ? 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) 檢查當前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();
? ? ? ? }
? ? }
? ? // 當點擊倒數(shù)第二行的?時，該行顯示一個按鈕，目標行顯示兩個按鈕
? ? 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();
? ? }
? ? // 當點擊倒數(shù)第一行的?時，該行顯示兩個按鈕，目標行顯示一個按鈕
? ? 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. 模態(tài)框排序
點擊排序時，彈出模態(tài)框
該方法為bootstrap自帶方法，可是找遍全網(wǎng)也沒看到示例，不確定是不是被新版本刪除掉了。但還是比較實用的。
實現(xiàn)方式
需提前導入 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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
- Bootstrap Table列寬拖動的方法
- bootstrap table列和表頭對不齊的解決方法
- Bootstrap Table使用方法詳解
- JS組件Bootstrap Table使用方法詳解
- bootstrap table實現(xiàn)單擊單元格可編輯功能
- bootstrap table單元格新增行并編輯
- 值得分享的bootstrap table實例
- 值得分享的輕量級Bootstrap Table表格插件
- 基于BootStrap的Metronic框架實現(xiàn)頁面鏈接收藏夾功能按鈕移動收藏記錄(使用Sortable進行拖動排序)
相關文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)頁面鼠標點擊出現(xiàn)圖片特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
JavaScript創(chuàng)建對象的幾種方式及關于this指向問題
這篇文章主要介紹了JavaScript創(chuàng)建對象的幾種方式及關于this指向問題，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值。需要的小伙伴可以參考一下2022-07-07
JavaScript創(chuàng)建數(shù)組的方法詳解
這篇文章主要為大家介紹了JavaScript創(chuàng)建數(shù)組的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要為大家詳細介紹了JavaScript純色二維碼變成彩色二維碼的方案，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
JavaScript中幾種時間格式之間的簡單轉(zhuǎn)換
近期在練習或?qū)戫椖繒r經(jīng)常會遇到時間格式的轉(zhuǎn)換問題,今天我就來總結(jié)一下,這篇文章主要給大家介紹了關于JavaScript中幾種時間格式之間的簡單轉(zhuǎn)換,需要的朋友可以參考下2024-01-01
Bootstrap 是一個用于快速開發(fā) Web 應用程序和網(wǎng)站的前端框架。本文給大家介紹BootStrap制作導航條實例代碼，感興趣的朋友一起學習吧2016-05-05
JavaScript中實現(xiàn)鍵值對應的字典與哈希表結(jié)構的示例
字典或者哈希表這樣的鍵值對應結(jié)構在其他很多語言中都有內(nèi)置,非常好用,這里我們來看一下JavaScript中實現(xiàn)鍵值對應的字典與哈希表結(jié)構的示例:2016-06-06
這篇文章主要介紹了使用JavaScript 實現(xiàn)的人臉檢測的方法和實例，非常的不錯，這里推薦給大家，有需要的小伙伴參考下。2015-03-03
音樂播放用的的幾個函數(shù)...2006-09-09
JavaScript實現(xiàn)與使用發(fā)布/訂閱模式詳解
這篇文章主要介紹了JavaScript實現(xiàn)與使用發(fā)布/訂閱模式,較為詳細的分析了發(fā)布/訂閱模式的概念、原理并結(jié)合實例形式分析了javascript實現(xiàn)與使用發(fā)布/訂閱模式的相關操作技巧,需要的朋友可以參考下2019-01-01