Сортируемый пользовательский интерфейс jQuery - сериализация нескольких столбцов - PullRequest
Новая
       6

Сортируемый пользовательский интерфейс jQuery - сериализация нескольких столбцов

2 голосов
/ 10 июня 2010

У меня есть небольшой скрипт, который позволяет мне использовать jQuery для аккуратной сортировки тегов div между 3 столбцами. JQuery можно увидеть ниже: 

$(".column").sortable(
 { connectWith: '.column' },
 { update: function(event, ui) { alert($(this).sortable('serialize')) }
});

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

Ответы [ 4 ]

3 голосов
/ 10 июня 2010 
$(".column").sortable(
  { connectWith: '.column' }, { update: function(event, ui) {
     alert($(this).sortable('serialize'));
     alert($(this).parents('.column').attr(id));
  }
});

Я думаю, что это должно работать. Найти родительский столбец div, который вы переместили, и затем получить его атрибут id.

2 голосов
/ 29 июля 2010

Только что решил это очень-очень грязным трюком.Хотел бы поделиться этим с вами, может быть, это поможет. 

<div class="column" >
  <div class="portlet" id="portlet_1_name">
     <div class="portlet-header">Title1</div>
     <div class="portlet-content">Text</div>
  </div>
  <div class="portlet" id="portlet_2_name">
     <div class="portlet-header">Title2</div>
     <div class="portlet-content">Text</div>
  </div>
</div>
<!-- for debug -->
<div id="serial"></div>

и т.д ... 

var out = "";

$('.portlet').each(function(index) {
   out += $(this).attr('id') + ',';
});

$("#serial").html(out);
// or alert(out) if you like
1 голос
/ 11 июня 2010

Получил работу, используя "ближайший" метод:

{update: function (event, ui) { оповещения ($ (это) .closest ( "ДИВ") атр ( "ID").); оповещения ($ (это) .sortable ( 'сериализации')) }

0 голосов
/ 21 июня 2011

Я искал хороший ответ на этот вопрос, и никто из присутствующих здесь не был именно тем, кем я хотел, поэтому я поделюсь тем, как я это сделал: 

$('ul.playerList').each(function() {
    var id = $(this).attr('id'); // get element id
    window[id] = $(this).sortable("serialize",{key:id}); // make global var w/ data
});

// you could make this more dynamic if you have a lot of lists
var data = ul_id_1 + "&" + ul_id_2 + "&" + ul_id_3 + "&action=other_vars"; 

$.post(url,data,function(resp) {
    $("#test").html(resp);
});
...