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)