Jquery+bootstrap实现表格行置顶置底上移下移操作详解
短信预约 -IT技能 免费直播动态提醒
最近接到产品的一个需求,它是要对数据排序，实际操作中我们要实现表格行置顶置底上移下移操作。项目框架是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 class="lazy" data-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);
}
}
}在实现上移下移的同时，做了数据的顺序交换。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
