Jquery+bootstrap實現(xiàn)表格行置頂置底上移下移操作詳解

更新時間：2022年02月22日 11:12:40 作者：weixin_42590334

這篇文章主要為大家詳細介紹了Jquery+bootstrap實現(xiàn)表格行置頂置底上移下移操作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近接到產(chǎn)品的一個需求,它是要對數(shù)據(jù)排序，實際操作中我們要實現(xiàn)表格行置頂置底上移下移操作。項目框架是GUNS框架。

如下圖：

我是怎么用Jquery+bootstrap進行實現(xiàn)這些功能的呢?往下看就知道了。

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>>>配置指標(biāo)
? ? ? ? ? ? </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="添加指標(biāo)" icon="fa-plus" clickFun="QuotaVer.openAddQuota()"/>
? ? ? ? ? ? ? ? ? ? ? ? ? ? @}
? ? ? ? ? ? ? ? ? ? ? ? ? ? @if(shiro.hasPermission("/quotaVer/save")){
? ? ? ? ? ? ? ? ? ? ? ? ? ? <#button name="保存數(shù)據(jù)" 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框架，所以代碼風(fēng)格跟一般的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("首行數(shù)據(jù)不可上移!");
? ? ? ? }else{
? ? ? ? ? ? $tr.fadeOut().fadeIn();

? ? ? ? ? ? //交換后臺數(shù)組數(shù)據(jù)
? ? ? ? ? ? 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所有數(shù)據(jù)行 ?QuotaVerTable跟html頁面的table id對應(yīng)
? ? ? ? var len = $('#QuotaVerTable').bootstrapTable('getData').length;
? ? ? ? if ($tr.index() == len - 1) {
? ? ? ? ? ? Feng.success("尾行數(shù)據(jù)不可下移!");
? ? ? ? }else {
? ? ? ? ? ? $tr.fadeOut().fadeIn();

? ? ? ? ? ? //交換后臺數(shù)組數(shù)據(jù)
? ? ? ? ? ? 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);
? ? ? ? }
? ? }
}

在實現(xiàn)上移下移的同時，做了數(shù)據(jù)的順序交換。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: