Jquery+bootstrap实现表格行置顶置底上移下移操作详解_jquery

@layout("/common/_container.html"){

    

        

            

                报表管理>>报表版本>>配置指标
            
            

                

                    

                        

                            
                            
                            

                                <#NameCon id="condition" name="名称" />
                            
                            

                                <#button name="搜索" icon="fa-search" clickFun="QuotaVer.search()"/>
                            
                        
                        

                            @if(shiro.hasPermission("/quotaVer/addIndex")){
                            <#button name="添加指标" icon="fa-plus" clickFun="QuotaVer.openAddQuota()"/>
                            @}
                            @if(shiro.hasPermission("/quotaVer/save")){
                            <#button name="保存数据" icon="fa-plus" clickFun="QuotaVer.saveQuotaVer()"/>
                            @}
                        
                        <#table id="QuotaVerTable"/>
                    
                
            
        
    



@}

{title: '操作', visible: true, align: 'center', valign: 'middle',events: operateEvents,
                formatter: operateFormatter}

function operateFormatter(value, row, index) {
    return [
        '',
        '上移',
        '  ',
        '',
        '下移',
        '  ',
        '',
        '删除',
        '  ',
    ].join('')
}

window.operateEvents = {
    'click .up': function (e, value, row, index) {
        //点击上移
        var $tr = $(this).parents("tr");
        if ($tr.index() == 0){
            Feng.success("首行数据不可上移!");
        }else{
            $tr.fadeOut().fadeIn();

            //交换后台数组数据
            var array = $('#QuotaVerTable').bootstrapTable('getData');
            //行在table中的位置
            var idx = $tr.index();
            //交换元素
            var temp = array[idx];
            array[idx] = array[idx - 1];
            array[idx - 1] = temp;

            $tr.prev().before($tr);
        }
    },
    'click .down': function (e, value, row, index) {
        //点击下移
        var $tr = $(this).parents("tr");
        //获取table所有数据行  QuotaVerTable跟html页面的table id对应
        var len = $('#QuotaVerTable').bootstrapTable('getData').length;
        if ($tr.index() == len - 1) {
            Feng.success("尾行数据不可下移!");
        }else {
            $tr.fadeOut().fadeIn();

            //交换后台数组数据
            var array = $('#QuotaVerTable').bootstrapTable('getData');
            //行在table中的位置
            var idx = $tr.index();
            //交换元素
            var temp = array[idx];
            array[idx] = array[idx + 1];
            array[idx + 1] = temp;

            $tr.next().after($tr);
        }
    }
}