Added virtual scroll options and set false by default

site/docs/api/table-options.md

@@ -145,6 +145,36 @@ The table options are defined in `jQuery.fn.bootstrapTable.defaults`.
 
 - **Example:** [Table Locale](https://examples.bootstrap-table.com/#options/table-locale.html)
 
+## virtualScroll
+
+- **Attribute:** `data-virtual-scroll`
+
+- **Type:** `Boolean`
+
+- **Detail:**
+
+  Set `true` to enable virtual scroll to displays a virtual, "infinite" list.
+
+- **Default:** `false`
+
+- **Example:** [Large Data](https://examples.bootstrap-table.com/#options/large-data.html)
+
+## virtualScrollItemHeight
+
+- **Attribute:** `data-virtual-scroll-item-height`
+
+- **Type:** `Number`
+
+- **Detail:**
+
+  If this option is not define, we will use the height of the first item by default.
+
+  It is **important** to provide this if virtual item height will be significantly larger than the default height. This dimension is used to help determine how many cells should be created when initialized, and to help calculate the height of the scrollable area. This height value can only use `px` units.
+
+- **Default:** `undefined`
+
+- **Example:** [Virtual Scroll Item Height](https://examples.bootstrap-table.com/#options/virtual-scroll-item-height.html)
+
 ## sortable
 
 - **Attribute:** `data-sortable`

src/bootstrap-table.js

@@ -1382,7 +1382,7 @@ class BootstrapTable {
       const tr = this.initRow(item, i, data, trFragments)
       hasTr = hasTr || !!tr
       if (tr && typeof tr === 'string') {
-        if (this.virtualScrollDisabled) {
+        if (!this.options.virtualScroll) {
           trFragments.append(tr)
         } else {
           rows.push(tr)
@@ -1396,7 +1396,7 @@ class BootstrapTable {
         this.$header.find('th').length,
         this.options.formatNoMatches())}</tr>`)
     } else {
-      if (this.virtualScrollDisabled) {
+      if (!this.options.virtualScroll) {
         this.$body.html(trFragments)
       } else {
         if (this.virtualScroll) {
@@ -1406,6 +1406,7 @@ class BootstrapTable {
           rows,
           scrollEl: this.$tableBody[0],
           contentEl: this.$body[0],
+          itemHeight: this.options.virtualScrollItemHeight,
           callback: () => {
             this.fitHeader()
           }

src/constants/index.js

@@ -118,6 +118,8 @@ const DEFAULTS = {
   },
   undefinedText: '-',
   locale: undefined,
+  virtualScroll: false,
+  virtualScrollItemHeight: undefined,
   sortable: true,
   sortClass: undefined,
   silentSort: true,

src/extensions/export/bootstrap-table-export.js

@@ -225,13 +225,15 @@ $.BootstrapTable = class extends $.BootstrapTable {
     if (o.exportDataType === 'all' && o.pagination) {
       const eventName = o.sidePagination === 'server'
         ? 'post-body.bs.table' : 'page-change.bs.table'
+      const virtualScroll = this.options.virtualScroll
+
       this.$el.one(eventName, () => {
         doExport(() => {
-          this.virtualScrollDisabled = false
+          this.options.virtualScroll = virtualScroll
           this.togglePagination()
         })
       })
-      this.virtualScrollDisabled = true
+      this.options.virtualScroll = false
       this.togglePagination()
       this.trigger('export-saved', this.getData())
     } else if (o.exportDataType === 'selected') {

src/extensions/treegrid/bootstrap-table-treegrid.js

@@ -32,7 +32,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
   }
 
   initBody (...args) {
-    this.virtualScrollDisabled = this.treeEnable
+    this.options.virtualScroll = !this.treeEnable
     super.initBody(...args)
   }
 

src/virtual-scroll/index.js

@@ -8,6 +8,7 @@ class VirtualScroll {
     this.scrollEl = options.scrollEl
     this.contentEl = options.contentEl
     this.callback = options.callback
+    this.itemHeight = options.itemHeight
 
     this.cache = {}
     this.scrollTop = this.scrollEl.scrollTop
@@ -59,9 +60,11 @@ class VirtualScroll {
   }
 
   getRowsHeight () {
-    const nodes = this.contentEl.children
-    const node = nodes[Math.floor(nodes.length / 2)]
-    this.itemHeight = node.offsetHeight
+    if (typeof this.itemHeight === 'undefined') {
+      const nodes = this.contentEl.children
+      const node = nodes[Math.floor(nodes.length / 2)]
+      this.itemHeight = node.offsetHeight
+    }
     this.blockHeight = this.itemHeight * BLOCK_ROWS
     this.clusterRows = BLOCK_ROWS * CLUSTER_BLOCKS
     this.clusterHeight = this.blockHeight * CLUSTER_BLOCKS