Блог

Главная - Вопросы по программированию - Сериализованный сортируемый jQuery

Сериализованный сортируемый jQuery

#javascript #jquery #html #ajax #jquery-ui

#javascript #jquery #HTML #ajax #jquery-пользовательский интерфейс

Вопрос:

Я использую http://johnny.github.io/jquery-sortable / чтобы отсортировать таблицу, у меня есть jQuery, работающий без проблем, но я не могу заставить сериализацию работать правильно. Мне было интересно, может ли кто-нибудь помочь и объяснить, что мне нужно сделать?

Итак, мой html.

 <table class="table table-striped table-bordered sorted_table" id="positionstable">
    <tbody>
        <tr>
            <th class="sectionname" colspan="1">Position</th>
        </tr>
        <tr data-id="2">
            <td class=" ">Item 2</td>
        </tr>
        <tr data-id="1">
            <td class=" ">Item 1</td>
        </tr>
        <tr data-id="3">
            <td class=" ">Item 3</td>
        </tr>
        <tr data-id="4">
            <td class=" ">Item 4</td>
        </tr>
    </tbody>
</table>

Мой jQuery:

 $('.sorted_table').sortable({
  containerSelector: 'table',
  itemPath: '> tbody',
  itemSelector: 'tr',
  placeholder: '<tr class="placeholder"/>',

  onDrop: function (item, container, _super) {
            var dataToSend = $('.sorted_table').sortable("serialize").get();

            console.log(dataToSend)

            $.ajax({
                url: "ajax_action.php",
                type: "post",
                data: dataToSend,
                cache: false,
                dataType: "json",
                success: function () {}
            });
            //_super(item, container);
        }
})

Вы также можете найти код по адресу http://jsfiddle.net/WJProctor/7GqQu /

Я хотел бы, чтобы массив идентификаторов был отправлен в мой ajax-скрипт.

Я с нетерпением жду от вас любой помощи и совета.

С уважением

Джеймс

Ответ №1:

Обычно сериализация работает с элементами формы и генерирует объекты JSON, используя имя каждого поля в качестве ключа и значение элемента в качестве его значения.

Вы можете легко сгенерировать сериализованный объект, просто просматривая строки таблицы, как

 $('.sorted_table').sortable({
  containerSelector: 'table',
  itemPath: '> tbody',
  itemSelector: 'tr',
  placeholder: '<tr class="placeholder"/>',

  onDrop: function (item, container, _super) {
            var obj = jQuery('.sorted_table tr').map(function(){
                return 'trvalue[]='   jQuery (this).attr("data-id");
            }).get();
          console.log(obj)
          //do the ajax call
        }
})

http://jsfiddle.net/7GqQu/1/

Метки: