日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Jquery+bootstrap實現表格行置頂置底上移下移操作詳解_jquery

作者：weixin_42590334 ? 更新時間： 2022-04-26 編程語言

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

如下圖：

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

1.html

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


? ? 

? ? ? ? 

? ? ? ? ? ? 

? ? ? ? ? ? ? ? 報表管理>>報表版本>>配置指標
? ? ? ? ? ? 

? ? ? ? ? ? 

? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <#NameCon id="condition" name="名稱" />
? ? ? ? ? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? ? ? ? ? 

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

? ? ? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? ? ? ? ? 
? ? ? ? ? ? ? ? ? ? ? ? <#table id="QuotaVerTable"/>
? ? ? ? ? ? ? ? ? ? 

? ? ? ? ? ? ? ? 

? ? ? ? ? ? 

? ? ? ? 

? ? 





@}

注意：這里使用的是GUNS框架，所以代碼風格跟一般的html寫法稍有不同。

2.JS代碼

{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);
? ? ? ? }
? ? }
}

在實現上移下移的同時，做了數據的順序交換。

原文鏈接：https://blog.csdn.net/weixin_42590334/article/details/93593357

欄目分類
最近更新