如何获取json数据在jquery可排序？ [英] How to get json data in jquery sortable?

问题描述

我的HTML代码如下：

My HTML Code is like this :

<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代码如下：

My Javascript Code is like this :

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

      });

    });

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

When I drag customer element to box 1, I can get json data But, when I click button X to delete customer element, I do not get json data Demo is like this : https://jsfiddle.net/oscar11/vaL5ujz6/

如何获取json数据？

How do I get the data json?

非常感谢

推荐答案

如果添加到 delete_passenger 函数此代码：

If you add to delete_passenger function this code:

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

您可能会得到所需的结果。
检查小提琴

you will probably get the desired result. Check Fiddle

这篇关于如何获取json数据在jquery可排序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！