javascript - 如何在jquery sortable中获取json数据？

Question

我的 HTML 代码是这样的:

<form action="example3_action.php" name="example3" method="POST">
    <input type="hidden" id='serialize_output' name="serialize_output">
    <div class='span4'>
        box 1 (Customer)
        <ol class='nested_with_switch nested test1 vertical'>
            <li data-id="1" data-name='Valentino Rossi'>Valentino Rossi</li>
            <li data-id="2" data-name='David Beckham'>David Beckham</li>
            <li data-id="3" data-name='Eden Hazard'>Eden Hazard</li>
            <li data-id="4" data-name='Lionel Messi'>Lionel Messi</li>
            <li data-id="5" data-name='Christiano Ronaldo'>Christiano Ronaldo</li>
            <li data-id="6" data-name='Frank Lampard'>Frank Lampard</li>
        </ol>
    </div>

    <div class='span4'>
        box 2 (Room Type)
      <br>
      <select id="room_type">
          <option value="1">Single Room</option>
          <option value="2">Double Room</option>
          <option value="3">Twin Room</option>
      </select>
      <input type="button" value="Add" style="margin-top: -10px;" id="add_room">
        <ol class='nested_with_switch nested test2 vertical' id="room_list">
          <li data-id="2" data-name='Deluxe Room' class="room_number msg1" id="room_remove11">Deluxe Room<div class="room-remove"><a href="javascript:void(0)" onclick="delete_room(11)"><i class="fa fa-times"></i></a></div><ol><li id="passenger_remove21">John Terry<div class="room-remove"><a href="javascript:void(0)" onclick="delete_passenger(21)"><i class="fa fa-times"></i></a></div></li></ol></li>
          <li data-id="3" data-name='Family Room' class="room_number msg1" id="room_remove12">Family Room<div class="room-remove"><a href="javascript:void(0)" onclick="delete_room(12)"><i class="fa fa-times"></i></a></div><ol><li id="passenger_remove22">Jose Mourinho<div class="room-remove"><a href="javascript:void(0)" onclick="delete_passenger(22)"><i class="fa fa-times"></i></a></div></li></ol></li>
        </ol>
    </div>
    <!-- <button type="submit" name="submit">Save</button> -->
</form>

我的 Javascript 代码是这样的:

function delete_room(id){
      var customers = '';
      $('#room_remove'+id).find('li').each( function() {
          // alert($(this).text());
          var data_id = $(this).attr("data-id");
          var data_name = $(this).attr("data-name");
          customers += '<li data-id="'+data_id+'" data-name="'+data_name+'">'+$(this).text()+'</li>';

      });
      $('#room_remove'+id).remove();
      $('ol.test1').append(customers);
  }

  function delete_passenger(id){
      var customers = '';
      $('#passenger_remove'+id).each( function() {
          var data_id = $(this).attr("data-id");
          var data_name = $(this).attr("data-name");

          customers += '<li data-id="'+data_id+'" data-name="'+data_name+'">'+$(this).text()+'</li>';
      });
      $('#passenger_remove'+id).remove();
      $('ol.test1').append(customers);
  }


  $(document).ready(function(){  

        var oldContainer;
        var group = $("ol.nested_with_switch").sortable({
          group: 'nested',
          afterMove: function (placeholder, container) {
            if(oldContainer != container){
              if(oldContainer)
                oldContainer.el.removeClass("active");
              container.el.addClass("active");

              oldContainer = container;
            }
          },
          onDrop: function ($item, container, _super) {

          var data = group.sortable("serialize").get();

          var jsonString = JSON.stringify(data, null, ' ');
          console.log(jsonString);
          $('#serialize_output').val(jsonString);

            container.el.removeClass("active");
            _super($item, container);
          }
        });

      var room_type_number = 5;
      $('#add_room').click(function(){

          var text = $("#room_type option:selected").html();

          var room_type_id = $.trim($('#room_type').val());  

          $('#room_list').append('<li class="room_number msg" id="room_remove'+(++room_type_number)+'" data-id="'+room_type_id+'" data-name="'+text+'">'+text+'<div class="room-remove"><a href="javascript:void(0)" class="remove'+room_type_id+'" onclick="delete_room('+room_type_number+')"><i class="fa fa-times"></i></a></div><ol></ol></li>');

      });

    });

当我将customer元素拖到框1时，我可以得到json数据 但是，当我单击按钮 X 删除客户元素时，我没有得到 json 数据 演示是这样的:https://jsfiddle.net/oscar11/vaL5ujz6/

如何获取数据json？

非常感谢

Answer 1

如果将此代码添加到 delete_passenger 函数:

var data = $("ol.nested_with_switch").sortable("serialize").get();
var jsonString = JSON.stringify(data, null, ' ');
console.log(jsonString);

您可能会得到想要的结果。 检查Fiddle