Jquery+bootstrap实现表格行置顶置底上移下移操作详解
最近接到产品的一个需求,它是要对数据排序，实际操作中我们要实现表格行置顶置底上移下移操作。项目框架是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 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);
}
}
}
在实现上移下移的同时，做了数据的顺序交换。
