Để các bảng bảng jQuery hoạt động với các hàng bảng ẩn/nhóm

Question

Tôi có bảng cổ điển với các bản ghi có thể mở rộng và có thể mở rộng được nếu mở rộng hiển thị một vài ghi chú con (như các bản ghi mới trong cùng bảng cha, không phải bảng con/div con). Tôi cũng sử dụng tablesorter và hoàn toàn thích nó.

Vấn đề là tablesorter không giữ hồ sơ con mở rộng bên cạnh hồ sơ gốc. Nó sắp xếp chúng như thể chúng là cấp cao nhất. Vì vậy, mỗi khi bảng được sắp xếp theo một cột, các hàng con sẽ kết thúc ở khắp nơi và không phải nơi tôi muốn chúng.

Có ai biết về tiện ích mở rộng tốt cho bảng biểu hoặc cấu hình cụ thể cho phép các bảng con giữ các hàng con được nhóm cùng với hàng chính ngay cả sau khi sắp xếp không? Hoặc tôi có phải từ bỏ bảng phân cảnh có lợi cho một số API khác hoặc bắt đầu quá trình xấu xí khi viết tiện ích con của riêng tôi không? Tôi có nên tránh phương pháp dựa trên css để ẩn các hàng riêng lẻ của bảng để biểu thị các hàng thu gọn không?

Answer 1

Nếu bạn muốn giữ tablesorter, có một mod mà tôi đã sử dụng cho mục đích available here

này Sau đó có nó, bạn thực hiện thứ hai (con có thể mở rộng) hàng của bạn có lớp "mở rộng con" , và tablesorter sẽ biết để giữ cho hàng được ghép nối với hàng cha của nó (hàng trước).

Answer 2

Sửa lỗi xấu thay vì sử dụng ở trên liên quan đến việc chỉ định lớp css parentId và lớp childId css cho hàng cha và con, sau đó sử dụng tiện ích để điều chỉnh lại. Chỉ trong trường hợp bất cứ ai khác chạy qua vấn đề này. Nó rõ ràng không phải là mã tốt nhất, nhưng nó hoạt động cho tôi!

$("tbody tr[class^='parent']", table).each(function() { 
$(this).after($("tbody tr[class^='child"+$(this).attr("class").substring(6)+"']", table)); 
}); 

Answer 3

Thực tế, rằng mod of tablesorter được đề cập bởi @AdamBellaire đã được thêm vào tablesorter v2.0.5. Tôi đã ghi lại tài liệu how to use the ccsChildRow option trên blog của mình.

Ngoài ra, nếu bạn quan tâm, tôi có một fork of tablesorter trên github trong đó có rất nhiều cải tiến và các vật dụng hữu ích :)