Question

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

    <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)
      }
    });

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

    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）。

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

我需要做些什么才能确保序列化数据反映丢弃时数据属性的值？

see this fiddle.

Answer 1

首先，为什么＆＃34;数据状态＆＃34;没有更新，如下：

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＆amp;＆amp;！jQuery._data（elem，＆＃34; parsedAttrs＆＃34;））{
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＆amp;＆amp; elem.nodeType === 1）{

原因是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可排序的更新数据未被序列化

1 个答案: