利用插件(jQuery-ui.js)实现表格行的拖拽排序

Posted 无花即无果

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用插件(jQuery-ui.js)实现表格行的拖拽排序相关的知识,希望对你有一定的参考价值。

template 模板(html

首先要引入jQuery-ui.js的文件、
import ‘./../../scripts/base/jquery/jquery-ui.min.js‘;
<
table class="table-common" id="aggVDtTable"> <thead> <tr style="width: 100%;"> <th class="th1" style="width: 15%;"><label for="aggVDtselectAll"><input type="checkbox" v-model=‘aggVCheckAllDt‘ @click=‘checkedAggVAllDt()‘ name="" id="aggVDtselectAll" value="" />全选</label></th> <th class="th2" style="width: 30%;">输出</th> <th class="th3" style="width: 40%">需求</th> <th class="th4" style="width: 15%;">移动</th> </tr> </thead> <tbody> <tr v-for="(items, index) in aggregateValue" :key="aggregateValueDt.uniqueId + index"> <td ><input type="checkbox" name="" value="" v-model=‘items.isCheck‘ @change="aggVSingleSelectDt()"/></td> <td class="right" contenteditable="true">{{items.ruleName}}</td> <td class="right" data-toggle="modal" data-target=".modalShow" @click="aggDtItem = items" style="cursor: pointer">{{items.ruleSpecText}}</td> <!--<td style="display: none">{{items.ruleSpec}}</td>--> <td class="dragTd" style="cursor: move" @mousemove="dragTr($event,items)"><i class="fa fa-arrows"></i></td> </tr> </tbody> </table>

js代码:

//自定义维度指标表格可拖动行排序(jquery-ui)
//拖拽行的宽度设置 fixHelper(e,ui){ ui.children().each(function() { $(this).width($(this).width()); }); return ui; }, dragTr(event,item) { var that = this; $( "#aggVDtTable tbody").sortable({ cursor: "move", helper: that.fixHelper, axis:"y", revert: true, //释放时,增加动画 handle:".dragTd" , }); $( "#aggVDtTable").disableSelection(); return false; },

 




以上是关于利用插件(jQuery-ui.js)实现表格行的拖拽排序的主要内容,如果未能解决你的问题,请参考以下文章

JQuery实现表格的增加行和删除行

element+sortablejs插件实现拖拽排序效果

Table Dragger - 简单的 JS 拖放排序表格插件

使用BootStrap的table表格,如何利用BootStrap的分页插件Paginator实现表格的分页

30 个最棒的 jQuery 的拖放插件

30 个最棒的 jQuery 的拖放插件