Próbuję więc wdrożyć listę sortowalną. Ale lista jest generowana przy użyciu JavaScript z tablicy. Ta tablica pochodzi z tyłu C #.

Oto moja sortowalna jQuery -


       $('.sortable-list').sortable({
            connectWith: '.sortable-list',
            update: function (event, ui) {
                var changedList = this.id;
                var order = $(this).sortable('toArray');
                var positions = order.join(';');
                success: writeCategories(positions);
                console.log("positions written");
            },

        });

A oto moja funkcja JavaScript, która generuje listę ...


    function makecategories(array) {
            // Create the list element:
            var list = document.createElement('ul');
            list.id = "boo";
            list.className = "sortable-list ui-sortable";

            for (var i = 0; i < array.length; i++) {
                // Create the list item:
                var item = document.createElement('li');
                item.id = i + 1;
                item.className = "ui-sortable-handle";
                item.style = '"margin: 1px; width: 130px; padding: 2px; vertical - align: middle;"';


                // Set its contents:
                item.appendChild(document.createTextNode(array[i]));

                // Add it to the list:
                list.appendChild(item);
            }

            // Finally, return the constructed list:
            return list;
        }

Oto jak dostaję swoją tablicę z backend i zadzwoń do mojej funkcji JS

     var categories = <%= this.javaSerial.Serialize(this.Menus) %>;

        //alert(categories[3]);
        document.getElementById('categories').appendChild(makecategories(categories));

To jest mój HTML


    <div id="categories">
    </div>

To jest wynik, który dostaję -


    Hen
    Dog
    Cat

Ale ta lista nie jest sortowalna. Każda pomoc tutaj byłaby bardzo doceniana.

Oto coś, czego próbowałem


    <div id="categories">
        <ul class="sortable-list">
            <li id="1"> Food </li>
            <li id="2"> Drinks </li>
        </ul>
    <div>

To daje mi wynik


    Food
    Drinks
    
    Hen
    Dog
    Cat

Z tego lista żywności i napojów jest sortowana, a lista Hen Dog Cat nie jest sortowalna.

Zapraszamy do zadawania mnie więcej informacji, które może być wymagane.

0
user14443314 13 październik 2020, 19:11

1 odpowiedź

Najlepsza odpowiedź

Rozważmy następujący przykład.

$(function() {
  function makeSortList(arr, obj) {
    if (obj == undefined) {
      obj = "body";
    }
    obj = $(obj);
    var list = $("<ul>", {
      id: "boo",
      class: "sortable-list"
    });

    $.each(arr, function(i, v) {
      $("<li>", {
        id: i + 1
      }).html(v).css({
        margin: "1px",
        width: "130px",
        padding: "2px",
        verticalAlign: "middle"
      }).appendTo(list);
    });

    list.appendTo(obj).sortable({
      connectWith: '.sortable-list',
      update: function(e, ui) {
        var changedList = $(this).attr("id");
        var order = $(this).sortable('toArray');
        var positions = order.join(';');
        //success: writeCategories(positions);
        console.log("positions written", positions);
      }
    });

    return list;
  }

  makeSortList(["Cat 1", "Cat 2", "Cat 3"], "#categories");
});
.sortable-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="categories"></div>

Widać to tworzy listę z elementów tablicy, a następnie inicjuje sortowanie po dołączeniu.

0
Twisty 13 październik 2020, 16:45