jQuery Sortable更新数据未序列化 [英] jQuery Sortable updated data not being serialized

问题描述

我正在使用 jQuery Sortable插件.

看看如何序列化数据的基本示例，我有以下代码.

Looking at the basic example on how to serialize the data I have the below code.

    <div class='span4'>
        <ol class='serialization vertical'>
            <li data-id='1' data-name='Item 1' data-status='1'>Item 1 <span class="status">toggle</span></li>
            <li data-id='2' data-name='Item 2' data-status='1'>Item 2 <span class="status">toggle</span></li>
            <li data-id='3' data-name='Item 3' data-status='1'>Item 3 <span class="status">toggle</span></li>
            <li data-id='4' data-name='Item 4' data-status='1'>Item 4 <span class="status">toggle</span></li>
            <li data-id='5' data-name='Item 5' data-status='1'>Item 5 <span class="status">toggle</span></li>
            <li data-id='6' data-name='Item 6' data-status='1'>Item 6 <span class="status">toggle</span></li>
        </ol>
    </div>

    var group = $("ol.serialization").sortable({
      group: 'serialization',
      delay: 500,
      onDrop: function (item, container, _super) {
        var data = group.sortable("serialize").get();
        var jsonString = JSON.stringify(data, null, ' ');
    console.log(jsonString);
        $('#serialize_output2').text(jsonString);
        _super(item, container)
      }
    });

我想允许用户切换每个项目的状态，所以我还添加了

I want to allow the user to toggle the status of each item so I have also added in

    jQuery(document).on("click", ".status", function (event) {
        var status = $(this).closest("li").attr("data-status");
        if(status == 1) {
            $(this).closest("li").attr( 'data-status','0');
        }
        else {
            $(this).closest("li").attr( 'data-status','1');
        }
    });

如果我在拖放列表项之前单击切换，则console.log将返回正确的状态(1或0).

If I click toggle before dragging and dropping the list item the console.log will return the correct status (1 or 0).

但是，在拖放之后，如果尝试单击并单击以更新状态，然后再次拖放console.log，则会返回列表的正确顺序，但不会返回最新状态.

However after I have dragged and dropped, if I try and click to update the status then drag and drop again the console.log returns the correct order of my list but not the most up to date status.

在这里我需要做什么以确保序列化的数据在删除时反映出data属性的值?

What do I need to do here to ensure the serialized data reflects the value of the data attribute at the time of the drop?

查看此小提琴.

推荐答案

首先，为何未更新数据状态"，如下所示:

First, why the "data-status" is not updated, as follows:

1. https://github.com/johnny/jquery-sortable/blob/master/source/js/jquery-sortable.js#L118

var result = $.extend({}, $parent.data())

https://github. com/jquery/jquery/blob/1.9-stable/src/data.js#L244

if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {

https://github. com/jquery/jquery/blob/1.9-stable/src/data.js#L252

dataAttr( elem, name, data[ name ] );

https://github. com/jquery/jquery/blob/1.9-stable/src/data.js#L291

if ( data === undefined && elem.nodeType === 1 ) {

所以原因是jQuery缓存了数据.

So the reason is that the data is cached by jQuery.

解决方案:

var group = $("ol.serialization").sortable({
    group: 'serialization',
    delay: 500,
    onDrop: function (item, container, _super) {
        group.children().each(function(){
            jQuery._data(this, 'parsedAttrs', false);
            jQuery.removeData(this);
        });
        var data = group.sortable("serialize").get();
        var jsonString = JSON.stringify(data, null, ' ');
        console.log(jsonString);
        $('#serialize_output2').text(jsonString);
        _super(item, container)
     }
 })

这个小提琴: http://jsfiddle.net/hb6hU/1/

这篇关于jQuery Sortable更新数据未序列化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！