zoukankan      html  css  js  c++  java
  • 利用插件(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=" 100%;"> <th class="th1" style=" 15%;"><label for="aggVDtselectAll"><input type="checkbox" v-model='aggVCheckAllDt' @click='checkedAggVAllDt()' name="" id="aggVDtselectAll" value="" />全选</label></th> <th class="th2" style=" 30%;">输出</th> <th class="th3" style=" 40%">需求</th> <th class="th4" style=" 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; },
  • 相关阅读:
    linux PCI 接口
    Linux 内核链表头数据结构
    Linux内核链表
    spawn-fcgi原理及源代码分析
    TRIZ系列-创新原理-17-转变到新维度原理
    《转》ceilometer的数据採集机制入门
    git配置文件读取顺序
    Android Studio 使用感受 错误解决
    scikit-learn:在实际项目中用到过的知识点(总结)
    //%f表示以十进制格式化输出浮点数 %.2f
  • 原文地址:https://www.cnblogs.com/xuxiaoxia/p/8484455.html
Copyright © 2011-2022 走看看