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');
  });
}