首页 > 其他分享 >Jq-table 拖拽顺序

Jq-table 拖拽顺序

时间:2023-07-13 10:13:41浏览次数:38  
标签:sort function arr Jq var table 拖拽

使用sortable 对table列表进行拖拽排序

<table id="sort" name="Register_GameId" class="table table-bordered ui-sortable">
  <tbody>
    <tr style="opacity: 1;" class=""><td><input type="checkbox"></td><td>1</td><td>****</td></tr>
    <tr style="opacity: 1;" class=""><td><input type="checkbox"></td><td>37</td><td>****</td></tr>
    <tr style="opacity: 1;" class=""><td><input type="checkbox"></td><td>36</td><td>****</td></tr>
    <tr style="opacity: 1;" class=""><td><input type="checkbox"></td><td>31</td><td>****</td>
    </tr><tr style="opacity: 1;" class=""><td><input type="checkbox"></td><td>13</td><td>****</td>
    </tr><tr style="opacity: 1;" class=""><td><input type="checkbox"></td><td>32</td><td>****</td></tr>
    <tr style="opacity: 1;" class=""><td><input type="checkbox"></td><td>30</td><td>****</td></tr>
  </tbody>
</table>

 

js代码

$(function () {//拖拽ibc游戏顺序
    $("#sort").sortable({
        cursor: "move",
        items: "tr", //只是tr可以拖动  
        opacity: 0.6, //拖动时,透明度为0.6  
        revert: true, //释放时,增加动画  
        update: function (event, ui) { //更新排序之后  
            var categoryids = $(this).sortable("toArray");
            var $this = $(this);
        }
    });
    $("#sort").disableSelection();//禁用选择匹配的元素集合内的文本内容。
});

 获取排序后的列表

//获取table选中值
        var arr = "";
        var id = $("#sort input[type=checkbox]:checked").parent().next();
        id.each(function (i, v) {
           // console.log(i, v);
            arr += $(v).text() + ',';

        })
        arr = arr.slice(0, -1);

 

标签:sort,function,arr,Jq,var,table,拖拽
From: https://www.cnblogs.com/wuyabaibsd/p/17549598.html

相关文章

  • ubuntu20使用iptables-persistent libfakeroot libxtables-dev netfilter-persistent
    实施防火墙是保护服务器安全的重要一步。其中很大一部分是决定将对您的网络实施流量限制的单个规则和策略。像iptables这样的防火墙还允许您对应用规则的结构框架有发言权。在本指南中,您将学习如何构建防火墙,作为更复杂规则集的基础。该防火墙将主要关注提供合理的默认值和建立......
  • 基于 NNCF 和 Optimum 面向 Intel CPU 对 Stable Diffusion 优化
    基于隐空间的扩散模型(LatentDiffusionModel),是解决文本到图片生成问题上的颠覆者。StableDiffusion是最著名的一例,广泛应用在商业和工业。StableDiffusion的想法简单且有效:从噪声向量开始,多次去噪,以使之在隐空间里逼近图片的表示。但是,这样的方法不可避免地增加了推理......
  • el-table点击行,改变行的背景色
    为了防止污染自组件的table,row,可以在::v-deep{}外层再加一个class::v-deep{.current-row{td{background-color:rgba(0,191,255,.35)!important;}}}https://blog.csdn.net/LH2HA3/article/details/127888560......
  • vue2 + elementUI + sortablejs 实现可行拖拽排序表格
    需要实现表格(可以新增行,表格中直接编辑数据,行可上下拖动重新排序)实现效果(整行上下拖动之后,序号变化为1,2,3.......,可根据名称看效果哦):初始表格: 拖拽后:1.安装拖拽插件npminstallsortablejs--save页面中引入importSortablefrom'sortablejs'2.页面el-table......
  • html实现原生table并设置表格边框的两种方式
    虽然第三方表格插件多不胜数,但是很多场景还是需要用到原生<table>,掌握html原生table的实现方法,是前端开发的必备技能。例如:print-js打印、html2canvas生成图片等,用原生table可以规避很多问题。首先,在写原生<table>之前,我们先认识一下 border-collapse属性:border-collapse属性......
  • CompletableFuture详解
    CompletableFuture前言CompletableFuture继承于java.util.concurrent.Future,它本身具备Future的所有特性,并且基于JDK1.8的流式编程以及Lambda表达式等实现一元操作符、异步性以及事件驱动编程模型,可以用来实现多线程的串行关系,并行关系,聚合关系。它的灵活性和更强大的功......
  • 直播网站源码,修改el-table滚动条样式
    直播网站源码,修改el-table滚动条样式原生滚动条修改方式: /*---滚动条公共样式---*/ /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/::-webkit-scrollbar{ width:8px; height:8px;} /*定义滚动条轨道内阴影+圆角*/::-webkit-scrollbar-track{ -webkit-......
  • vue3自定义指令 拖拽 与拖拽变大小
    directives:{drag:{mounted:(el,binding)=>{constdragDom=el;conststy=dragDom.currentStyle||window.getComputedStyle(dragDom,null);el.parentElement.style.cursor='move';......
  • JVM(十)StringTable
    JVM(十)StringTable1String的基本特性String即字符串,通过一对引号""表示,String创建的方式主要有Strings="abc";//字面量的方式Strings=newString("abc");//类创建new方式String声明为final,不可以被继承String实现了Serializable接口,表示字符串是支持序列......
  • Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是
    1.jquerygrep()筛选遍历数组(可以得到反转的数组)//1.jquerygrep()筛选遍历数组(可以得到反转的数组)vararray=[1,5,9,3,12,4,48,98,4,75,2,10,11];varfilterArray=$.grep(array,(currentValue)=>{returncurrentValue>10;});console.log(`${filt......