Làm cách nào để hiển thị bảng trong JavaScript?

Kịch bản của tôi là, tôi đang lấy dữ liệu JSON từ trường chuỗi và hiển thị dữ liệu đó trong lưới con bằng cách sử dụng thành phần mã tập dữ liệu. snip được đính kèm nó trông như thế nào.  

Bây giờ, để làm phong phú giao diện người dùng thành phần mã theo ứng dụng hướng mô hình, tôi đã sử dụng giao diện người dùng thông thạo và phản ứng DOM.  

Bây giờ, thành phần mã của tôi đang hiển thị lưới phụ (nơi nó được áp dụng) các cột và dữ liệu của nó nhưng tôi muốn thay thế các cột tập dữ liệu bằng tiêu đề bảng JSON của mình (tạo bảng từ dữ liệu JSON) và các bản ghi tập dữ liệu bằng nội dung bảng của tôi để

Khi làm việc với các bảng lớn có nhiều hàng và cột, bạn có thể thấy rằng ứng dụng của mình bắt đầu bị lag. Đặc biệt nếu bảng của bạn có nhiều kiểu tùy chỉnh, hàng có thể nhấp hoặc cột có thể sắp xếp, thì việc hiển thị có thể trở thành một vấn đề

Trong bài đăng này, tôi sẽ chỉ cho bạn cách bạn có thể lười biếng kết xuất bảng của mình để làm cho nó nhanh và linh hoạt

3 phút đọc

·

Bởi Miina Lervik

·

Ngày 2 tháng 12 năm 2021

Kết xuất chậm có nghĩa là bạn chỉ kết xuất những gì bạn cần hiển thị. Với các bảng rất lớn, chúng tôi muốn tránh hiển thị tất cả các hàng vì dù sao chúng tôi cũng không thể nhìn thấy chúng. Bằng cách chỉ hiển thị những gì chúng tôi cần, chúng tôi có thể tăng tốc ứng dụng của mình và làm cho ứng dụng tương tác mượt mà với

Khi vẽ bảng của chúng tôi, chúng tôi không muốn hiển thị tất cả các hàng. Chúng tôi thêm một hàng phụ vào đầu và cuối bảng, hàng này sẽ tăng/giảm kích thước khi chúng tôi cuộn. Chúng tôi sẽ cần một người nghe để theo dõi xem chúng tôi đã cuộn xuống bao xa và sau đó tính toán độ lớn của các hàng phụ của chúng tôi. Chúng tôi cũng sẽ cần tính toán hàng nào chúng tôi nên hiển thị và hàng nào chúng tôi không nên hiển thị. Để làm cho cuộn trơn tru, tôi khuyên bạn nên hiển thị nhiều hàng hơn những gì người dùng có thể nhìn thấy. Bằng cách này, chúng tôi sẽ không gặp phải hiện tượng bảng bị nhấp nháy khi cuộn nhanh

Vì vậy, mặc dù chúng tôi có thể có hàng nghìn hàng, nhưng khi kiểm tra mã của chúng tôi, nó sẽ giống như thế này

Điều kỳ diệu sẽ xảy ra bên trong thân bàn, vì vậy hãy bắt đầu làm điều đó.
Chúng ta sẽ cần một số biến trạng thái để lưu trữ các giá trị về quãng đường chúng ta đã cuộn, chỉ mục nào trong mảng dữ liệu mà chúng ta nên bắt đầu hiển thị từ đó và chỉ mục nào trong mảng dữ liệu sẽ là chỉ mục cuối cùng được hiển thị .

const TableBody = ({ data }) => {
  const [displayStart, setDisplayStart] = React.useState(0);
  const [displayEnd, setDisplayEnd] = React.useState(0);
  const [scrollPosition, setScrollPosition] = React.useState(0);

  const rows = []; // this will be filled in later
  
  return {rows};
};

export default TableBody;

Chúng tôi cũng sẽ cần một số giá trị tĩnh để tính toán sau này. Chúng ta sẽ cần biết độ lớn của mỗi hàng và độ lớn của màn hình hiển thị, trong trường hợp này là chiều cao màn hình. Cần có một phần bù để chúng tôi hiển thị nhiều hơn một chút so với những gì chúng tôi thấy. Tôi muốn hiển thị gấp đôi số hàng mà tôi thực sự cần để cuộn mượt mà. Cuối cùng, chúng ta cần biết chúng ta nên hiển thị bao nhiêu hàng tại một thời điểm

const itemRowHeight = 32; // same height as each row (mine are 32px)
const screenHeight = Math.max(
  document.documentElement.clientHeight,
  window.innerHeight || 0
); // get the height of the screen
const offset = screenHeight; // We want to render more than we see, or else we will see nothing when scrolling fast
const rowsToRender = Math.floor((screenHeight + offset) / itemRowHeight);

Đang tính toán những hàng nào sẽ hiển thị

Như đã đề cập, chúng tôi muốn hiển thị gấp đôi số hàng mà chúng tôi cần. Khoảng một nửa số hàng đó phải ở trên cùng và nửa còn lại ở dưới cùng. Bằng cách này, cuộn cả hai chiều sẽ mượt mà

Sau đó, chúng ta cần tìm chỉ mục nào trong mảng của chúng ta sẽ là chỉ mục đầu tiên được hiển thị và chỉ mục nào sẽ là chỉ mục cuối cùng

const setDisplayPositions = React.useCallback(
    (scroll) => {
      // we want to start rendering a bit above the visible screen
      const scrollWithOffset = Math.floor(scroll - rowsToRender - offset / 2);
      // start position should never be less than 0
      const displayStartPosition = Math.round(
        Math.max(0, Math.floor(scrollWithOffset / itemRowHeight))
      );

      // end position should never be larger than our data array
      const displayEndPosition = Math.round(
        Math.min(displayStartPosition + rowsToRender, data.length)
      );

      setDisplayStart(displayStartPosition);
      setDisplayEnd(displayEndPosition);
    },
    [data.length]
  );

Phương thức này là một CallBack để sau này chúng ta có thể gọi nó từ một useEffect. Nếu tập dữ liệu của chúng tôi thay đổi về độ dài, chúng tôi sẽ cần tính toán lại vị trí bắt đầu và kết thúc

Đính kèm một người nghe vào sự kiện cuộn trên cửa sổ. Chức năng này sẽ chạy mỗi khi cuộn thay đổi

  React.useEffect(() => {
    const onScroll = throttle(() => {
      const scrollTop = window.scrollY;
      if (data.length !== 0) {
        setScrollPosition(scrollTop);
        setDisplayPositions(scrollTop);
      }
    }, 100);

    window.addEventListener("scroll", onScroll);

    return () => {
      window.removeEventListener("scroll", onScroll);
    };
  }, [setDisplayPositions, data.length]);

Chúng tôi thêm để tối ưu hóa cuộn của chúng tôi. Điều này được thực hiện để chúng tôi không gọi chức năng onScroll của mình trên mọi pixel mà chúng tôi cuộn vì điều đó sẽ hơi quá mức. Bây giờ nó sẽ chỉ được gọi sau mỗi 100 mili giây

Chúng tôi cũng cần đảm bảo rằng các tính toán của chúng tôi được chạy khi chúng tôi hiển thị trang lần đầu tiên, ngay cả trước khi chúng tôi bắt đầu cuộn. Vì vậy, hãy thêm điều này

  React.useEffect(() => {
    setDisplayPositions(scrollPosition);
  }, [scrollPosition, setDisplayPositions]);

Cuối cùng, chúng ta có thể thêm các hàng của mình. Chúng tôi sẽ thêm một hàng phụ ở trên cùng và dưới cùng. Sau đó, chúng tôi sẽ thêm các hàng mà chúng tôi muốn thực sự hiển thị

Làm cách nào để tạo một bảng trong JavaScript?

Làm cách nào để hiển thị kết quả trong bảng trong JavaScript?

Làm cách nào để hiển thị bảng động trong JavaScript?

Làm cách nào để in bảng trong HTML bằng JavaScript?