排序

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);});}}
};

首位行的特殊显示

 // 当点击第一行的⬇时，该行显示两个按钮，目标行显示一个按钮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();}

上移下移

  // 目标行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();});
}

Bootstrap之table列上下移动相关推荐

python测试开发django-173.bootstrap实现table表格行内编辑
前言网上看了很多基于bootstrap的table表格行内编辑,需要基于bootstrap-table,bootstrap-table-edit,x-editable等插件,写的很复杂. 我想实现的 ...
layui table 列覆盖
layui table 列个数超过10列后,表头发生覆盖现象. 临时解决方法:注释掉下面代码: ,'{{# if(left){ }}','<div class="layui-table ...
vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
关于bootstrap的table表显示无法找到匹配内容的问题随笔
关于bootstrap的table表报错无法找到匹配内容的问题随笔 springboot+bootstrap springboot+bootstrap 前天使用若依框架展示数据.由于代码生成器生成的表 ...
去除bootstrap的table样式中单元格边框线
使用bootstrap的table样式,在非纯白背景下,会有单元格边框线,影响美观. 去除方式: <style type="text/css"> bod ...
antd的Table列选择、列拓展
antd的Table列选择.列拓展列选择:rowSelection属性 //选择的项目存放在数组中 const [selectedRow, setSelectedRow] = useState< ...
IE9 浏览器绑定大数据会造成Table列错位问题解决方案
IE9 浏览器绑定大数据时,一般采用Repeater,GridView和Trimpath js插件,Repeater和Trimpath js插件会造成Table列错位问题. Repeater解决方案: ...
antd table 排序如何使用_Antd Table列字符串排序+数字排序
在中后端WEB app开发过程中经常遇到table列排序的问题,Antd table 提供了sorter的接口,我们可以根据各自项目特点拓展即可. 1.Number类型数据排序,官方提供了number ...
bootstrap table 列拖动变宽
需要导入 colResizable-1.6.min.js /**_ _____ _ _ _ | | __ \ (_) | | | | ___ ___ | | |__) |___ ___ _ _____ ...

Bootstrap之table列上下移动

排序

1. 按钮排序

实现方式

2. 模态框排序

实现方式

Bootstrap之table列上下移动相关推荐

最新文章

热门文章