Johnny sortable: как использовать sort.sortable( "serialize" );

49
4

Я использую: http://johnny.github.io/jquery-sortable/


С помощью этого плагина вы можете изменить порядок списка или порядок строк таблицы (это мой случай). Например, с помощью мыши вы перетаскиваете четвертую строку во вторую позицию. Ширина метода плагина sort.sortable( "serialize" ). У вас есть доступ к новому порядку.


Но как использовать sort.sortable( "serialize" )?


Здесь вы найдете пример: http://johnny.github.io/jquery-sortable/#table
Я хотел бы отправить новый порядок строк таблицы myurl.php.


Как использовать сортировать ( "сериализовать" ), чтобы отправить новый заказ с помощью $. post на php script?


HTML:


<table class="tablesort">
<tbody>
<tr data-id="39"><td>item 1</td></tr>
<tr data-id="37"><td>item 2</td></tr>
<tr data-id="40"><td>item 3</td></tr>
<tr data-id="61"><td>item 4</td></tr>
</tbody>
</table>

JavaScript:


// Initialize the plugin
var sort = $(".tablesort").sortable({

// After changing the order
onDrop: function ($item, container, _super) {
var myObject = sort.sortable("serialize");

// How to prepare *myObject* for sending?

$.post('myurl.php', {blah:myObject}, function(){});
});

спросил(а) 2013-05-01T19:54:00+04:00 6 лет, 10 месяцев назад
1
Решение
78

Если строки таблицы предварительно отсортированы с использованием этого плагина, вы можете перебирать строки и добавлять их идентификатор в массив.


onDrop: function ($item, container, _super) {
var myObject = sort.sortable("serialize");
var sorted = [];

$('tr').each(function () {
sorted.push($(this).data('id'));
});

$.post('myurl.php', {blah: sorted}, function(){});
});

Я также завернул blah в фигурные скобки, чтобы указать, что это объект. В противном случае вы получили бы синтаксическую ошибку.

ответил(а) 2013-05-01T20:05:00+04:00 6 лет, 10 месяцев назад
35

Я создал script, который будет сортировать и преобразовывать выходные данные в формат json:


function start_sorting(classvariable){
var output=[];
var parent="";
var selector=$("."+classvariable+" li");
selector.each(function(key,value){
var id=selector.eq(key).attr('id');
var index=key;
if(selector.eq(key).parent().parent().parent().find(">li").length==0){
parent='0';
}else{
parent=selector.eq(key).parent().parent().parent().find(">li").attr('id');
}
output.push({id:id,index:index,parent:parent});
});
console.log( JSON.stringify(output));
}

ответил(а) 2016-06-13T22:49:00+03:00 3 года, 8 месяцев назад
37

Чтобы отправить новый заказ через $.POST, просто выполните:


var dataToSend = sort.sortable("serialize").get();
$.post("ajax-sort.php", {test:dataToSend}, function(data){});

В ajax-sort.php вы получите что-то вроде:

[test] => Array
(
[0] => Array
(
[children] => Array
(
[0] => Array
([id] => 39)

[1] => Array
([id] => 37)

[2] => Array
(
[subContainer] => false
[id] => 38
)

... snip ...
)
)
)
)


Если вы хотите изменить структуру этого массива, переопределите метод serialize() в плагине.


Здесь вы можете найти пример настраиваемого метода serialize(): http://johnny.github.io/jquery-sortable/#limited-target

ответил(а) 2013-05-02T11:52:00+04:00 6 лет, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема