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

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁 編程語言 正文

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

作者:weixin_42590334 ? 更新時(shí)間: 2022-04-26 編程語言

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

如下圖:

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

1.html

@layout("/common/_container.html"){
? ?
? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ? ? ? 報(bào)表管理>>報(bào)表版本>>配置指標(biāo) ? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <#NameCon id="condition" name="名稱" /> ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <#button name="搜索" icon="fa-search" clickFun="QuotaVer.search()"/> ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <#table id="QuotaVerTable"/> ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ? ? ?
? ? ? ?
? ?
@}

注意:這里使用的是GUNS框架,所以代碼風(fēng)格跟一般的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) {
? ? ? ? //點(diǎn)擊上移
? ? ? ? var $tr = $(this).parents("tr");
? ? ? ? if ($tr.index() == 0){
? ? ? ? ? ? Feng.success("首行數(shù)據(jù)不可上移!");
? ? ? ? }else{
? ? ? ? ? ? $tr.fadeOut().fadeIn();

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

? ? ? ? ? ? //交換后臺(tái)數(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);
? ? ? ? }
? ? }
}

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

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

欄目分類
最近更新