Question

我有

<ul id="test-list" class="ui-sortable" >
   <li id="876e45a4-6a27-4f7b-95ca-9e2500f11801">text1</li>
   <li id="4df36ffb-561a-4eaa-9b1c-9e2500f16d6b">text2</li>
   <li id="cc4a57d5-1567-403c-888f-9e2500f1c171">text3</li>
</ul>

但$('#test-list').sortable('serialize');执行如下字符串： 876e45a4-6a27-4f7b-95ca[]=9e2500f11801&79fbfdf7-e9b1-4e96-8e42[]=9e2400d2abb7&4df36ffb-561a-4eaa-9b1c[]

删除最后12个id

的字符

任何想法为什么？

Answer 1

两件事：

`Sortable.serialize`的ID

您确定Sortable serialize做了您期望它做的事吗？根据{{3}}，它希望每个可排序元素的ID都采用setname_number形式。这些ID应该包含下划线，但会使用=或-;来自the docs：

默认情况下，通过查看“setname_number”格式的每个项目的ID，它会发出一个像“setname [] = number＆amp; setname [] = number”这样的哈希值。
...它们必须采用以下形式：“set_number”例如，具有id属性foo_1，foo_5，foo_2的3元素列表将序列化为{{1 }}。 您可以使用下划线，等号或连字符来分隔集和数字。例如foo[]=1&foo[]=5&foo[]=2或foo=1或foo-1所有序列化为{{1} }。

（我的重点。）所以没有看到下划线（foo_1），显然它正在回归使用它看到的最后一个连字符（foo[]=1）。

`_`格式用于CSS

另外，用于CSS 的-值不能以数字开头;来自the docs：

在CSS中，标识符（包括选择器中的元素名称，类和ID）只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A1和更高，加上连字符（ - ）和下划线（_）;它们不能以数字开头，也不能以数字后跟连字符开头。

（对于HTML中的id，这些限制不适用，它们不能包含空格，如果给定，则必须至少包含一个字符，但CSS更具限制性。）

由于您正在使用带有jQuery的CSS选择器，因此最好确保id属性是有效的CSS。（也许你可以将它们预先处理为“G”，然后是变换为id的破折号的GUID，那样的东西，所以ID是id之类的。）然后你就会想要按照上面的说法给他们一个下划线和后缀。

Answer 2

我遇到了同样的问题。我解决它的方法是更改视图的代码，用空字符串替换短划线字符：

<div id="divItems">
@foreach (var item in Model)
{
    <div id="@string.Format("item_{0}", item.Id.ToString().Replace("-", string.Empty))">
        @item.Title
    </div>
}
</div>

注意：我的情况使用了div而不是ul / li。

我的javascript看起来像这样：

$("div#divItems").sortable({
    cursor: "move",
    update: function (event, ui) {
        var container = $(this);
        var sequence = container.sortable("serialize", { key: "Sequence" });
        $.post("@Url.Action("EditSequence")", sequence, function (data) {
            if (data.success) {
                container.fadeTo("normal", 0, function () {
                    container.fadeTo("normal", 1);
                });
            } else {
                alert(data.message);
            }
        });
    }
});

注意：我将键更改为'Sequence'，fadeTo（）组合用于向用户提供序列保存成功的视觉反馈。

我的控制器操作方法如下所示：

// POST: /Showcase/EditSequence?Sequence=<Guid List>
[Authorize]
[HttpPost]
public ActionResult EditSequence(List<Guid> Sequence)
{
    try
    {
        for (int i = 0; i < Sequence.Count; i++)
        {
            var item = repos.GetSingle(Sequence[i]);
            if (item != null)
            {
                item.Seq = (i + 1);
            }
        }

        repos.Save();

        return Json(new { success = true, message = "Sequence has been saved!" }, JsonRequestBehavior.DenyGet);
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = ex.Message }, JsonRequestBehavior.DenyGet);
    }
}

模型绑定器负责将没有短划线的Guid字符串转换为List＆lt; Guid＆gt;绑定到Sequence参数。

Answer 3

对于RFC 4122，例如876e45a4-6a27-4f7b-95ca-9e2500f11801，您可以添加参数。

$(this).sortable('serialize', {expression:(/(.+)[_](.+)/)})

Answer 4

将其更改为$('#test-list').sortable('serialize').replace(/=\[\]/g, '-')可以解决这个奇怪的问题，但在具有长ID的jQuery UI代码中必定有些奇怪。我会进一步看。

<强>更新

jquery.ui.sortable.js例程中serialize()中的违规代码是：

$(items).each(function() {
    var res = ($(o.item || this).attr(o.attribute || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/));
    if(res) str.push((o.key || res[1]+'[]')+'='+(o.key && o.expression ? res[1] : res[2]));
});

这是故意的功能，它检测包含短划线（ - ），等号或下划线的ID，并将它们视为数组值，左/右分割数组和键值。也许请使用栏|，或修改serialize()以供您使用。

jquery sortable和guids的问题

4 个答案:

`Sortable.serialize`的ID

`_`格式用于CSS

jquery sortable和guids的问题

4 个答案:

Sortable.serialize的ID

_格式用于CSS

`Sortable.serialize`的ID

`_`格式用于CSS