LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

Jquery实现table表格行拖拽的方法

liguoquan
2023年5月17日 17:23 本文热度 705
:Jquery实现table表格行拖拽的方法

1.添加上下面在线链接代码

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>

  <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

添加JS函数代码

  <script>

    $(document).ready(function() {

        var fixHelperModified = function(e, tr) {

                //children() 方法返回返回被选元素的所有直接子元素

                var $originals = tr.children();

                //clone() 方法生成被选元素的副本,包含子节点、文本和属性

                var $helper = tr.clone();

                //each() 方法规定为每个匹配元素规定运行的函数

                $helper.children().each(function(index) {

                    //width() 方法返回或设置匹配元素的宽度

                    //eq() 方法将匹配元素集缩减值指定 index 上的一个

                    $(this).width($originals.eq(index).width())

                });

                return $helper;

            },

            updateIndex = function(e, ui) {

                //ui.item - 表示当前拖拽的元素

                //parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的

                $('td.index', ui.item.parent()).each(function(i) {

                    //html() 方法返回或设置被选元素的内容 (inner HTML)

                    $(this).html(i + 1);

                });

            };

        $("#sort tbody").sortable({

            //设置是否在拖拽元素时,显示一个辅助的元素。可选值:'original', 'clone'

            helper: fixHelperModified,

            //当排序动作结束时触发此事件。

            stop: updateIndex

        }).disableselection();

    });

    </script>

2.将table的id 改为sort,与上面定义的一致便可,随意更改

<table  id="sort" >

<tr height="20px" >

加上class="index",序号会随着行拖拽后而重新排序

<td colspan="1"><span ><%=no_i%></span></td>

</tr>

</table>

即可实现效果

 


该文章在 2023/5/17 17:23:23 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved