jQuery:如何处理sortable('serialize')返回的列表？
在jQuery中，要处理sortable('serialize')返回的列表，可以按照以下步骤进行：
- 首先，确保已经加载了jQuery和jQuery UI库。
- 在HTML中创建一个可排序的列表，例如：
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>- 使用jQuery UI的sortable()方法初始化可排序列表：
$( "#sortable" ).sortable();- 创建一个按钮，用于提交排序后的列表：
- 在JavaScript中，为按钮添加一个click事件监听器，并调用sortable('serialize')方法获取排序后的列表：
$( "#submit" ).click(function() {
var sortedList = $( "#sortable" ).sortable( "serialize" );
console.log(sortedList);
});- 当用户点击提交排序按钮时，sortable('serialize')方法将返回一个URL编码的字符串，例如："list_item[]=1&list_item[]=2&list_item[]=3&list_item[]=4&list_item[]=5"。
- 可以使用JavaScript的decodeURIComponent()方法解码该字符串，并使用split()方法将其转换为数组：
var decodedSortedList = decodeURIComponent(sortedList);
var sortedArray = decodedSortedList.split('&');- 最后，可以使用sortedArray中的元素来处理排序后的列表。例如，可以将其发送到服务器以进行进一步处理：
$.ajax({
url: "your_server_url",
type: "POST",
data: { sortedList: sortedArray },
success: function(response) {
console.log(response);
},
error: function(error) {
console.log(error);
}
});通过以上步骤，可以在jQuery中处理sortable('serialize')返回的列表。
相关·内容
2回答
我使用jQuery可排序允许用户在页面上拖放元素。当用户拖动一个div时，我需要获得列表的更新顺序，并将其传递到后端。到目前为止，我已经尝试过：
$( function() {
$( "#sortable" ).sortable({
axis: 'y',
stop: function (event, ui) {
var data = $(this).sortable('serialize');
alert(data);
$.ajax
浏览 3提问于2016-08-27得票数 0
回答已采纳
我正在使用jquery 1.4.2，并试图实现以下目标：
1-函数调用，它向php页面发送值以添加/删除项。
2-返回项目的html列表
3-列表仍然是可排序的
4-点击保存(序列化列表)
我的完整WIP位于这里
我试图从UL之上的级别委托，但我无法使它工作。
$("#construnctionstage").delegate('ul li', 'click', function(){
初始列表是可排序的，当您单击add/remove ajax函数返回一个包含许多项的新列表时，我做了一些错误的事情，因为警报消息继续工作，而列表不再是可排序的。
浏览 3提问于2010-05-11得票数 1
回答已采纳
1回答
我有一个包含多个jquery可排序列表的页面，每个列表都有一个sp_id，我如何将其传递给我的脚本？
<script type="text/javascript">
$(function() {
$(".sortable").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize", "placeholder") + '
浏览 0提问于2012-08-07得票数 1
回答已采纳
1回答
我正在用PHP创建一系列列表。然后，我尝试使用jQuery来使用.sortable()对列表进行排序。如果我只有一张单子，我就让它起作用了。但是，如果我有多个列表，则jQuery将遍历这两个列表，并且只记住最后一个列表。我知道.each()是如何造成这种情况的，我只是不知道如何解决这个问题。
<div class="list">
<ul id="sortList_1">
<li class="item_1" id="item_111">Item 1</li>
&
浏览 1提问于2012-07-11得票数 1
回答已采纳
3回答
我正在Zend Framework应用程序中使用jquery实现一个可排序的图像列表。我就是不能让.sortable('serialize')方法返回超过一个空字符串。
当我在我的应用程序之外尝试一些简单的例子时，它是有效的。
下面的代码片段被包装在不同的其他和其他标记中，这有关系吗？我认为不应该。无序列表应该只通过id来找到，对吧？
HTML：
<ul id="mylist">
<li id="1">
<div>
<img src="image_1
浏览 0提问于2009-06-08得票数 40
回答已采纳
我正在使用jQuery UI sortable对DOM中的列表进行排序。我成功地让一个ajax函数将这个字符串发送到我的mvc操作中：
list[]=2&list[]=3&list[]=28&list[]=1
我正在尝试弄清楚如何将这个序列化的数字列表放到一个List<int>中，这样我就可以从C#访问它们了。
我该怎么做呢？我已经尝试过这个方法了：
[HttpPost]
public string RoleTierUpdate( string[] form)
{
StringBuilder sb = new Stri
浏览 0提问于2010-12-17得票数 4
回答已采纳
根据测试拖放元素从connectedSortable从sortable1从左侧和sortable2在右侧通过保存按钮，我们仍然存在的问题，结果没有发送数据保存到我的数据库。
HTML文件
<div style="margin: 25px 0;">
<button id="save">Save</button>
</div>
<ul id="sortable1" class="connectedSortable"><b>Left side</b>
浏览 4提问于2016-06-22得票数 0
回答已采纳
1回答
我有两个使用jQuery可排序连接的列表。当我将一个项目从一个列表移到另一个列表时，会向PHP脚本发出2个ajax请求，该脚本用列表的内容更新数据库--这很好。
不过，我随后添加了一个JavaScript确认弹出，并在按下'OK‘时将ajax请求置于此条件下。如果我在这个弹出窗口上按下'Cancel‘，那么这仍然是正确的--但是如果我'Cancel’，那么正在移动一个项目的列表就不会更新，所以这两个列表都以项目结束。
这是我的密码：
$(function() {
$(".week1").sortable({
connectWith:
浏览 0提问于2015-06-01得票数 2
回答已采纳
2回答
我有一个列表，其中的项目应该由用户排序与jQuery UI排序。在用户选择了列表的最终顺序之后，他必须点击按钮"Ready“。单击按钮后，应该使用serialize和Ajax将订单发送到saveoder.php。
我试图用一个click事件来包围ajax调用，但是根据用户可排序操作的数量，将会有几个POST请求完成。我只需要一个ajax post请求。
$(function() {
$( "#sortable" ).sortable({
update: function(event, ui) {
var order = $(this).sortab
浏览 0提问于2015-02-04得票数 4
回答已采纳
1回答
我有一个jQuery可排序列表，我正在序列化结果。
var data = $("#sortable").sortable('serialize');
结果如下：
item[]=41&item[]=49&item[]=51&item[]=35&item[]=58&item[]=45&item[]=32&item[]=36&item[]=26&item[]=27&item[]=33&item[]=31&item[]=29
现在，我希望使用jQuery $each来选择每个
浏览 1提问于2016-06-18得票数 0
回答已采纳
我正在使用jquery ui sortable对项目列表进行排序，如下所示：
%ul.nav.nav-tabs.nav-stacked#lineup{"data-update-url" => sort_lineups_url}
- @pieces.each_with_index do |piece, index|
= content_tag_for :li, piece do
= link_to "#{(index + 1).to_s + ' - ' + piece.name}", '#'
jQue
浏览 0提问于2012-06-28得票数 0
2回答
我使用jQuery可排序，就像在中一样。我的序列化和发送到服务器的代码如下：
$(function() {
$( "#sortable" ).sortable({
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
//data: data,
type: 'GET',
u
浏览 1提问于2015-05-13得票数 0
我正在使用jQuery UI的可排序列表对待办事项列表中的项目进行排序，并且列表的重新排序非常有用。
对于每个待办事项类别，我都有几个UL列表，即设计、开发等。
我希望能够将项目从一个类别移动到另一个类别，而jQuery UI的可排序列表插件允许我使用connectWith选项参数来实现这一点。
但我似乎也找不到更新数据库的方法。todo数据库表有一个字段，用于引用它自己的表中的类别。
这是当前的代码：
$('.sortable').sortable({
axis: 'y',
opacity: .5,
cancel: '.no-t
浏览 3提问于2010-03-22得票数 0
2回答
我正在使用带有jQuery UI可排序小部件的CodeIgniter来更改我的菜单列表位置。
例如，如果我的菜单列表是这样的：
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
我想把第一个菜单放在第二个菜单下面，让它留在那里。
然而，我被jQuery卡住了一点。
下面是获取列表元素的内容：
<ul id="sortable">
<?php foreach ($rows as
浏览 0提问于2011-10-23得票数 7
回答已采纳
2回答
我使用以下代码来保存我的JQuery UI排序顺序：
$(function() {
$('#sortable').sortable({
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data: data,
type: 'POST',
url: '/sort.php'
});
浏览 1提问于2015-06-30得票数 1
我正在尝试让可排序的ajax版本正常工作。我有这个Javascript：
<script src="/Scripts/jquery-ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui/jquery.ui.mouse.js" type="text/javascript"></script>
<script src="/Scripts/jquery-
浏览 0提问于2010-12-17得票数 3
回答已采纳
我使用带有jquery-ui-rails gem的ruby on rails 4。并且一些列表具有可排序的jquery函数。
$ ->
$('#projects').sortable
handle: '.handle'
opacity: 0.4
update: ->
$.post($(this).data('update-url'), $(this).sortable('serialize'))
这是我的代码，不是应用制表符缩进。
问题：
浏览 1提问于2013-10-26得票数 1
我使用JQuery.Sortable()函数创建一个可重排序的条目列表，如下所示
<script type="text/javascript">
// When the document is ready set up our sortable with it's inherant function(s)
$(document).ready(function() {
$("#goal-list").sortable({
handle: '.handle',
浏览 0提问于2009-02-22得票数 3
回答已采纳
1回答
我在列表中使用了列表，我打算使用jquery将id发送到另一个php文件(updateDB.php)。
我试图序列化列表，但无法获得数据。我不知道我是否做对了，我试着到处看看，但是找不出代码有什么问题。
<ul>
<li id="recordsArray_<?some number?>"><?php echo content?>`
<ul>
<?php
while (some condition) {
?>
<d
浏览 1提问于2013-09-05得票数 1
我正在尝试写一个列表，它允许用户重新排序，并将重新排序的列表保存到mySQL。 Jquery： <script>
$(function() {
$('#sortable').sortable({
axis: 'y',
update: function (event, ui) {
var data = $(this).sortable('serialize');
$.ajax({
data:
浏览 12提问于2021-07-13得票数 0
1回答
我已经将jquery "sortable“功能集成到了我的网站中，它的工作非常完美，只有一个小的例外。只有在我点击页面上任何地方一次之后，它才能工作。可排序元素的页面部分是在ajax查询之后加载的，所以我使用了"on“函数。我很想知道如何使它工作，而不必先点击。
$(document).on("mousedown.sortable", "#container", function() {
$("#container").sortable({
update: function(event, ui) {
v
浏览 3提问于2016-01-24得票数 0
回答已采纳
我有两份这样的清单：
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-default ui-corner-all" id="sortable2_1">Martin</li>
<li class="ui-state-default ui-corner-all" id="sortable2_3">Mirek</li>
</ul>
<ul
浏览 2提问于2013-01-15得票数 1
回答已采纳
3回答
我正在尝试使用JQuery UI可排序插件，允许用户通过鼠标拖动来更改顺序或列表项。有问题的页面可以在上找到。
相关的JQuery代码在webapp.js中
$("#preferences_list").sortable({
placeholder: "placeholder",
forcePlaceholderSize: true,
update: function(event, ui) {
var order = $(this).sortable("
浏览 8提问于2011-08-27得票数 2
回答已采纳
2回答
我使用的是，而不是Jquery UI sortable。
我的完整代码在这里：
jQuery('.draggable').sortable({
onDrop: function (item, container, _super) {
console.log($('.draggable').sortable("serialize").get());
_super(item, container)
}
})
我的问题是，在上面的代码中，中记录的可排序(‘序列化’)对我不起作用。它提供了一个空对象数组，而我希望该数组按排序的顺序
浏览 2提问于2013-08-28得票数 1
1回答
谁能告诉我如何给所有的div添加效果？
jQuery：
data = $("#sortable_list1").sortable("serialize");
update:function()
{
$.ajax({
data:serial,
url:"list.php",
type:"post",
success:function(data){
浏览 1提问于2009-09-18得票数 0
我是jQuery的新手。基本上我有一个表，我可以对行进行排序。我希望将新订单保存在后端，这是我能够做到的。但是，我注意到我发送了多个Ajax调用，这取决于我对表进行排序的次数。订单在后台保存不正确。这是我的代码。变量order是存储新ID的位置。我在我的Django中通过'/updateorder‘路由发送它。
<script type="text/javascript">
$(document).ready(function(){
$("#sortable").sortable({
update: function
浏览 2提问于2017-09-23得票数 1
1回答
我有两个jQuery函数，一个允许排序，一个允许从列表中删除div。在我删除其中一个列表项目之前，一切都很好。然后拖动停止工作，直到我刷新页面。
我还遇到了问题，即delete函数没有立即删除单击要删除的div，如果单击了多个，则将只删除最近的一个。这就是为什么在下面的delete函数中刷新div的原因。
任何帮助都将不胜感激！
JQuery可排序
$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#response"
浏览 1提问于2013-01-07得票数 0
2回答
我想从jquery-ui使用sortable发送一个ajax请求。当我对列表进行重新排序时，由于某些原因，ajax调用没有将时间戳附加到查询字符串以避免缓存。为什么这段代码不能工作？
$('#categorylist').sortable({
placeholder: "ui-state-highlight",
update:function(e, ui){
var categorylist = $('#categorylist
浏览 3提问于2013-01-20得票数 0
回答已采纳
1回答
我在jQuery UI中使用.sortable('serialize')将可排序项目的更新位置传递到数据库。我正在努力理解的是，我是如何操作序列化的数据来更新数据库中的位置的。使用foreach似乎不起作用。
jQuery:
-------
$('#sort').sortable({
update: function(event, ui) {
var data = sortBlock.sortable('serialize');
updatePos(data);
浏览 0提问于2016-01-21得票数 1
我正在使用Jquery UI sortable：
$("ul.filter_age").sortable({
handle: ".handle",
update: function (event, ui) {
var data = $('#formage').serialize();
$.ajax({
data: data,
type: 'POST',
url: '/path/to
浏览 0提问于2016-05-22得票数 1
我有以下列表代码可以拖放来更改ul项的顺序(# JQuery ul)。如果按下CTRL键并拖动和移动，但保留原件，我该如何操作？
<script type="text/javascript">
$(document).ready(function(){
function slideout(){
setTimeout(function(){
$("#res").slideUp("slow", function () {
});
}, 2000);}
$("#res").hide();
$(
浏览 0提问于2013-03-31得票数 1
回答已采纳
我有两个jQuery UI可排序列表。守则如下：
<div class="chapter_container">
<p>Available Chapters</p>
<ul id="sortable_available">
<li id="t1">Title 1</li>
<li id="t2">Title 2</li>
<li id="t3">Title 3</li&g
浏览 5提问于2016-02-04得票数 1
回答已采纳
我是Jquery的新手。向Jquery函数传递参数时出现问题。我的应用程序有嵌套的资源。
class Post < ActiveRecord::Base
has_many :votes
路由是
sort_votes_post POST /posts/:id/sort_votes(.:format) posts#sort_votes
可排序函数为
$(function() {
$("#sortable").sortable({
update: function() {
$.ajax({
type: '
浏览 4提问于2012-08-19得票数 0
回答已采纳
1回答
基于这个示例，我尝试序列化这个列表，但是jquery-ui的内置函数似乎只支持一个级别。 是否也可以捕获其他元素？ <ul class="sortable">
<li id="link-1">Foo!
<ul class="sortable">
<li id="link-2">FooFoo!
<ul class="sortable"></ul>
浏览 4提问于2019-01-15得票数 0
回答已采纳
1回答
我希望允许我的用户使用jQuery UI sort ( )对一些项目进行排序
我已经添加了所有需要的文件，并且它正在工作。我在PHP中保存新顺序(数组)时遇到了问题。
$(function() {
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});
var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" }
浏览 0提问于2013-03-24得票数 0
1回答
所以我想知道为什么如果我有一个嵌套的列表，比如
<ul id="categories">
<li> <span class="categoriesSort">[Move]</span>Category
<ul id="tasks">
<li><span class="handle">[Move]</span>Task</li>
<li><span class="h
浏览 2提问于2012-09-13得票数 0
回答已采纳
2回答
你可以在所有的例子中找到关于如何使列表排序的例子。但是，我需要把新的订单发到另一页，我必须监督一些愚蠢的事情，但经过三天之后，我仍然没有解决办法。我有一个查询输出
然后jquery代码<script> $(function() { $( "#ulsortable" ).sortable(); }); $('#frm-sort').submit(function(){ var sort\_serialized = $("#ulsortable").sortab
浏览 4提问于2011-10-04得票数 0
1回答
我目前正在尝试在Jquery sortable和我的sinatra应用程序的帮助下重新排序列表。只有一个问题。sortable的serialize函数生成一个具有列表新顺序的字符串，如下所示：
"id[]=15&id[]=16&id[]=14&id[]=17&id[]=18"
当我通过ajax将其发布到服务器时，我的Sinatra应用程序将其识别为一个字符串。我的问题是，如何将该字符串转换为sinatra中可以循环访问的内容？
浏览 2提问于2013-05-06得票数 0
回答已采纳
2回答
jQuery序列化？
、、、
原文：
我有以下脚本，它可以很好地序列化。
jQuery/Ajax生成的HTML
<ul class="my_list">
<li class="list_item_1"><a href="link1.html">link1</a></li>
<li class="list_item_2"><a href="link2.html">link2</a></li>
<li class
浏览 2提问于2010-12-01得票数 1
回答已采纳
我有这个JQuery函数-几乎可以工作(到目前为止！)但警报是重复的，每个警报出现两次任何线索/想法请
$(function() {
$("#col1, #col2, #col3").sortable({
connectWith: '.column',
update : function () {
serial = $('#col1').sortable('serialize');
serial1 = $('#col2').sortable('serialize');
serial2 = $(
浏览 1提问于2010-05-28得票数 0
回答已采纳
1回答
我发现了jquery非常奇怪的行为。这里有两个列表，其中我将li-元素从一个拖到另一个，当前的分类是由ajax保存的。今天下午，我注意到，有时，只是有时，上次丢失的项目的位置没有正确保存，当应该是4或5时，它被保存为"0“。花了几个小时我才发现这种行为与警报有直接关系，警报是在一滴物品之后触发的：
alert(data); <---- data is the current sorting of the ids
如果我删除这一行，那么上面描述的脚本的奇怪行为就会出现。也许有人曾经经历过这样的事情，并能分享一些建议？
你好，马切克
编辑:这是包含警报的函数：
浏览 0提问于2010-02-10得票数 0
2回答
我找遍了也找不到答案。我无法序列化我的可排序对象。我得到的都是空数据
$(document).ready(function() {
$("ul#sortable").sortable({
update : function () {
serial = $("ul#sortable").sortable("serialize");
$.ajax({
url: "sort_images_ajax.php",
浏览 0提问于2010-04-23得票数 5
我想使用ajax请求将可排序列表的结果发布到另一个页面。我该怎么做。现在，当我将它设置为document.getElementbyId时，它在同一页上工作，但我不熟悉ajax post请求是如何工作的。我是否需要其他页面上的内容来保留发布的信息？
$("#sortable").sortable({
update: function (event, ui) {
var order = $(this).sortable('serialize');
}
}).disableSelectio
浏览 1提问于2016-10-18得票数 0
我最近被迫升级：
jQuery从1.7.1到1.8.3
jQueryUI从1.8.9到1.9.2
(为了与Blueimp的jQuery文件上传的最新版本兼容，我不得不进行升级。)
我有以下代码，在(1.7.1 / 1.8.9)
$( "div.archive li" )
.draggable({ // make the archive-icons draggable and connect to the album(s)
connectToSortable: handleSortable, // ,"#album_45 ul", /
浏览 6提问于2012-12-11得票数 2
1回答
我正在处理一个包含父项和子项的可排序列表。用户应该能够在它们之间移动项，也可以移动父项，包括它们的子项。
我想出了如何用一个连接的可排序列表来实现这一点：
为了达到这个目的，我没有使用列表的ID：
$('#id_of_the_list').sortable({ ... })
但是一个普通的.sortable类：
$('.sortable').sortable({ ... })
我现在的问题是AJAX调用只是获取父项的ID，而不是子项。
<script type="text/javascript">
$(document).ready
浏览 1提问于2016-08-11得票数 0
回答已采纳
1回答
使用jquery实现拖放
、、、、
我有一个MVC3应用程序，它要求Sysytem Admin能够从主属性列表中生成设备属性的有序列表，并将其保存为指定的配置。
我已经查看了以下问题和答案-
我已经在视图中包含了JQuery UI可排序库、脚本和样式，从视觉上看，一切似乎都很好。项从主文件拖放到输出列表中。
我的问题是从输出列表中检索数据--可排序的JQuery UI元素。在参考文章中，他们建议对可排序元素使用serialize方法。但是，sortable似乎只返回表单上输入元素的查询字符串。在我的例子中，可排序元素是一个有序列表，它的数据没有被引用。
如何将可排序元素的数据返回给控制器？
谢谢。
浏览 4提问于2012-08-01得票数 2
1回答
我只是有一点“糟糕”的时刻，但我有一个菜单项的列表，我使其可排序，并使用jquery ui的serialize方法序列化了数据。我正在提交ajax请求，并且在webrick中看到了以下参数：
参数：{ "sort" => "menu[]=2&menu[]=3&menu[]=1&menu[]=4" }
最后，我只想要一个2,3,1,4列表，并编写一个sql查询来更新这些项的sort_order。到目前为止，我发现的大多数教程都只有PHP服务器端示例，人们只是使用返回2,3,1,4的params['sort']['
浏览 7提问于2011-10-12得票数 1
回答已采纳
我正在使用jQuery UI可排序插件，并将其应用到表中。当删除正在拖动的任何元素时，我将如何触发函数？类似于以下内容：
alert($(this).attr('id'));
全解
为此，必须将容器id设置为something_number (something_1、something_2等)。
$(function(){
$('#sortable').sortable({
placeholder: 'ui-state-highlight',
update: function(event, ui){
浏览 1提问于2010-06-21得票数 1
回答已采纳
我使用：
使用这个插件，您可以更改列表的顺序或表行的顺序(这就是我的情况)。例如，用鼠标将第四行拖到第二个位置。宽度插件方法sort.sortable("serialize")，您可以访问新的订单。
但是如何使用sort.sortable("serialize")呢？
您可以在这里找到一个示例：，我想将表行的新顺序发送给myurl.php。
如何使用sortable("serialize")通过$.post向php脚本发送新订单？
HTML：
<table class="tablesort">
<tbody>
浏览 9提问于2013-05-01得票数 0
我正在寻找这个，因为上星期五，找不到任何解决办法。有一件事我想了几次，尝试了几次，首先构建函数，在这个函数中，列表中的所有项目，包含这个项目，实际上应该被排除在其他列表中，可以被移到其他列表中，然后构建另一个函数，在这个函数中，所有项目都准备好被移动到其他列表中，但是某个特定项却被排除在其他列表之外。
但是，似乎您不能为一个列表编写两个函数，其中可能包含jquery或ís？
无论如何，我的请求实际上是在标题中描述得最好的，但到目前为止，我还没有得到任何解决办法。有谁知道怎么解决这个问题吗？
你好，马切克
编辑：
以下是一些代码：
$("#tx-sortable2").sort
浏览 3提问于2010-10-04得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
