ソースを参照

Added virtual-scroll event (#5922)

文翼 4 年 前
コミット
db4d1cd42e
4 ファイル変更24 行追加5 行削除
  1. 14 1
      site/docs/api/events.md
  2. 3 2
      src/bootstrap-table.js
  3. 2 1
      src/constants/index.js
  4. 5 1
      src/virtual-scroll/index.js

+ 14 - 1
site/docs/api/events.md

@@ -21,7 +21,7 @@ $('#table').bootstrapTable({
 })
 })
 {% endhighlight %}
 {% endhighlight %}
 
 
-Binding via the jquery event handler:   
+Binding via the jquery event handler:
 {% highlight html %}
 {% highlight html %}
 // Here you can expect to have in the 'e' variable the sender property which is the boostrap-table object
 // Here you can expect to have in the 'e' variable the sender property which is the boostrap-table object
 
 
@@ -397,3 +397,16 @@ $('#table').on('event-name.bs.table', function (e, arg1, arg2, ...) {
   Fires when user uncheck some rows, the parameters contain:
   Fires when user uncheck some rows, the parameters contain:
 
 
   * `rows`: array of records corresponding to previously checked rows.
   * `rows`: array of records corresponding to previously checked rows.
+
+## onVirtualScroll
+
+- **jQuery Event:** `virtual-scroll.bs.table`
+
+- **Parameter:** `startIndex, endIndex`
+
+- **Detail:**
+
+  Fires when user scroll the virtual scroll, the parameters contain:
+
+  * `startIndex`: the start row index of the virtual scroll.
+  * `endIndex`: the end row index of the virtual scroll.

+ 3 - 2
src/bootstrap-table.js

@@ -1746,9 +1746,10 @@ class BootstrapTable {
         scrollEl: this.$tableBody[0],
         scrollEl: this.$tableBody[0],
         contentEl: this.$body[0],
         contentEl: this.$body[0],
         itemHeight: this.options.virtualScrollItemHeight,
         itemHeight: this.options.virtualScrollItemHeight,
-        callback: () => {
+        callback: (startIndex, endIndex) => {
           this.fitHeader()
           this.fitHeader()
           this.initBodyEvent()
           this.initBodyEvent()
+          this.trigger('virtual-scroll', startIndex, endIndex)
         }
         }
       })
       })
     }
     }
@@ -2819,7 +2820,7 @@ class BootstrapTable {
     const colspan = options.colspan || 1
     const colspan = options.colspan || 1
     let i
     let i
     let j
     let j
-    const $tr = this.$body.find('>tr')
+    const $tr = this.$body.find('>tr[data-index]')
 
 
     col += Utils.getDetailViewIndexOffset(this.options)
     col += Utils.getDetailViewIndexOffset(this.options)
 
 

+ 2 - 1
src/constants/index.js

@@ -568,7 +568,8 @@ const EVENTS = {
   'reset-view.bs.table': 'onResetView',
   'reset-view.bs.table': 'onResetView',
   'refresh.bs.table': 'onRefresh',
   'refresh.bs.table': 'onRefresh',
   'scroll-body.bs.table': 'onScrollBody',
   'scroll-body.bs.table': 'onScrollBody',
-  'toggle-pagination.bs.table': 'onTogglePagination'
+  'toggle-pagination.bs.table': 'onTogglePagination',
+  'virtual-scroll.bs.table': 'onVirtualScroll'
 }
 }
 
 
 Object.assign(DEFAULTS, EN)
 Object.assign(DEFAULTS, EN)

+ 5 - 1
src/virtual-scroll/index.js

@@ -21,7 +21,7 @@ class VirtualScroll {
     const onScroll = () => {
     const onScroll = () => {
       if (this.lastCluster !== (this.lastCluster = this.getNum())) {
       if (this.lastCluster !== (this.lastCluster = this.getNum())) {
         this.initDOM(this.rows)
         this.initDOM(this.rows)
-        this.callback()
+        this.callback(this.startIndex, this.endIndex)
       }
       }
     }
     }
 
 
@@ -54,6 +54,8 @@ class VirtualScroll {
       if (data.bottomOffset) {
       if (data.bottomOffset) {
         html.push(this.getExtra('bottom', data.bottomOffset))
         html.push(this.getExtra('bottom', data.bottomOffset))
       }
       }
+      this.startIndex = data.start
+      this.endIndex = data.end
       this.contentEl.innerHTML = html.join('')
       this.contentEl.innerHTML = html.join('')
 
 
       if (fixedScroll) {
       if (fixedScroll) {
@@ -104,6 +106,8 @@ class VirtualScroll {
       rows[i] && thisRows.push(rows[i])
       rows[i] && thisRows.push(rows[i])
     }
     }
     return {
     return {
+      start,
+      end,
       topOffset,
       topOffset,
       bottomOffset,
       bottomOffset,
       rowsAbove,
       rowsAbove,