作者:手机用户2502853201 | 来源:互联网 | 2023-08-30 15:54
这个想法非常简单,几乎可以运作.有两个表,用户可以选择在两个表之间拖动行.当一行从table1拖到table2时,使用ajax以使用从table1中删除的数据更新数据库,添加到table2,并使
这个想法非常简单,几乎可以运作.有两个表,用户可以选择在两个表之间拖动行.当一行从table1拖到table2时,使用ajax以使用从table1中删除的数据更新数据库,添加到table2,并使用新数据重新显示这两个表.如果信息从table2拖到table1,同样的事情也有效.
您可以看到代码here的示例.
以下是其中一个表的Javascript代码的摘录:
var startTable = "table1"; var $tabs=$("#" + startTable); $( "tbody.connectedSortable") .sortable({ connectWith: ".connectedSortable", items: "> tr:not(:first)", appendTo: $tabs, helper:"clone", cursor:"move", zIndex: 999990 }) .disableSelection() ; $($tabs).droppable({ accept: ".connectedSortable tr", hoverClass: "ui-state-hover", drop:function(event, ui){ var start= ui.draggable.attr("id"); var desTable = $(this).attr("id"); if(start != desTable){ alert("The ajax should be called"); } return false; } });
除了一个案例外,它完美无缺.如果将一行从Table1拖到Table2,它会创建一个插槽,以显示放开该行时插入行的位置.换句话说,如果用户将Table1中的一行拖到Table2的最后一个元素,它会创建一个打开的占位符(在Table2的最后一行下)来描述放开时行的位置.这有一个问题.如果创建了占位符但是然后将行拖到表外并放开,则该行仍然会转到占位符,但永远不会调用draggable属性.
我想要发生的是,如果创建了一个占位符,无论行放在何处,它都会转到占位符并调用与放入的表对应的可放置代码.如果没有地方-holder存在,该行应该返回到它被拖动的位置,并且不会发生任何事情.
我试过的每个例子在两个表之间拖动行都有同样的问题.你有没有办法调用droppable代码,即使行被丢弃在表外?或者也许有一种更好的方法来调用ajax而不是将行放在桌面上?任何见解将不胜感激.
解决方法:
为了在从一个表删除一行到另一个表时触发ajax请求,您可以使用receive事件sortable小部件.
This event is triggered when an item from a connected sortable list has been dropped into another list . The latter is the event target.
(强调我的)
Updated Fiddle(部分结果,请参阅以下片段进行最终演示)
在接收回调中,您可以使用第二个参数(ui.item)的item属性访问被删除的行.
如果触发了receive事件回调,则表示已将ui.item添加到此表($(this).closest(“table.mytable”))并从其他表中删除($(“table.mytable”). ($(本).closest( “table.mytable”))).然后,您可以相应地触发ajax请求.
通过这种方式,您不必手动检查是否在同一个表中发生了丢弃(如果您按照某人的建议使用update事件,则必须执行此操作).
目前,您不必要地将可排序的两次初始化:
$( "tbody.connectedSortable").sortable({ connectWith: ".connectedSortable", items: "> tr:not(:first)", appendTo: $tabs, helper:"clone", cursor:"move", zIndex: 999990 })
和
$("tbody.connectedSortable").sortable({ connectWith: ".connectedSortable", items: "> tr:not(:first)", appendTo: $tabs2, helper:"clone", cursor:"move", zIndex: 999990 });
选择器tbody.connectedSortable适用于两个表,因此它将简单地覆盖先前的初始化.因此,克隆助手将始终附加到第二个表($tabs2).这可能不是你想要的 – 从它的外观你只是为了将克隆附加到相应的父级而初始化两次.默认值appendTo选项是“父”,只是从初始化中删除它将完成工作.
此外,最好从
移动标题行.进入元素,以便您可以避免指定项目:“> tr:not(:first)”:它更具语义性和性能稍好,因为如果未指定该选项,jQuery UI不必搜索无效项.最后,你复制了无效的id.要对一组元素进行分组,请使用公共类.
$(document).ready(function() { $("tbody.connectedSortable").sortable({ connectWith: ".connectedSortable", helper: "clone", cursor: "move", zIndex: 99999, receive: function(event, ui) { /* here you can access the dragged row via ui.item ui.item has been removed from the other table, and added to "this" table */ var addedTo = $(this).closest("table.mytable"), removedFrom = $("table.mytable").not(addedTo); alert("The ajax should be called for adding to " + addedTo.attr("id") + " and removing from " + removedFrom.attr("id")); } }); });
.mytable a:link, .mytable a:visited { color: #fff; font-weight: bold; text-decoration: none; } .mytable a:active, .mytable a:hover { color: #bd5a35; text-decoration: underline; } table.mytable { width: 90%; font-family: Arial, Helvetica, sans-serif; color: #666; margin-left: auto; margin-right: auto; font-size: 12px; background: #eaebec; border: #ccc 1px solid; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; } .mytable th { color: #fff; padding: 21px 25px 22px 25px; border-top: 1px solid #fafafa; border-bottom: 1px solid #e0e0e0; background: #191970; } .mytable th:first-child { text-align: center; padding-left: 20px; } .mytable tr { text-align: center; padding-left: 20px; } .mytable tr td:first-child { text-align: center; padding-left: 20px; border-left: 0; } .mytable tr td { padding: 18px; border-top: 1px solid #ffffff; border-bottom: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; background: #fafafa; background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafa fa)); background: -moz-linear-gradient(top, #fbfbfb, #fafafa); } .mytable tr.even td { background: #f6f6f6; background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6 f6)); background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6); } .mytable tr:last-child td { border-bottom: 0; } .mytable tr:last-child td:first-child { -moz-border-radius-bottom-left: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; } .mytable tr:last-child td:last-child { -moz-border-radius-bottom-right: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; } .mytable tr:hover td { background: #f2f2f2; transform: scale(1.01); padding-left: 20px; outline: 1px solid #191970; -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888; }
col1 col2 col3 col4 a b c d e f g h
COL1 COL2 COL3 COL4 1 2 3 4 5 6 7 8
旁注:我已经结合了类似的CSS类
   从jQuery UI 1.9中不推荐使用disableselection()方法
推荐阅读
本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ...
[详细]
蜡笔小新 2023-12-11 10:07:32
本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ...
[详细]
蜡笔小新 2023-12-14 14:06:10
本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ...
[详细]
蜡笔小新 2023-12-14 17:15:19
本文介绍了数据库的存储结构及其重要性,强调了关系数据库范例中将逻辑存储与物理存储分开的必要性。通过逻辑结构和物理结构的分离,可以实现对物理存储的重新组织和数据库的迁移,而应用程序不会察觉到任何更改。文章还展示了Oracle数据库的逻辑结构和物理结构,并介绍了表空间的概念和作用。 ...
[详细]
蜡笔小新 2023-12-14 16:00:02
本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ...
[详细]
蜡笔小新 2023-12-14 15:56:00
本文介绍了PHP设置MySQL字符集的方法,详细介绍了使用mysqli_set_charset函数来规定与数据库服务器进行数据传送时要使用的字符集。通过示例代码演示了如何设置默认客户端字符集。 ...
[详细]
蜡笔小新 2023-12-14 15:30:33
篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ...
[详细]
蜡笔小新 2023-12-14 15:18:35
本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ...
[详细]
蜡笔小新 2023-12-14 12:09:13
本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ...
[详细]
蜡笔小新 2023-12-14 11:31:05
本文详细介绍了如何使用Spring特性实现接口多类的动态调用。通过对Spring IoC容器的基础类BeanFactory和ApplicationContext的介绍,以及getBeansOfType方法的应用,解决了在实际工作中遇到的接口及多个实现类的问题。同时,文章还提到了SPI使用的不便之处,并介绍了借助ApplicationContext实现需求的方法。阅读本文,你将了解到Spring特性的实现原理和实际应用方式。 ...
[详细]
蜡笔小新 2023-12-14 03:24:19
1.帮助类后台获取视图对应的字符串publicclassViewHelper{将View输出为字符串(注:不会执行对应的ac ...
[详细]
蜡笔小新 2023-12-13 18:03:01
本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ...
[详细]
蜡笔小新 2023-12-13 16:16:05
本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ...
[详细]
蜡笔小新 2023-12-12 12:45:59
本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ...
[详细]
蜡笔小新 2023-12-11 09:19:45
本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ...
[详细]
蜡笔小新 2023-12-09 03:01:43
手机用户2502853201
这个家伙很懒,什么也没留下!