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

最近接到产品的一个需求,它是要对数据排序，实际操作中我们要实现表格行置顶置底上移下移操作。项目框架是GUNS框架。

如下图：

我是怎么用Jquery+bootstrap进行实现这些功能的呢?往下看就知道了。

1.html

@layout("/common/_container.html"){
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <a href="/report">报表管理</a>>><a href="" onclick="getHrefUrl(this)">报表版本</a>>>配置指标
            </div>
            <div class="ibox-content">
                <div class="row row-lg">
                    <div class="col-sm-12">
                        <div class="row">
                            <input type="hidden" id="reportId" value="${reportId}">
                            <input type="hidden" id="verId" value="${verId}">
                            <div class="col-sm-3">
                                <#NameCon id="condition" name="名称" />
                            </div>
                            <div class="col-sm-3">
                                <#button name="搜索" icon="fa-search" clickFun="QuotaVer.search()"/>
                            </div>
                        </div>
                        <div class="hidden-xs" id="QuotaVerTableToolbar" role="group">
                            @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()"/>
                            @}
                        </div>
                        <#table id="QuotaVerTable"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${ctxPath}/static/modular/quotaVer/quotaVer/quotaVer.js"></script>
<script>
    function getHrefUrl(a){
        a.href = "/reportVer?reportId=" + document.getElementById("reportId").value;
    }
</script>
@}

注意：这里使用的是GUNS框架，所以代码风格跟一般的html写法稍有不同。

2.JS代码

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

function operateFormatter(value, row, index) {
    return [
        '<a class="up" href="javascript:void(0)" title="Up">',
        '<i >上移</i>',
        '</a>  ',
        '<a class="down" href="javascript:void(0)" title="Down">',
        '<i >下移</i>',
        '</a>  ',
        '<a class="del" href="javascript:void(0)" title="Del">',
        '<i >删除</i>',
        '</a>  ',
    ].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);
        }
    }
}

在实现上移下移的同时，做了数据的顺序交换。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。