js sortable能處理動(dòng)態(tài)數(shù)據(jù)嗎

js
小樊
81
2024-10-23 00:46:04
欄目: 編程語言

JavaScript Sortable 是一個(gè)用于對(duì)列表進(jìn)行排序的庫，它非常靈活且易于使用。它可以處理動(dòng)態(tài)數(shù)據(jù)，即可以在運(yùn)行時(shí)向列表中添加、刪除或修改數(shù)據(jù)。

要處理動(dòng)態(tài)數(shù)據(jù)，您可以使用 Sortable 的 update 方法。當(dāng)列表發(fā)生變化時(shí)（例如，通過拖放操作），您可以調(diào)用此方法來更新排序。

以下是一個(gè)簡(jiǎn)單的示例，演示了如何使用 Sortable 處理動(dòng)態(tài)數(shù)據(jù)：

HTML:

<ul id="sortableList">
  <li data-id="1">Item 1</li>
  <li data-id="2">Item 2</li>
  <li data-id="3">Item 3</li>
</ul>

JavaScript:

const sortableList = document.getElementById('sortableList');
const sortable = new Sortable(sortableList, {
  onUpdate: function (event) {
    // 獲取排序后的列表項(xiàng)
    const sortedItems = Array.from(sortableList.children);

    // 根據(jù)排序后的列表項(xiàng)更新數(shù)據(jù)源
    const data = sortedItems.map(item => {
      return {
        id: item.getAttribute('data-id'),
        text: item.textContent
      };
    });

    console.log(data);
  }
});

在這個(gè)示例中，我們創(chuàng)建了一個(gè)具有三個(gè)列表項(xiàng)的無序列表。每個(gè)列表項(xiàng)都有一個(gè) data-id 屬性，用于存儲(chǔ)其數(shù)據(jù)。我們使用 Sortable 庫對(duì)列表進(jìn)行排序，并在排序發(fā)生變化時(shí)調(diào)用 onUpdate 方法。在 onUpdate 方法中，我們獲取排序后的列表項(xiàng)，并根據(jù)它們更新數(shù)據(jù)源。

0 踩