Jquery sortable('序列化')
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1959787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery sortable('serialize')
提问by KalenGi
Is it possible to get the serialized list of items from a UL in jquery by calling the serialize method directly instead of using a callback? The code snippet:
是否可以通过直接调用序列化方法而不是使用回调来从 jquery 中的 UL 获取项目的序列化列表？代码片段：
var sortableLinks = $("#category_links_list_3");
var linkOrderData = $(sortableLinks).sortable('serialize');
category_links_list_3is the id of the UL
category_links_list_3是 UL 的 id
The DOM structure is:
DOM结构为：
<div class="hidden" id="inline_list_3">
<ul class="category_links_list ui-sortable" id="category_links_list_3">
<li class="link_title ui-state-default" id="category_link_8">Coconut Oil</li>
<li class="link_title ui-state-default" id="category_link_9">Hempseed</li>
</ul>
</div>
Thanks...
谢谢...
回答by KalenGi
I finally got the answer! You need to make the UL sortable first before calling the serialize method on it:
我终于得到了答案！在对其调用序列化方法之前，您需要先使 UL 可排序：
var sortableLinks = $("#category_links_list_3");
$(sortableLinks).sortable();
var linkOrderData = $(sortableLinks).sortable('serialize');
This time linkOrderDatacontains category_link[]=8&category_link[]=9
这次linkOrderData包含category_link[]=8&category_link[]=9
回答by sikender
If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1or foo-1or foo_1all serialize to foo[]=1.
如果 serialize 返回空字符串，请确保 id 属性包含下划线。他们必须是形式：“SET_NUMBER”例如，ID属性的3元素列表foo_1，foo_5，foo_2将序列化foo[]=1&foo[]=5&foo[]=2。您可以使用下划线、等号或连字符来分隔集合和数字。例如foo=1orfoo-1或foo_1all 序列化为foo[]=1.
Above one is a example. that i used it. That is why I saw 2 you.
上面是一个例子。我用过它。这就是为什么我看到了2个你。
http://jqueryui.com/demos/sortable/#method-serialize
http://jqueryui.com/demos/sortable/#method-serialize
it migth be help you.
它可能会帮助你。
回答by jspcal
var formStr = $('#container').serialize()
var formStr = $('#container').serialize()
Added: That will work for form elements. You could also roll your own serialize like so:
补充：这将适用于表单元素。你也可以像这样滚动你自己的序列化：
function serializeList(container)
{
var str = ''
var n = 0
var els = container.find('li')
for (var i = 0; i < els.length; ++i) {
var el = els[i]
var p = el.id.lastIndexOf('_')
if (p != -1) {
if (str != '') str = str + '&'
str = str + el.id.substring(0, p) + '[]=' + (n + 1)
++n
}
}
return str
}
alert(serializeList($('#container')))
回答by Kevin P
I was able to get this function working using the split. If you have multiple underscores in your class you may need to adjust the index
我能够使用拆分使此功能正常工作。如果您的班级中有多个下划线，您可能需要调整索引
function serializeList(container)
{
var str = ''
var n = 0
var els = container.find('tr')
for (var i = 0; i < els.length; ++i) {
var el = els[i]
var p = el.id.lastIndexOf('_')
**var getIdNumber = el.id.split("_");**
if (p != -1) {
if (str != '') str = str + '&'
str = str + el.id.substring(0, p) + '[]=' + **getIdNumber[1]**
++n
}
}
return str
}
回答by Nidust
HTML
HTML
<div class="section">
<div class="row">
<div class="col s6 m6 l6" style="background-color:beige">
<ul id="sortable1" class="connectedSortable" style="min-height:30px">
<li class="ui-state-default" id="item_1" data-id="1">Item 1</li>
<li class="ui-state-default" id="item_2" data-id="2">Item 2</li>
<li class="ui-state-default" id="item_3" data-id="3">Item 3</li>
<li class="ui-state-default" id="item_4" data-id="4">Item 4</li>
<li class="ui-state-default" id="item_5" data-id="5">Item 5</li>
</ul>
</div>
<div class="col s0 m1 l1">
<div style="visibility:hidden">a</div>
</div>
<div class="col s5 m5 l5" style="background-color:aqua">
<ul id="sortable2" class="connectedSortable justify-content-right" style="min-height:30px"></ul>
</div>
</div>
<textarea id="json-output"></textarea>
</div>
JQuery
查询
$(document).ready(function () {
var updateOutput = function (e) {
var list = e.length ? e : $(e.target),
output = list.data('output');
if (window.JSON) {
output.val(window.JSON.stringify(list.sortable('serialize'))); //, null, 2));
} else {
output.val('JSON browser support required for this demo.');
}
};
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
update: function () {
updateOutput($('#sortable2').data('output', $('#json-output')));
},
}).disableSelection();
});
Result
结果
"item[]=1&item[]=4&item[]=2"
Hope this help!
希望这有帮助！
回答by Jesse Crockett
This post was very helpful. In case you're looking for additional help, here's how I got it to work (using haml-rails). Using the toArray function is slightly different. If using `serialize' you would have to set the attribute, again, as 'data-item="data-item_#{id}'.
这篇文章很有帮助。如果您正在寻找额外的帮助，这里是我如何让它工作（使用 haml-rails）。使用 toArray 函数略有不同。如果使用“序列化”，则必须再次将属性设置为“data-item="data-item_#{id}”。
Thank you, Internet, for knowing so many programming solutions.
谢谢你，互联网，知道这么多编程解决方案。
:css
#sortable { list-style-type: none; margin: 40 20; padding: 0; width: 500; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
:javascript
$(function() {
$( "#sortable" ).sortable({
update: function( event, ui ) {
var data = $("#sortable").sortable('toArray', {attribute: "data-item"});
// return ids in order after update
//alert(JSON.stringify(data));
$.ajax({
type: "PATCH",
async: true,
url: "/calendar/update_order.json",
data: JSON.stringify(data),
dataType: 'json',
contentType: 'application/json',
error: function(data) { return false; },
success: function(data) { return false; }
});
}
});
$( "#sortable" ).disableSelection();
});
#sort_tickets
%ul#sortable
- @tickets.each do |ticket|
%li.ui-state-default(data-item="#{ticket.id}")<
%span.ui-icon.ui-icon-arrowthick-2-n-s<
= ticket.customer
