bootstrap-table 上移 下移

bootstrap-table 上移 下移

頁面代碼：

'<a onclick="upMove(event)" href="#." title="Up">','<i>上移</i>','</a>  ','<a onclick="downMove(event)" href="#." title="Down">','<i >下移</i>','</a>  '

注： 我這是用的動態加載，所以就直接在元素里面加了onclick

        function upMove(event){//點擊上移
            detailData("up", event);
        };
        function downMove(event){//點擊下移
            detailData("down", event);
        }
        function detailData(type, event){
            var $tr = $(event.target).parents("tr");
            var len = $('#process-table').bootstrapTable('getData').length;
            var idx = $tr.index();//行在table中的位置
            var next_idx = 0;
            var array = $('#process-table').bootstrapTable('getData');
            $tr.fadeOut().fadeIn();
            if(type=='up'){
                 if($tr.index() == 0){alert("首行數據不可上移!"); return}
                 next_idx = idx - 1;
                 $tr.prev().before($tr);
            }else if(type == 'down'){
                 if($tr.index() == len - 1){alert("尾行數據不可下移!"); return};
                 next_idx = idx + 1;
                 $tr.next().after($tr);
            }
            //交換元素
            var temp = array[idx];
            array[idx] = array[next_idx];
            array[next_idx] = temp;
            //后台操作修改數據庫順序
        }
      
      

注：綁定元素其實有很多種，可以采用適合自己的方式，我這里是onclick 方式 獲取事件然后進行 操作。