Làm cách nào để bạn sao chép chức năng "ngăn đóng băng" trên bảng HTML?

Question

Tôi có một widget trong một dự án ASP.NET mà tôi đang phát triển cho công việc của mình. Nó phải rộng 300 pixel và không thể rộng hơn. Thật không may những gì họ muốn đã được chứng minh là khá phức tạp cho một widget nhỏ như vậy. Dưới đây là những gì tôi có ngay bây giờ:

http://www.codetunnel.com/content/images/widget/currentWidget.jpg

Như bạn có thể thấy, đây là một jQuery UI kiểm soát accordion. Khi mỗi khung accordion mở rộng một cuộc gọi ajax được thực hiện để tải nội dung của nó một cách không đồng bộ. Ngay bây giờ nó phun ra một bảng HTML chứa dữ liệu mong muốn. Bảng nằm trong một DIV có kiểu overflow: auto; để chúng tôi có được các thanh cuộn ở dưới cùng và bên phải.

Vấn đề của tôi là tôi muốn có một số chức năng khá tùy chỉnh (như khả năng đóng băng trong excel). Khi cuộn sang trái và phải, tôi muốn tất cả các hàng, bao gồm tiêu đề, để cuộn sang trái và phải ngoại trừ cho cột ngoài cùng bên trái, "tên sản phẩm". Như thế này:

http://www.codetunnel.com/content/images/widget/scrollRight.jpg

Khi di chuyển lên xuống Tôi muốn tất cả các cột, trong đó có cột bên trái, để cuộn lên và xuống trừ cho dòng tiêu đề. Như thế này:

http://www.codetunnel.com/content/images/widget/scrollDown.jpg

Cách tốt nhất để đạt được chức năng này là gì? Hay là có cách nào?

Answer 1

Tôi đã tạo thứ gì đó tương tự, nhưng phức tạp hơn nhiều: Tôi muốn hàng đầu tiên của bảng (tiêu đề) bị đóng băng trong khi các hàng dữ liệu được cuộn theo chiều dọc. Tôi đã triển khai nó như 2 bảng khác nhau, mỗi bảng có các ô có chiều rộng cố định, mỗi ô trong DIV riêng của chúng. "Tiêu đề" div chỉ đơn giản là ngồi tĩnh, và "cơ thể" div sử dụng tràn: tự động cuộn.

Vấn đề của bạn phức tạp hơn, vì bạn muốn "đóng băng" trên cả hai trục và hỗ trợ cuộn trên cả hai trục (tôi có nhiều bất động sản hơn để làm việc và không phải tính toán cuộn ngang ở tất cả). Tuy nhiên, tôi tự hỏi, nếu bạn có thể bắt đầu từ vị trí đó và làm việc từ đó ...

Xác định 4 divs:

• NW: cái này không di chuyển ở tất cả, bao giờ hết. Đó là ô "tên sản phẩm" trong ví dụ
• NE: ô này chỉ cuộn theo chiều ngang. Đó là hàng trên cùng/tiêu đề trong ví dụ
• SW: cột này chỉ cuộn theo chiều dọc. Đó là cột bên trái trong ví dụ
• SE: cột này cuộn cả hai hướng. Đó là lưới dữ liệu chính trong ví dụ

Với 4 DIV, bạn sẽ xử lý 4 bảng riêng biệt, vì vậy chúng tôi cần giữ chiều rộng ô và chiều cao ô của chúng được đồng bộ hóa. Lý tưởng nhất là chúng ta có thể làm điều này tại thời gian render, nếu chúng ta có thể làm cho chúng có giá trị cố định. Nếu không, chúng ta có thể viết một số jquery/JS phía máy khách để lặp lại các ô trong bảng SE khi trang tải lần đầu tiên (hoặc được thay đổi kích thước) và buộc kích thước của các bảng khác khớp với chúng.

Với 4 DIV, chúng tôi cũng cần phải đồng bộ cuộn: khi SE cuộn theo chiều ngang, NE phải cuộn đến cùng một vị trí. Khi SE cuộn theo chiều dọc, SW phải cuộn đến cùng một vị trí. Tôi nghi ngờ phải có một số sự kiện cuộn phía máy khách mà chúng tôi có thể móc, để phát hiện khi SE được cuộn.Trong những sự kiện đó, chúng ta có thể buộc NE và/hoặc SW được cuộn theo cùng một cách.

Xin lỗi, đây là một câu trả lời mơ hồ/trừu tượng. Việc thực hiện một cái gì đó như thế này sẽ mất nhiều thời gian hơn tôi có thể thoải mái ăn cắp khỏi công việc chính của mình. Nhưng đây là cái gì đó đã được rattling xung quanh trong bộ não của tôi, vì vậy figured tôi chia sẻ nó với bạn. Tôi hy vọng nó giúp bạn ít nhất là gần hơn một giải pháp. Chúc mừng!

Answer 2

Đây có phải là điều mà tbody có thể giải quyết bên trong bảng có kích thước cố định không? Có vẻ như bạn có thể đặt overflow:auto trên tbody.