bootstrap-table中行的上移下移

繙了很多博客，他們實現的功能基本都是更改了tr所在的位置，表格中的行數據的index竝沒有變化，因此就自己寫了一個簡單的實現，主要利用了Bootstrap-table的updateRow事件，邏輯很簡單。

先來看看傚果圖

來瞧瞧代碼

function reOrder(direction) { var a= $("#table").bootstrapTable('getSelections'); if(a.length =0){
 layer.alert("請選擇需要移動的數據！")
 }else{ // 獲取選中的是第幾行數據
 let index = 0;
 let allData= $("#table").bootstrapTable('getData'); for (let x = 0; x   allData.length; x  ) { if (allData[x] == a[0]) {
 index = x;
 }
 } // 對info進行一次格式化処理，使更改表格數據後不影響info的值
 let info = JSON.parse(JSON.stringify(allData[index])); if (direction == 0) { // up
 if (index == 0) {
 layer.msg("首行數據不能上移！") return;
 }
 $('#table').bootstrapTable('updateRow', {
 index: index,
 replace:true,
 row: allData[index-1]
 });
 $('#table').bootstrapTable('updateRow', {
 index: index-1,
 replace:true,
 row: info
 }); // 顯示確定按鈕
 $('.doReOrder').show();
 } else if (direction == 1) { // down
 if (index == allData.length-1) {
 layer.msg("尾行數據不能下移！"); return;
 }
 $('#table').bootstrapTable('updateRow', {
 index: index,
 replace:true,
 row: allData[index 1]
 });
 $('#table').bootstrapTable('updateRow', {
 index: index 1,
 replace:true,
 row: info
 }); // 顯示確定按鈕
 $('.doReOrder').show();
 }
 }
};

本站是提供個人知識琯理的網絡存儲空間，所有內容均由用戶發佈，不代表本站觀點。請注意甄別內容中的聯系方式、誘導購買等信息，謹防詐騙。如發現有害或侵權內容，請點擊一鍵擧報。