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