web-dev-qa-db-ja.com

Jquery sortable（ 'serialize'）

コールバックを使用する代わりにserializeメソッドを直接呼び出すことで、jqueryのULからアイテムのシリアル化されたリストを取得することは可能ですか？コードスニペット：

var sortableLinks = $("#category_links_list_3");
var linkOrderData = $(sortableLinks).sortable('serialize');

category_links_list_はULのIDです

DOM構造は次のとおりです。

<div class="hidden" id="inline_list_3">
    <ul class="category_links_list ui-sortable" id="category_links_list_3">
        <li class="link_title ui-state-default" id="category_link_8">Coconut Oil</li>
        <li class="link_title ui-state-default" id="category_link_9">Hempseed</li>
    </ul>
</div>

ありがとう...

jqueryjquery-ui-sortableserialization
11
KalenGi

やっと答えが出ました！シリアル化メソッドを呼び出す前に、まずULをソート可能にする必要があります。

var sortableLinks = $("#category_links_list_3");
$(sortableLinks).sortable();
var linkOrderData = $(sortableLinks).sortable('serialize');

今回はlinkOrderData含まれていますcategory_link [] = 8＆category_link [] = 9

21
KalenGi

Serializeが空の文字列を返す場合は、id属性にアンダースコアが含まれていることを確認してください。これらは次の形式である必要があります： "set_number"たとえば、ID属性がfoo_1、foo_5、foo_2の3要素リストはfoo[]=1&foo[]=5&foo[]=2にシリアル化されます。アンダースコア、等号、またはハイフンを使用して、セットと数値を区切ることができます。たとえば、foo=1またはfoo-1またはfoo_1はすべてfoo[]=1にシリアル化されます。

上記は一例です。私がそれを使用したこと。だから私はあなたを2人見ました。

http://jqueryui.com/demos/sortable/#method-serialize

それはあなたを助けるために移行します。

18
sikender

var formStr = $（ '＃container'）。serialize（）

追加：フォーム要素で機能します。次のように、独自のシリアル化をロールすることもできます。

function serializeList(container)
{
  var str = ''
  var n = 0
  var els = container.find('li')
  for (var i = 0; i < els.length; ++i) {
    var el = els[i]
    var p = el.id.lastIndexOf('_')
    if (p != -1) {
      if (str != '') str = str + '&'
      str = str + el.id.substring(0, p) + '[]=' + (n + 1)
      ++n
    }
  }
  return str
}

alert(serializeList($('#container')))
3
jspcal

[〜＃〜] html [〜＃〜]

<div class="section">
    <div class="row">
        <div class="col s6 m6 l6" style="background-color:beige">
            <ul id="sortable1" class="connectedSortable" style="min-height:30px">
                <li class="ui-state-default" id="item_1" data-id="1">Item 1</li>
                <li class="ui-state-default" id="item_2" data-id="2">Item 2</li>
                <li class="ui-state-default" id="item_3" data-id="3">Item 3</li>
                <li class="ui-state-default" id="item_4" data-id="4">Item 4</li>
                <li class="ui-state-default" id="item_5" data-id="5">Item 5</li>
            </ul>
        </div>
        <div class="col s0 m1 l1">
            <div style="visibility:hidden">a</div>
        </div>
        <div class="col s5 m5 l5" style="background-color:aqua">
            <ul id="sortable2" class="connectedSortable justify-content-right" style="min-height:30px"></ul>
        </div>
    </div>
    <textarea id="json-output"></textarea>
</div>

JQuery

$(document).ready(function () {

            var updateOutput = function (e) {
                var list = e.length ? e : $(e.target),
                    output = list.data('output');

                if (window.JSON) {
                    output.val(window.JSON.stringify(list.sortable('serialize'))); //, null, 2));
                } else {
                    output.val('JSON browser support required for this demo.');
                }
            };

            $("#sortable1, #sortable2").sortable({
                connectWith: ".connectedSortable",
                update: function () {
                    updateOutput($('#sortable2').data('output', $('#json-output')));
                },
            }).disableSelection();

        });

結果

"item[]=1&item[]=4&item[]=2"

この助けを願っています！

1
Nidust

分割を使用してこの関数を機能させることができました。クラスに複数のアンダースコアがある場合は、インデックスを調整する必要がある場合があります

function serializeList(container)
{
  var str = ''
  var n = 0
  var els = container.find('tr')
  for (var i = 0; i < els.length; ++i) {
    var el = els[i]

    var p = el.id.lastIndexOf('_')
    **var getIdNumber = el.id.split("_");**

    if (p != -1) {
      if (str != '') str = str + '&'
      str = str + el.id.substring(0, p) + '[]=' + **getIdNumber[1]**
      ++n
    }
  }
  return str
}
1
Kevin P

この投稿はとても役に立ちました。追加のヘルプをお探しの場合は、これが私がそれを機能させる方法です（haml-Railsを使用）。 toArray関数の使用は少し異なります。 `serialize 'を使用する場合は、属性を' data-item =" data-item _＃{id} 'として設定する必要があります。

たくさんのプログラミングソリューションを知ってくれてありがとう、インターネット。

:css
  #sortable { list-style-type: none; margin: 40 20; padding: 0; width: 500; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }

:javascript
  $(function() {

    $( "#sortable" ).sortable({
      update: function( event, ui ) {
        var data = $("#sortable").sortable('toArray', {attribute: "data-item"});  
        // return ids in order after update
        //alert(JSON.stringify(data));
        $.ajax({
          type: "PATCH",
          async: true,
          url: "/calendar/update_order.json",
          data: JSON.stringify(data),
          dataType: 'json',
          contentType: 'application/json',
          error: function(data) { return false; },
          success: function(data) { return false; }
        });
      }
    });
    $( "#sortable" ).disableSelection();

  });

#sort_tickets
  %ul#sortable
    - @tickets.each do |ticket|
      %li.ui-state-default(data-item="#{ticket.id}")<
        %span.ui-icon.ui-icon-arrowthick-2-n-s<
        = ticket.customer
0
Jesse Crockett