JQuery JQuery-UI сортируемый массив - PullRequest
Новая
       11

JQuery JQuery-UI сортируемый массив

0 голосов
/ 12 мая 2010

Может кто-нибудь помочь мне с этим:

Я делаю репост только на тот случай, если люди его пропустили, или чтобы узнать, не является ли пользовательский интерфейс Sortables чем-то за пределами большинства людей, поэтому заранее извиняюсь: После значительных исследований BigG, публикации здесь и везде я все еще не могу найти или получить ответ или даже увидеть то, что я могу понять. Хорошо, я признаю, что я вполне дома с php, css, html и т. Д., Но js / Jquery, ммм, это все для меня в новинку. поэтому я всегда ищу вещи / объяснения, которые я могу понять. К сожалению, для JQuery кажется, что 99% уроков и т. Д. Написаны так, что я не могу понять. Основываясь на сообщениях на других форумах и т. Д. Я знаю, что я не одинок, мы ищем «пустышки». Пожалуйста, не говорите «полезные» предметы, такие как http://jqueryui.com/demos/sortable/#event-update - http://jqueryui.com/demos/sortable/#method-toArray - http://jqueryui.com/demos/sortable/#method-serialize так как они не помогают людям, таким как я. Как я уже говорил в других сообщениях, они "марсиане".

При использовании UISortables где - и как я могу поместить "serialize" в функцию JQuery?

У меня есть 4 столбца класса '.columm' и каждый с уникальным идентификатором - col1, col2, col3 и col4 - как это. 

<div class="column" id="col1(to col4)">

Ленты Lorem Ipsum Dolor Sit Amet, Концертная группа Aditiscing Elit

Ленты Lorem Ipsum Dolor Sit Amet, Концертная группа Aditiscing Elit

Я могу заставить бит перетаскивания работать, теперь мне нужно поместить "финальные" позиции в сериализованный массив.

Вот мой код: 

$(".column").sortable({
        revert: true,
        scroll: true,
        appendTo: 'body',
        connectWith: '.column',
        delay:200,
        stop: function() {
        $(".column").each(function(){
        var test = $(this).attr('id');

    alert(test);

    //
        //var myArray = $(this).sortable("serialize");

        })
    },
    revertDuration:50000,
    scope:'scope',
    opacity: 0.80,
});

Вы увидите тест оповещения. Я сделал это, чтобы посмотреть, смогу ли я включить оповещения и я смогу, но куда мне положить

.sortable ("serialize", [options]) и как мне сделать это для 4 столбцов, чтобы создать 1 один сериализованный массив?

сделав это, как / где вы устанавливаете порядок при следующей загрузке страницы? (ОК, да, я намерен «сохранить» сериализованный массив)

Помогите пожалуйста - спасибо

Ответы [ 3 ]

1 голос
/ 13 мая 2010

Полагаю, вы хотите получить сериализованную строку, когда сортировка остановлена? Или, может быть, добавить кнопку для отправки?

Я разместил демо и попытался описать оба эти способа, надеюсь, это поможет 

$(function() {
    $("#sortable").sortable({
        revert: true,
        scroll: true,
        appendTo: 'body',
        connectWith: '.column',
        delay:200,
        stop: function(){ $(':button').trigger('click') },
        revertDuration:50000,
        scope:'scope',
        opacity: 0.80,
    });

    $(':button').click(function(){
        var string = $("#sortable").sortable("serialize");
        alert( string);
    })

});
0 голосов
/ 08 ноября 2012 
$('#ul').sortable({
                        opacity: 0.5,
                        items: '> li',
                        update: function(event, ui) {
                            var new_order = $(this).sortable('toArray');

                            var o = { 
                                ids: {} 
                            };
                            for (i = 0; i < new_order.length; i++) {
                                if (new_order[i] !== undefined) {
                                    o.ids[i] = new_order[i];
                                }
                            }

                            console.log(o);
                        }
                    });
0 голосов
/ 10 января 2012

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

Для справки будущих пользователей вам нужно будет сделать что-то подобное для достижения желаемого эффекта: 

$( ".column" ).sortable({ 
    connectWith: '.column',
    update: function(event, ui){ 

        var out = "";

        $('.column').each(function(index){
            out += '{';
            out += $(this).attr('id') + ':';
            $("div", this).each(function(index){
                out += '{';
                out += $(this).attr('id') + ':';            
                out += '}';
            });
            out += '}';
        });

        alert(out);

    } 
});

Это выведет что-то, что затем может быть проанализировано на стороне сервера, например:

{column_1: {wid_1:} {wid_4:} {wid_5:} {wid_2:} {wid_3:}} {column_2: {wid_6:} {wid_7:} {wid_8:} {wid_9:}} {column_3: {wid_11:} {wid_10:} {wid_12:}}

...