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