Merge pull request #4313 from wenzhixin/feature/treegrid

Fix #4282: updated treegrid

src/bootstrap-table.js

@@ -1103,7 +1103,7 @@ class BootstrapTable {
     return false
   }
 
-  initRow (item, i) {
+  initRow (item, i, data, trFragments) {
     const html = []
     let style = {}
     const csses = []
@@ -1322,14 +1322,19 @@ class BootstrapTable {
     }
 
     const rows = []
+    const trFragments = $(document.createDocumentFragment())
     let hasTr = false
 
     for (let i = this.pageFrom - 1; i < this.pageTo; i++) {
       const item = data[i]
-      const tr = this.initRow(item, i)
+      const tr = this.initRow(item, i, data, trFragments)
       hasTr = hasTr || !!tr
       if (tr && typeof tr === 'string') {
-        rows.push(tr)
+        if (this.virtualScrollDisabled) {
+          trFragments.append(tr)
+        } else {
+          rows.push(tr)
+        }
       }
     }
 
@@ -1339,17 +1344,21 @@ class BootstrapTable {
         this.$header.find('th').length,
         this.options.formatNoMatches())}</tr>`)
     } else {
-      if (this.virtualScroll) {
-        this.virtualScroll.destroy()
-      }
-      this.virtualScroll = new VirtualScroll({
-        rows,
-        scrollEl: this.$tableBody[0],
-        contentEl: this.$body[0],
-        callback: () => {
-          this.fitHeader()
+      if (this.virtualScrollDisabled) {
+        this.$body.html(trFragments)
+      } else {
+        if (this.virtualScroll) {
+          this.virtualScroll.destroy()
         }
-      })
+        this.virtualScroll = new VirtualScroll({
+          rows,
+          scrollEl: this.$tableBody[0],
+          contentEl: this.$body[0],
+          callback: () => {
+            this.fitHeader()
+          }
+        })
+      }
     }
 
     if (!fixedScroll) {

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

@@ -207,9 +207,11 @@ $.BootstrapTable = class extends $.BootstrapTable {
         ? 'post-body.bs.table' : 'page-change.bs.table'
       this.$el.one(eventName, () => {
         doExport(() => {
+          this.virtualScrollDisabled = false
           this.togglePagination()
         })
       })
+      this.virtualScrollDisabled = true
       this.togglePagination()
       this.trigger('export-saved', this.getData())
     } else if (o.exportDataType === 'selected') {

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

@@ -1,110 +1,96 @@
 /**
  * @author: YL
- * @version: v1.0.0
+ * @update: zhixin wen <wenzhixin2010@gmail.com>
  */
 
 $.extend($.fn.bootstrapTable.defaults, {
+  treeEnable: false,
   treeShowField: null,
   idField: 'id',
   parentIdField: 'pid',
-  rootParentId: null,
-  onGetNodes (row, data) {
-    const that = this
-    const nodes = []
-    $.each(data, (i, item) => {
-      if (row[that.options.idField] === item[that.options.parentIdField]) {
-        nodes.push(item)
-      }
-    })
-    return nodes
-  },
-  onCheckRoot (row, data) {
-    const that = this
-    return that.options.rootParentId === row[that.options.parentIdField] ||
-              !row[that.options.parentIdField]
-  }
+  rootParentId: null
 })
 
-const BootstrapTable = $.fn.bootstrapTable.Constructor
-const _init = BootstrapTable.prototype.init
-const _initRow = BootstrapTable.prototype.initRow
-const _initHeader = BootstrapTable.prototype.initHeader
+
 let _rowStyle = null
 
-BootstrapTable.prototype.init = function (...args) {
-  _rowStyle = this.options.rowStyle
-  _init.apply(this, Array.prototype.slice.apply(args))
-}
+$.BootstrapTable = class extends $.BootstrapTable {
 
-// td
-BootstrapTable.prototype.initHeader = function (...args) {
-  const that = this
-  _initHeader.apply(that, Array.prototype.slice.apply(args))
-  const treeShowField = that.options.treeShowField
-  if (treeShowField) {
-    $.each(this.header.fields, (i, field) => {
-      if (treeShowField === field) {
-        that.treeEnable = true
-        return false
-      }
-    })
+  init (...args) {
+    _rowStyle = this.options.rowStyle
+    super.init(...args)
   }
-}
-
-const initTr = function (item, idx, data, parentDom) {
-  const that = this
-  const nodes = that.options.onGetNodes.apply(that, [item, data])
-  item._nodes = nodes
-  parentDom.append(_initRow.apply(that, [item, idx, data, parentDom]))
 
-  // init sub node
-  const len = nodes.length - 1
-  for (let i = 0; i <= len; i++) {
-    const node = nodes[i]
-    const defaultItem = $.extend(true, {}, item)
-    node._level = defaultItem._level + 1
-    node._parent = defaultItem
-    if (i === len)
-      node._last = 1
-    // jquery.treegrid.js
-    that.options.rowStyle = function (item, idx) {
-      const res = _rowStyle.apply(that, Array.prototype.slice.apply(arguments))
-      const id = item[that.options.idField] ? item[that.options.idField] : 0
-      const pid = item[that.options.parentIdField] ? item[that.options.parentIdField] : 0
-      res.classes = [
-        res.classes || '',
-        `treegrid-${id}`,
-        `treegrid-parent-${pid}`
-      ].join(' ')
-      return res
+  initHeader (...args) {
+    super.initHeader(...args)
+    const treeShowField = this.options.treeShowField
+    if (treeShowField) {
+      for (const field of this.header.fields) {
+        if (treeShowField === field) {
+          this.treeEnable = true
+          break
+        }
+      }
     }
-    initTr.apply(that, [node, $.inArray(node, data), data, parentDom])
   }
-}
 
-// tr
-BootstrapTable.prototype.initRow = function (item, idx, data, parentDom) {
-  const that = this
-  if (that.treeEnable) {
-    // init root node
-    if (that.options.onCheckRoot.apply(that, [item, data])) {
-      if (item._level === undefined) {
-        item._level = 0
+  initBody (...args) {
+    this.virtualScrollDisabled = this.treeEnable
+    super.initBody(...args)
+  }
+
+  initTr (item, idx, data, parentDom) {
+    const nodes = data.filter(it => item[this.options.idField] === it[this.options.parentIdField])
+
+    parentDom.append(super.initRow(item, idx, data, parentDom))
+
+    // init sub node
+    const len = nodes.length - 1
+    for (let i = 0; i <= len; i++) {
+      const node = nodes[i]
+      const defaultItem = $.extend(true, {}, item)
+      node._level = defaultItem._level + 1
+      node._parent = defaultItem
+      if (i === len) {
+        node._last = 1
       }
       // jquery.treegrid.js
-      that.options.rowStyle = function (item, idx) {
-        const res = _rowStyle.apply(that, Array.prototype.slice.apply(arguments))
-        const x = item[that.options.idField] ? item[that.options.idField] : 0
+      this.options.rowStyle = (item, idx) => {
+        const res = _rowStyle(item, idx)
+        const id = item[this.options.idField] ? item[this.options.idField] : 0
+        const pid = item[this.options.parentIdField] ? item[this.options.parentIdField] : 0
         res.classes = [
           res.classes || '',
-          `treegrid-${x}`
+          `treegrid-${id}`,
+          `treegrid-parent-${pid}`
         ].join(' ')
         return res
       }
-      initTr.apply(that, [item, idx, data, parentDom])
-      return true
+      this.initTr(node, $.inArray(node, data), data, parentDom)
+    }
+  }
+
+  initRow (item, idx, data, parentDom) {
+    if (this.treeEnable) {
+      if (this.options.rootParentId === item[this.parentIdField] || !item[this.parentIdField]) {
+        if (item._level === undefined) {
+          item._level = 0
+        }
+        // jquery.treegrid.js
+        this.options.rowStyle = (item, idx) => {
+          const res = _rowStyle(item, idx)
+          const x = item[this.options.idField] ? item[this.options.idField] : 0
+          res.classes = [
+            res.classes || '',
+            `treegrid-${x}`
+          ].join(' ')
+          return res
+        }
+        this.initTr(item, idx, data, parentDom)
+        return true
+      }
+      return false
     }
-    return false
+    return super.initRow(item, idx, data, parentDom)
   }
-  return _initRow.apply(that, Array.prototype.slice.apply(arguments))
 }