網(wǎng)站首頁 編程語言 正文
最近接到產(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()"/> ? ? ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? ? ? @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()"/> ? ? ? ? ? ? ? ? ? ? ? ? ? ? @} ? ? ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? ? ? ? <#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
相關(guān)推薦
- 2023-02-05 C語言模擬實(shí)現(xiàn)memmove的示例代碼_C 語言
- 2022-04-01 k8s Error: could not find tiller
- 2022-12-22 C++?this原理與可變參數(shù)及友元函數(shù)友元類分步詳解用法_C 語言
- 2022-12-03 .Net?Core和RabbitMQ限制循環(huán)消費(fèi)的方法_實(shí)用技巧
- 2022-02-05 Numpy中不同維度數(shù)組之間的計(jì)算
- 2022-09-18 iOS開發(fā)探索多線程GCD任務(wù)示例詳解_IOS
- 2022-03-24 Unity腳本自動(dòng)添加頭部注釋的全過程_C#教程
- 2022-11-16 詳解Python中range()與xrange()的區(qū)別_python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運(yùn)行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲(chǔ)小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運(yùn)算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯(cuò)誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實(shí)現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡(jiǎn)單動(dòng)態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對(duì)象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊(duì)列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支