bootstrap-table中行的上移下移


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

  先來看看效果圖

  來瞧瞧代碼

/**
 * 對列表項進行排序
 * @param direction 0->up 1->down
 */
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();
        }
    }
};

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM