table自動滾動原理和優化大全

一、table自動滾動優化

1、優化原理：

function scrollTable(){
  let table = document.getElementById('table');
  let tableHeight = parseInt(window.getComputedStyle(table).height); // 獲取table高度
  let rows = table.getElementsByTagName('tr');
  let firstRowHeight = parseInt(window.getComputedStyle(rows[0]).height); // 獲取行高
  let rowIndex = parseInt(table.scrollTop / firstRowHeight); // 獲取當前滾動到第幾行  
  let visibleRowCount = parseInt(tableHeight / firstRowHeight); // 獲取可見的行數
  let lastRowIndex = parseInt((tableHeight + table.scrollTop) / firstRowHeight); // 獲取最後一行的索引
  let requiredRowCount = visibleRowCount * 2; // 設置緩存的最小行數
  let currentRowCount = rows.length; // 當前行數
  let bufferRowCount = requiredRowCount - currentRowCount; 
  if(bufferRowCount > 0) {
    for(let i = 0; i < bufferRowCount; i++){
      let newRow = createNewRow(); // 創建一行
      table.appendChild(newRow); // 插入新行
    }
  }
  else if(lastRowIndex >= currentRowCount - 1) {
    // 載入更多數據
  }
}

2、優化內容：

使用虛擬滾動技術將很多行文本直接放到Web頁面上, 而只在用戶需要滾動時才顯示他們。這樣可以更好地處理大量數據，而不會影響渲染性能。

3、實現方法：

將table設置為一個div的子元素，並設置固定高度和滾動條，而不是將所有行直接添加到table中。

4、代碼示例：

<div style="height: 300px;overflow: auto;">
  <table>  
    <tbody id="tableBody" style="height: 100%;"></tbody>
  </table>
</div>

二、vue table滾動

1、實現原理：

使用vue的組件化思想，對table進行封裝並提供滾動功能。

2、代碼示例：

<template>
  <div class="scrollable-table" ref="tableWrapper">
    <table>
      <thead>
        <tr>
          <th v-for="heading in headings">{{ heading }}</th>
        </tr>
      </thead>
      <tfoot>
        <tr v-if="fetching"><td colspan="{{ headings.length }}">Loading...</td></tr>
      </tfoot>
      <tbody>
        <tr v-for="row in rows">
          <td v-for="key in Object.keys(row)">{{ row[key] }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'ScrollableTable',
  props: {
    rows: Array,
    headings: Array,
    fetchMoreRows: Function
  },
  data () {
    return {
      fetching: false
    }
  },
  mounted () {
    this.$refs.tableWrapper.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy () {
     this.$refs.tableWrapper.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll (event) {
      const tableBody = this.$refs.tableWrapper.querySelector('table tbody')
      const distance = tableBody.getBoundingClientRect().bottom - this.$refs.tableWrapper.getBoundingClientRect().bottom
      
      if (distance < 10 && !this.fetching) {
        this.fetching = true
        this.fetchMoreRows().then((newRows) => {
          this.fetching = false
          if (newRows) {
            this.rows.push(...newRows)
          }
        })
      }
    }
  }
}
</script>

三、antd table自動滾動

1、實現原理：

藉助antd的組件庫，使用虛擬滾動優化，提供table滾動功能。

2、代碼示例：

<Table
  columns={columns}
  dataSource={data}
  scroll={{ y: 240 }}
/>

四、table橫向滾動

1、實現原理：

對於table過寬的情況，可以使用CSS樣式中的overflow-x屬性和white-space屬性來進行水平滾動。

2、代碼示例：

table {
  width: 800px;
  overflow-x: scroll;
  white-space: nowrap;
}

五、listbox自動滾動

1、實現原理：

在ListBox control 下，當用戶選擇某個值時，可以將listbox選項自動滾動到選中項的位置。

2、代碼示例：

function selectItem (itemIndex) {
  const listItem = document.getElementById(`list-item-${itemIndex}`)
  const list = document.getElementById('list')
  const listHeight = list.offsetHeight
  const itemHeight = listItem.offsetHeight
  const itemPosition = listItem.offsetTop
  const currentScrollTop = list.scrollTop
  const scrollTop = itemPosition - (listHeight - itemHeight) / 2
  list.scrollTop = scrollTop
}

六、el table滾動載入

1、實現原理：

使用Vue的Element UI組件庫中的el-table，可以用虛擬滾動優化，並且提供滾動載入數據的功能。

2、代碼示例：

<el-table
  :data="tableData"
  :row-height="40"
  height="320"
  style="width: 100%"
  ref="table"
  @scroll="scrollHandler"
  :highlight-current-row="false"
>
  <el-table-column
    prop="name"
    label="Name"
    width="180"
  />
  <el-table-column
    prop="address"
    label="Address"
    width="360"
  />
</el-table>

七、layui table滾動載入

1、實現原理：

使用LayUI中的table控制項，可以根據滾動條的位置動態載入數據，實現滾動載入。

2、代碼示例：

var tableIns = table.render({
  elem: '#demo',
  url: '/demo/table/user/',
  page: true,
  cols: [[
    {field:'id', title:'ID', width:80},
    {field:'username', title:'用戶名', width:120},
    {field:'email', title:'郵箱', width:150},
    {field:'sign', title:'簽名', width:200},
    {field:'sex', title:'性別', width:80},
    {field:'city', title:'城市', width:100},
    {field:'experience', title:'積分', width:80},
    {field:'ip', title:'IP', width:120},
    {field:'logins', title:'登入次數', width:100},
    {field:'joinTime', title:'加入時間', width:120}
  ]],
  done: function(res, curr, count) {
    console.log('done');
    if (res.code !== 0) {
      layer.msg(res.msg);
      return;
    }
    if (res.count === 0) {
      $(".layui-table-main").empty();
    }
  }
});

$(document).ready(function(argument) {
  $('.layui-table-view').scroll(function () {
    console.log('scroll');
    var scrollTop = this.scrollTop;
    var scrollHeight =  $("table").height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight == scrollHeight) {
      table.reload('demo', { // 指定表格唯一標識符
        page: {
          curr: tableIns.config.page.curr + 1
        }
      });
    }
  });
});

八、table滾動顯示

1、實現原理：

對於table列數量較多的情況，可以使用CSS樣式中的overflow-y屬性和fixed-layout屬性來進行固定列滾動。

2、代碼示例：

table {
  overflow-y: scroll;
  display: block;
  table-layout: fixed;
}
td {
  width: 300px;
}

九、table虛擬滾動選取

1、實現原理：

使用虛擬滾動技術將很多行文本直接放到Web頁面上, 而只在用戶需要滾動時才顯示他們。這樣可以更好地處理大量數據，而不會影響渲染性能。

2、代碼示例：

function scrollTable(){
  let table = document.getElementById('table');
  let rowHeight = parseInt(window.getComputedStyle(rows[0]).height); // 獲取行高
  let rowIndex = parseInt(table.scrollTop / rowHeight); // 獲取當前滾動到第幾行  
  let visibleRowCount = parseInt(table.offsetHeight / rowHeight); // 獲取可見的行數
  let lastRowIndex = parseInt((table.offsetHeight + table.scrollTop) / rowHeight); // 獲取最後一行的索引
  let requiredRowCount = visibleRowCount * 2; // 設置緩存的最小行數
  let currentRowCount = rows.length; // 當前行數
  let bufferRowCount = requiredRowCount - currentRowCount; 
  if(bufferRowCount > 0) {
    for(let i = 0; i < bufferRowCount; i++){
      let newRow = createNewRow(); // 創建一行
      table.appendChild(newRow); // 插入新行
    }
  }
  else if(lastRowIndex >= currentRowCount - 1) {
    // 查找選中行
    for(let i = rowIndex; i < lastRowIndex; i++) {
      if(rows[i].classList.contains('selected')){
        rows[i].classList.remove('selected');
      }
    }
  }
  // 批量選取行
  rows.slice(rowIndex, lastRowIndex).forEach((row) => {
    row.classList.add('selected');
  });
}