从HTML列表获取数据到数组

Question

我使用SortableJS并有一个嵌套的可排序列表。

<ul id="nestedDemo" class="nested-sortable">
    <li data-id="11">Item 1.1
        <ul class="nested-sortable">
            <li data-id="21">Item 2.1</li>
            <li data-id="22">Item 2.2
                <ul class="nested-sortable">
                    <li data-id="32">Item 3.2</li>
                    <li data-id="33">Item 3.3</li>
                    <li data-id="34">Item 3.4</li>
                </ul>
            </li>
            <li data-id="23">Item 2.3</li>
            <li data-id="31">Item 3.1</li>
            <li data-id="24">Item 2.4</li>
        </ul>
    </li>
    <li data-id="12">Item 1.2</li>
    <li data-id="13">Item 1.3</li>
    <li data-id="14">Item 1.4
        <ul class="nested-sortable">
            <li data-id="21">Item 2.1</li>
            <li data-id="22">Item 2.2</li>
            <li data-id="23">Item 2.3</li>
            <li data-id="24">Item 2.4</li>
        </ul>
    </li>
    <li data-id="15">Item 1.5</li>
</ul>

通过下面的脚本，我得到了一个JSON字符串，每个字符串都已更改。

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

for( var i = 0; i < nestedSortables.length; i++ )
{
    new Sortable( nestedSortables[i], {
        group: 'nested',
        dataIdAttr: 'data-id',
        fallbackOnBody: true,
        swapThreshold: 0.65,
        store: {
            set: function (evt) {
                var order = evt.toArray();
                console.log("Order: "+ JSON.stringify( order ) );
            }
        }
    });
}

问题是，我需要整棵树作为JSON字符串或数组来存储它，而不仅仅是那些有变化的值。

怎么才能得到整棵树的数组呢？

Answer 1

您可以将所有嵌套的排序表存储在数组中，然后从集合中的每个数组中获取订单。

​

var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));

// ARRAY TO STORE ALL NESTED SORTABLES
const sortables = []

for (var i = 0; i < nestedSortables.length; i++) {

  var sortable = Sortable.create(nestedSortables[i], {
    group: 'nested',
    dataIdAttr: 'data-id',
    fallbackOnBody: true,
    swapThreshold: 0.65,
    store: {
      set: function(sortable) {
        // ITERATE EACH NESTED SORTABLE IN OUR ARRAY
        for (let s of sortables) {
          // GET THE ORDER OF THIS SORTABLE
          let order = s.toArray();
          console.log(order.join('|'));
        }
      }
    }
  });

  // PUSH THE NEW SORTABLE IN OUR ARRAY
  sortables.push(sortable)

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>

<ul id="nestedDemo" class="nested-sortable">
  <li data-id="11">Item 1.1
    <ul class="nested-sortable">
      <li data-id="21">Item 2.1</li>
      <li data-id="22">Item 2.2
        <ul class="nested-sortable">
          <li data-id="32">Item 3.2</li>
          <li data-id="33">Item 3.3</li>
          <li data-id="34">Item 3.4</li>
        </ul>
      </li>
      <li data-id="23">Item 2.3</li>
      <li data-id="31">Item 3.1</li>
      <li data-id="24">Item 2.4</li>
    </ul>
  </li>
  <li data-id="12">Item 1.2</li>
  <li data-id="13">Item 1.3</li>
  <li data-id="14">Item 1.4
    <ul class="nested-sortable">
      <li data-id="21">Item 2.1</li>
      <li data-id="22">Item 2.2</li>
      <li data-id="23">Item 2.3</li>
      <li data-id="24">Item 2.4</li>
    </ul>
  </li>
  <li data-id="15">Item 1.5</li>
</ul>

​