Hướng dẫn sắp xếp JavaScript: Mảng, Bảng và Kéo & Thả với SortableJS

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu

Chức năng sắp xếp dựa trên JavaScript rất hữu ích cho việc quản lý dữ liệu động trong các bảng và danh sách.
Trong bài viết này, chúng tôi sẽ giải thích toàn diện mọi thứ từ các tính năng sắp xếp gốc của JavaScript đến các triển khai sắp xếp kéo‑thả trực quan.

Bằng cách đọc bài viết này, bạn sẽ có thể:

• Hiểu cách sắp xếp mảng bằng các tính năng tiêu chuẩn của JavaScript.
• Triển khai chức năng sắp xếp cho các bảng HTML và danh sách.
• Thực hiện sắp xếp kéo‑thả bằng SortableJS.
• Nắm vững các kỹ năng thực tế áp dụng cho các dự án thực tế thông qua các ví dụ và trường hợp sử dụng.

Chúng tôi sẽ đi qua từng chủ đề một cách tuần tự, vì vậy hãy chắc chắn theo dõi và tự mình thử thực hiện các ví dụ.

2. Hiểu về Các Tính Năng Sắp Xếp Gốc của JavaScript

2.1 Phương Pháp Sắp Xếp Cơ Bản

Trong JavaScript, bạn có thể dễ dàng sắp xếp dữ liệu mảng bằng chức năng sắp xếp tích hợp sẵn.
Phần này giải thích mọi thứ từ cách sử dụng cơ bản đến các ví dụ nâng cao, kèm theo các mẫu mã.

Ví Dụ Sắp Xếp Chuỗi

const fruits = ["banana", "apple", "orange", "grape"];
fruits.sort();
console.log(fruits); 
// Output: ["apple", "banana", "grape", "orange"]

Ví Dụ Sắp Xếp Số

const numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b); // Ascending order
console.log(numbers); 
// Output: [1, 5, 10, 25, 40, 100]

Khi sắp xếp các số, việc sử dụng hàm so sánh là rất quan trọng.
Nếu không có hàm này, các giá trị sẽ được sắp xếp theo thứ tự từ điển (như chuỗi), điều này có thể dẫn đến kết quả không mong muốn.

2.2 Ví Dụ Nâng Cao Sử Dụng Hàm So Sánh Tùy Chỉnh

Khi sắp xếp mảng các đối tượng, bạn có thể sắp xếp dựa trên một thuộc tính cụ thể.

Ví Dụ Sắp Xếp Mảng Đối Tượng

const users = [
  { name: "Yamada", age: 30 },
  { name: "Tanaka", age: 25 },
  { name: "Suzuki", age: 35 }
];

// Sort by age
users.sort((a, b) => a.age - b.age);
console.log(users);
/* Output:
[
  { name: "Tanaka", age: 25 },
  { name: "Yamada", age: 30 },
  { name: "Suzuki", age: 35 }
]
*/

Như đã minh họa ở trên, việc sử dụng hàm so sánh cho phép bạn triển khai logic sắp xếp tùy chỉnh cao.

2.3 Mẹo Tối Ưu Hóa Hiệu Suất

Khi làm việc với bộ dữ liệu lớn, hãy cân nhắc các điểm sau:

1. Tối ưu hàm so sánh

• Tránh các phép tính nặng trong hàm so sánh.

2. Giảm lượng dữ liệu cần sắp xếp

• Lọc bỏ dữ liệu không cần thiết trước khi thực hiện sắp xếp.

3. Sử dụng Web Workers

• Chạy các thao tác sắp xếp ở nền để cải thiện hiệu suất tổng thể.

3. Ví Dụ Triển Khai: Sắp Xếp Bảng HTML

3.1 Chức Năng Sắp Xếp Bảng Cơ Bản

Ở đây, chúng ta sẽ triển khai một tính năng trong JavaScript cho phép sắp xếp dữ liệu bảng HTML bằng cách nhấp vào tiêu đề cột.

Mã HTML

<table id="data-table">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Yamada</td><td>30</td></tr>
    <tr><td>Tanaka</td><td>25</td></tr>
    <tr><td>Suzuki</td><td>35</td></tr>
  </tbody>
</table>

Mã JavaScript

function sortTable(columnIndex) {
  const table = document.getElementById("data-table");
  const rows = Array.from(table.rows).slice(1); // Exclude the header row

  rows.sort((rowA, rowB) => {
    const cellA = rowA.cells[columnIndex].innerText;
    const cellB = rowB.cells[columnIndex].innerText;

    // Detect whether values are numeric or strings, then sort accordingly
    return isNaN(cellA) || isNaN(cellB)
      ? cellA.localeCompare(cellB)
      : cellA - cellB;
  });

  // Re-render after sorting
  rows.forEach(row => table.tBodies[0].appendChild(row));
}

Đây là một triển khai đơn giản cho phép bạn sắp xếp mỗi cột chỉ bằng một cú nhấp chuột.

3.2 Ví Dụ Nâng Cao Kết Hợp Với Lọc

Bằng cách kết hợp sắp xếp với lọc, bạn cũng có thể sắp xếp kết quả tìm kiếm trong thời gian thực.

Ví Dụ Mã JavaScript

document.getElementById("filter-input").addEventListener("input", (e) => {
  const filter = e.target.value.toLowerCase();
  const rows = document.querySelectorAll("#data-table tbody tr");

  rows.forEach(row => {
    const text = row.innerText.toLowerCase();
    row.style.display = text.includes(filter) ? "" : "none";
  });
});

Điều này cho phép người dùng có thể tìm kiếm và sắp xếp dữ liệu cùng một lúc.

4. Sắp xếp kéo và thả với SortableJS

4.1 SortableJS là gì?

SortableJS là một thư viện JavaScript giúp dễ dàng triển khai việc sắp xếp lại bằng kéo và thả cho các phần tử HTML. Nó có các tính năng sau:

• Tương tác kéo và thả trực quan.
• Có thể tùy chỉnh cao, và có thể áp dụng cho danh sách và bảng.
• Thân thiện với thiết bị di động, hỗ trợ các thao tác dựa trên cảm ứng.
• Nhẹ, không phụ thuộc vào thư viện nào, mang lại hiệu năng xuất sắc.

4.2 Cài đặt và cấu hình cơ bản cho SortableJS

4.2.1 Các bước cài đặt

Sử dụng CDN

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

Sử dụng npm (cho môi trường Node.js)

npm install sortablejs

4.2.2 Cấu hình cơ bản

Bằng cách sử dụng mã HTML và JavaScript dưới đây, bạn có thể triển khai sắp xếp kéo và thả.

Mã HTML

<ul id="sortable-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Mã JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const list = document.getElementById("sortable-list");
  new Sortable(list, {
    animation: 150, // Animation speed (milliseconds)
    ghostClass: "sortable-ghost" // Class applied to the element while dragging
  });
});

CSS (Tùy chọn)

.sortable-ghost {
  opacity: 0.5;
  background: #f0f0f0;
}

4.3 Ví dụ nâng cao: Kéo và thả giữa nhiều danh sách

Mã HTML

<div>
  <ul id="list1">
    <li>Item A</li>
    <li>Item B</li>
  </ul>
  <ul id="list2">
    <li>Item C</li>
    <li>Item D</li>
  </ul>
</div>

Mã JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const list1 = document.getElementById("list1");
  const list2 = document.getElementById("list2");

  new Sortable(list1, {
    group: "shared", // Set the group name
    animation: 150
  });

  new Sortable(list2, {
    group: "shared", // Use the same group name
    animation: 150
  });
});

5. Bảng so sánh: Thư viện bên thứ ba vs Triển khai gốc

5.1 Bảng so sánh

5.2 Khi triển khai gốc là lựa chọn tốt nhất

Ưu điểm

1. Không có phụ thuộc, vì vậy không cần thư viện bên ngoài.
2. Nhanh chóng triển khai với mã ngắn gọn, lý tưởng cho các tính năng sắp xếp đơn giản.
3. Hiệu năng cao, phù hợp ngay cả với các bộ dữ liệu lớn.

Nhược điểm

• Không hỗ trợ kéo và thả, đòi hỏi công việc bổ sung cho tương tác trực quan.
• Tùy chỉnh nâng cao hoặc hỗ trợ đa danh sách yêu cầu cài đặt hoặc thư viện bổ sung.

Trường hợp sử dụng

• Khi bạn cần sắp xếp các bảng HTML tĩnh hoặc mảng.
• Các dự án ưu tiên hiệu năng và chức năng tối thiểu.

5.3 Khi SortableJS là lựa chọn tốt nhất

Ưu điểm

1. Kéo và thả tích hợp cho tương tác trực quan.
2. Hỗ trợ di chuyển đa danh sách và đồng bộ máy chủ.
3. Sẵn sàng cho di động mặc định, bao gồm hỗ trợ cảm ứng.
4. Có thể tùy chỉnh cao và phù hợp cho môi trường sản xuất.

Nhược điểm

• Cần thêm một thư viện, làm tăng nhẹ kích thước dự án.
• Độ phức tạp của mã có thể tăng, dẫn đến chi phí học tập cao hơn.
• Có khả năng có vấn đề phụ thuộc hoặc cấu hình trong một số môi trường.

Trường hợp sử dụng

• Khi bạn cần danh sách động hoặc chức năng kéo và thả.
• Thiết kế UI yêu cầu di chuyển mục giữa nhiều danh sách hoặc lưu thứ tự theo thời gian thực.

6. Mẹo Triển Khai và Khắc Phục Sự Cố

6.1 Tối Ưu Hóa Hiệu Suất

1. Xử Lý Tập Dữ Liệu Lớn

Việc sắp xếp các tập dữ liệu lớn có thể dẫn đến suy giảm hiệu suất.

Giải Pháp

• Sử dụng cuộn ảo

  const visibleItems = items.slice(startIndex, endIndex);
  renderItems(visibleItems);
  

• Tận dụng xử lý bất đồng bộ Chạy logic sắp xếp trong Web Workers để giữ cho giao diện người dùng phản hồi.

2. Giảm Thiểu Các Thao Tác DOM

Việc sắp xếp thường liên quan đến việc thao tác DOM thường xuyên, vì vậy việc giảm thiểu các reflow không cần thiết là rất quan trọng.

Giải Pháp

• Sử dụng DocumentFragment

  const fragment = document.createDocumentFragment();
  rows.forEach(row => fragment.appendChild(row));
  table.appendChild(fragment);
  

6.2 Cải Thiện Khả Năng Truy Cập và Tính Sử Dụng

1. Hỗ Trợ Điều Hướng Bằng Bàn Phím

Cung cấp các lựa chọn thay thế bằng bàn phím cho người dùng không thể sử dụng kéo và thả.

Giải Pháp

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') {
    moveItemUp();
  } else if (e.key === 'ArrowDown') {
    moveItemDown();
  }
});

2. Cải Thiện Phản Hồi Thị Giác

Thêm các gợi ý thị giác để chỉ rõ các hành động sắp xếp.

Ví Dụ CSS

.sortable-ghost {
  opacity: 0.5;
  border: 2px dashed #007BFF;
}

6.3 Hướng Dẫn Xử Lý Lỗi và Gỡ Lỗi

1. Lỗi: Sắp Xếp Không Hoạt Động

Nguyên Nhân 1: Bộ Chọn Không Đúng

const list = document.getElementById("sortable-list");
if (!list) {
  console.error("Element not found. Please check the ID.");
}

Nguyên Nhân 2: Xung Đột Sự Kiện

list.removeEventListener('click', handler);

6.4 Danh Sách Kiểm Tra Khắc Phục Sự Cố

1. Kiểm Tra Lỗi JavaScript Trong Console

• Sử dụng tab Console của công cụ phát triển để xác định vấn đề.

1. Xác Minh Định Dạng Dữ Liệu

• Xác thực cấu trúc dữ liệu được sử dụng trong sắp xếp và giao tiếp với máy chủ.

1. Xác Nhận Phiên Bản Thư Viện

• Đảm bảo tất cả các thư viện và phụ thuộc đều được cập nhật.

7. Câu Hỏi Thường Gặp (FAQ)

Q1: Tại Sao Tính Năng Sắp Xếp Bảng Không Hoạt Động?

A1: Vui lòng kiểm tra các điểm sau.

1. Bộ Chọn Không Đúng

   const table = document.getElementById("data-table");
   

2. Phân Biệt Giữa Số Và Chuỗi

   rows.sort((a, b) => Number(a) - Number(b));
   

3. Xung Đột Sự Kiện Các mã JavaScript khác hoặc plugin có thể đang gắn sự kiện vào cùng các phần tử.

Q2: Kéo Và Thả Không Phản Hồi. Tôi Nên Làm Gì?

A2: Kiểm tra các mục sau.

1. Xác Nhận SortableJS Đã Được Tải

   console.log(Sortable);
   

2. Xác Minh Cấu Trúc HTML

   <ul id="sortable-list">
     <li>Item 1</li>
   </ul>
   

3. Kiểm Tra Cài Đặt Hỗ Trợ Di Động

   new Sortable(list, {
     touchStartThreshold: 5
   });
   

4. Cấu Hình Nhóm Không Đúng

   group: "shared"
   

Q3: Làm Thế Nào Để Lưu Thứ Tự Đã Sắp Xếp Vào Máy Chủ?

A3: Việc đồng bộ hóa với máy chủ có thể được thực hiện dễ dàng bằng cách sử dụng AJAX.

Ví Dụ JavaScript

const list = document.getElementById("sortable-list");
new Sortable(list, {
  animation: 150,
  onEnd: function () {
    const items = Array.from(list.children).map(item => item.innerText);
    fetch("/save-order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ order: items })
    })
    .then(response => response.json())
    .then(data => console.log("Saved successfully:", data))
    .catch(error => console.error("Error:", error));
  }
});

Q4: Làm Thế Nào Để Cải Thiện Hiệu Suất?

A4: Xem xét các cách tiếp cận sau.

1. Sử dụng cuộn ảo

   const visibleItems = items.slice(startIndex, endIndex);
   renderItems(visibleItems);
   

2. Sử dụng Web Workers Xử lý dữ liệu ở nền để cải thiện tính phản hồi của giao diện người dùng.
3. Tối Ưu Hóa Logic Sắp Xếp

   rows.sort((a, b) => a - b);
   

Q5: Có Thể Kết Hợp Sắp Xếp Với Các Tính Năng Thêm Không?

A5: Vâng, nó có thể được mở rộng dễ dàng như dưới đây.

1. Kết hợp với lọc thời gian thực

   document.getElementById("search").addEventListener("input", (e) => {
     const value = e.target.value.toLowerCase();
     document.querySelectorAll("#sortable-list li").forEach(item => {
       item.style.display = item.innerText.toLowerCase().includes(value) ? "" : "none";
     });
   });
   

2. Thêm và xóa mục một cách động

   function addItem(text) {
     const list = document.getElementById("sortable-list");
     const li = document.createElement("li");
     li.textContent = text;
     list.appendChild(li);
   }
   
   function removeItem(index) {
     const list = document.getElementById("sortable-list");
     list.removeChild(list.children[index]);
   }
   

8. Kết luận

8.1 Tóm tắt bài viết

1. Sắp xếp gốc trong JavaScript

• Đã học các kỹ thuật sắp xếp cơ bản bằng cách sử dụng Array.prototype.sort() .
• Đã đề cập đến việc sắp xếp mảng đối tượng bằng các hàm so sánh và các chiến lược tối ưu hiệu năng.

2. Sắp xếp bảng HTML

• Giới thiệu các ví dụ thực tế để sắp xếp dữ liệu bảng theo cột.
• Khám phá các trường hợp sử dụng nâng cao kết hợp với chức năng lọc.

3. Kéo và thả với SortableJS

• Triển khai sắp xếp kéo và thả trực quan bằng SortableJS.
• Học các phương pháp linh hoạt bao gồm di chuyển đa danh sách và đồng bộ máy chủ.

4. So sánh Native và SortableJS

• So sánh ưu điểm và trường hợp sử dụng để giúp chọn phương pháp tốt nhất cho mỗi dự án.

5. Khắc phục sự cố và Câu hỏi thường gặp

• Cung cấp giải pháp cho các vấn đề phổ biến và mẹo cải thiện hiệu năng và độ tin cậy.

8.2 Các bước thực tiễn tiếp theo

Chức năng sắp xếp là thành phần then chốt để cải thiện giao diện người dùng động và quản lý dữ liệu.
Hãy ghi nhớ các điểm sau khi bạn tiến hành.

1. Bắt đầu với các triển khai đơn giản, sau đó khám phá các trường hợp sử dụng nâng cao
2. Thử nghiệm việc tùy chỉnh mã
3. Nắm vững kỹ thuật xử lý lỗi và gỡ lỗi
4. Liên tục cải thiện hiệu năng và khả năng sử dụng

8.3 Hành động ngay

1. Hãy thử tự mình triển khai!

• Áp dụng các ví dụ mã từ bài viết này vào dự án của bạn và kiểm tra chúng trong thực tế.
• Chia sẻ mã nguồn của bạn trên GitHub và trao đổi phản hồi với các nhà phát triển khác cũng được khuyến khích.

2. Tiếp tục nâng cao kỹ năng của bạn!

• Nếu bạn muốn tìm hiểu thêm về các tính năng sắp xếp, hãy tham khảo các tài nguyên chính thức sau:
• SortableJS Official Documentation
• MDN Web Docs – Array.sort()

3. Kiểm tra các bài viết liên quan

• Chúng tôi cũng đề xuất các bài viết về “Triển khai lọc JavaScript” và “Cơ bản về thao tác DOM” .

8.4 Suy nghĩ cuối cùng

Chức năng sắp xếp là thiết yếu để tổ chức dữ liệu và cải thiện trải nghiệm người dùng.
Hãy sử dụng các kỹ thuật được giới thiệu trong bài viết này để nâng cao dự án của bạn.

Nếu bạn có câu hỏi về việc triển khai tính năng mới hoặc mở rộng các ví dụ này,
đừng ngần ngại liên hệ qua phần bình luận hoặc mẫu liên hệ.

Bước tiếp theo nằm trong tay bạn—hãy bắt đầu thử nghiệm mã ngay hôm nay!