Merge pull request #4957 from wenzhixin/docs/4846

Docs/4846

site/_data/nav.yml

@@ -33,6 +33,7 @@
     - title: Mobile
     - title: Multiple Sort
     - title: Page Jump To
+    - title: Pipeline
     - title: Print
     - title: Reorder Columns
     - title: Reorder Rows

site/docs/about/overview.md

@@ -9,7 +9,7 @@ group: about
 
 ## Team
 
-Bootstrap Table is maintained by [wenzhixin](https://github.com/wenzhixin) on GitHub. We're actively looking to grow this team and would love to hear from you if you're excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.
+Bootstrap Table is maintained by [wenzhixin](https://github.com/wenzhixin), [djhvscf](https://github.com/djhvscf) and [UtechtDustin](https://github.com/UtechtDustin) on GitHub. We're actively looking to grow this team and would love to hear from you if you're excited about CSS at scale, writing and maintaining vanilla JavaScript plugins, and improving build tooling processes for frontend code.
 
 ## Get involved
 

site/docs/extensions/cell-input.md

@@ -1,54 +0,0 @@
----
-layout: docs
-title: Cell Input
-description: Plugin to add input/select element on the cells of table.
-group: extensions
-toc: true
----
-
-Use Plugin: [bootstrap-table-cell-input](https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/cell-input)
-
-## Usage
-
-{% highlight html %}
-<script src="extensions/cell-input/bootstrap-table-cell-input.js"></script>
-{% endhighlight %}
-
-## Options
-
-### cellInputEnabled
-
-- **type:** `Boolean`
-
-- **Detail:**
-
-   Set to true to enable the plugin.
-
-- **Default:** `false`
-
-## Column options
-
-### cellInputEnabled
-
-- **type:** `Boolean`
-
-- **Detail:**
-
-   Set to true to make the cell editable.
-
-- **Default:** `false`
-
-### cellInputType
-
-- **type:** `String`
-
-- **Detail:**
-
-   Defines the type of input. available options: `text` and `select`.
-
-- **Default:** `text`
-
-## Example
-
-
-[http://jsfiddle.net/amatveef/5qztmj0w/](http://jsfiddle.net/amatveef/5qztmj0w/)

site/docs/extensions/pipeline.md

@@ -0,0 +1,77 @@
+# Bootstrap Table Pipelining
+
+Use Plugin: [bootstrap-table-pipeline]
+
+This plugin enables client side data caching for server side requests which will
+eliminate the need to issue a new request every page change. This will allow
+for a performance balance for a large data set between returning all data at once
+(client side paging) and a new server side request (server side paging).
+
+There are two new options:
+- usePipeline: enables this feature
+- pipelineSize: the size of each cache window
+
+The size of the pipeline must be evenly divisible by the current page size. This is
+assured by rounding up to the nearest evenly divisible value. For example, if
+the pipeline size is 4990 and the current page size is 25, then pipeline size will
+be dynamically set to 5000.
+
+The cache windows are computed based on the pipeline size and the total number of rows
+returned by the server side query. For example, with pipeline size 500 and total rows
+1300, the cache windows will be:
+
+[{'lower': 0, 'upper': 499}, {'lower': 500, 'upper': 999}, {'lower': 1000, 'upper': 1499}]
+
+Using the limit (i.e. the pipelineSize) and offset parameters, the server side request
+**MUST** return only the data in the requested cache window **AND** the total number of rows.
+To wit, the server side code must use the offset and limit parameters to prepare the response
+data.
+
+On a page change, the new offset is checked if it is within the current cache window. If so,
+the requested page data is returned from the cached data set. Otherwise, a new server side
+request will be issued for the new cache window.
+
+The current cached data is only invalidated on these events:
+
+ - sorting
+ - searching
+ - page size change
+ - page change moves into a new cache window
+
+There are two new events:
+- cached-data-hit.bs.table: issued when cached data is used on a page change
+- cached-data-reset.bs.table: issued when the cached data is invalidated and new server side request is issued
+
+## Features
+
+* Created with Bootstrap 4
+
+## Usage
+
+```
+<script src="extensions/pipeline/bootstrap-table-pipeline.js"></script>
+```
+
+## Options
+
+## pipelineSize
+
+* type: Integer
+* description: Size of each cache window. Must be greater than 0
+* default: `1000`
+
+### usePipeline
+
+* type: Boolean
+* description: Set true to enable pipelining
+* default: `false`
+
+## Events
+
+### onCachedDataHit(cached-data-hit.bs.table)
+
+* Fires when paging was able to use the locally cached data.
+
+### onCachedDataReset(cached-data-reset.bs.table)
+
+* Fires when the locally cached data needed to be reset (i.e. on sorting, searching, page size change or paged out of current cache window)

src/extensions/cell-input/bootstrap-table-cell-input.js

@@ -1,197 +0,0 @@
-/**
- * @author andrey matveev <aamatveef@gmail.com>
- * @version: v1.1.0
- * https://github.com/aamatveev/bootstrap-table
- * extensions:
- */
-
-$.extend($.fn.bootstrapTable.defaults, {
-  cellInputEnabled: false,
-  cellInputType: 'text', // text or select or textarea
-  cellInputUniqueId: '',
-  cellInputSelectOptinons: [], // [{ text: '', value: '', disabled: false, default: true },{}]
-  cellInputIsDeciaml: false,
-  onCellInputInit () {
-    return false
-  },
-  onCellInputBlur (field, row, oldValue, $el) {
-    return false
-  },
-  onCellInputFocus (field, row, oldValue, $el) {
-    return false
-  },
-  onCellInputKeyup (field, row, oldValue, $el) {
-    return false
-  },
-  onCellInputKeydown (field, row, oldValue, $el) {
-    return false
-  },
-  onCellInputSelectChange (field, row, oldValue, $el) {
-    return false
-  }
-})
-
-$.extend($.fn.bootstrapTable.Constructor.EVENTS, {
-  'cellinput-init.bs.table': 'onCellInputInit',
-  'cellinput-blur.bs.table': 'onCellInputBlur',
-  'cellinput-focus.bs.table': 'onCellInputFocus',
-  'cellinput-keyup.bs.table': 'onCellInputKeyup',
-  'cellinput-keydown.bs.table': 'onCellInputKeydown',
-  'cellinput-selectchange.bs.table': 'onCellInputSelectChange'
-})
-
-const BootstrapTable = $.fn.bootstrapTable.Constructor
-const _initTable = BootstrapTable.prototype.initTable
-const _initBody = BootstrapTable.prototype.initBody
-
-BootstrapTable.prototype.initTable = function (...args) {
-  _initTable.apply(this, Array.prototype.slice.apply(args))
-
-  // exit if table.options.cellInputEnabled = false
-  if (!this.options.cellInputEnabled) {
-    return
-  }
-
-  $.each(this.columns, (i, column) => {
-
-    // exit if column.cellInputEnabled = false
-    if (!column.cellInputEnabled) {
-      return
-    }
-    const _formatter = column.formatter
-    if (column.cellInputType === 'text') {
-      column.formatter = (value, row, index) => {
-        let result = _formatter ? _formatter(value, row, index) : value
-
-        // Решает проблему невозможности ввода кавычек &quot;
-        result = typeof result === 'string' ? result.replace(/"/g, '&quot;') : result
-
-        const isSetDataUniqueIdAttr = column.cellInputUniqueId && column.cellInputUniqueId.length > 0
-        const disableCallbackFunc = column.cellInputDisableCallbackFunc
-        return ['<input type="text" class="table-td-textbox form-control"',
-          // ' id="' + column.field + '"',
-          isSetDataUniqueIdAttr ? ` data-uniqueid="${row[column.cellInputUniqueId]}"` : '',
-          ` data-name="${column.field}"`,
-          ` data-value="${result}"`,
-          ` value="${result}"`,
-          ' autofocus="autofocus"',
-          typeof disableCallbackFunc !== 'undefined' && disableCallbackFunc(row) ? ' disabled="disabled"' : '',
-          '>'
-        ].join('')
-      }
-    } else if (column.cellInputType === 'select') {
-      column.formatter = (value, row, index) => {
-        let result = _formatter ? _formatter(value, row, index) : value
-        const optionDatas = column.cellInputSelectOptinons !== null ? column.cellInputSelectOptinons : []
-        const selectoptions = []
-
-        const arrAllowedValues = []
-        for (let k = 0; k < optionDatas.length; k++) {
-          arrAllowedValues.push(optionDatas[k].value)
-        }
-        const allowedVal = $.inArray(value, arrAllowedValues) >= 0
-
-        for (const optionData of optionDatas) {
-          let isSelected = optionData.value === value
-          if (!allowedVal && optionData.disabled) {
-            isSelected = true
-            result = optionData.value
-          }
-
-          selectoptions.push(`<option value="${optionData.value}" ${isSelected ? ' selected="selected" ' : ''}${optionData.disabled ? ' disabled' : ''}>${optionData.text}</option>`)
-        }
-
-        const isSetDataUniqueIdAttr = column.cellInputUniqueId && column.cellInputUniqueId.length > 0
-        const disableCallbackFunc = column.disableCallbackFunc
-        return [
-          '<select class="form-control" style="padding: 4px;"',
-          isSetDataUniqueIdAttr ? ` data-uniqueid="${row[column.cellInputUniqueId]}"` : '',
-          ` data-name="${column.field}"`,
-          ` data-value="${result}"`,
-          typeof disableCallbackFunc !== 'undefined' && disableCallbackFunc(row) ? ' disabled="disabled"' : '',
-          '>',
-          selectoptions.join(''),
-          '</select>'
-        ].join('')
-      }
-    }
-  })
-}
-
-BootstrapTable.prototype.initBody = function (fixedScroll) {
-  const that = this
-  _initBody.apply(this, Array.prototype.slice.apply(arguments))
-
-  if (!this.options.cellInputEnabled) {
-    return
-  }
-
-  $.each(this.columns, (i, column) => {
-    if (column.cellInputType === 'text') {
-      that.$body.find(`input[data-name="${column.field}"]`)
-        .off('blur').on('blur', function (e) {
-          const data = that.getData()
-          const index = $(this).parents('tr[data-index]').data('index')
-          const row = data[index]
-          const newValue = $(this).val()
-
-          row[column.field] = newValue
-          that.trigger('cellinput-blur', column.field, row, $(this))
-        })
-
-      that.$body.find(`input[data-name="${column.field}"]`)
-        .off('keyup').on('keyup', function (e) {
-          const data = that.getData()
-          const index = $(this).parents('tr[data-index]').data('index')
-          const row = data[index]
-          const oldValue = row[column.field]
-          const newValue = $(this).val()
-
-          row[column.field] = newValue
-          that.trigger('cellinput-keyup', column.field, row, oldValue, index, $(this))
-        })
-
-      that.$body.find(`input[data-name="${column.field}"]`)
-        .off('keydown').on('keydown', function (e) {
-          const data = that.getData()
-          const index = $(this).parents('tr[data-index]').data('index')
-          const row = data[index]
-          const oldValue = row[column.field]
-          const newValue = $(this).val()
-
-          if (!column.tdtexboxIsDeciaml) {
-            row[column.field] = newValue
-          }
-
-          that.trigger('cellinput-keydown', column.field, row, oldValue, index, $(this))
-        })
-
-      that.$body.find(`input[data-name="${column.field}"]`)
-        .off('focus').on('focus', function (e) {
-          const data = that.getData()
-          const index = $(this).parents('tr[data-index]').data('index')
-          const row = data[index]
-
-          that.trigger('cellinput-focus', column.field, row, $(this))
-        })
-    } else if (column.cellInputType === 'select') {
-
-      that.$body.find(`select[data-name="${column.field}"]`)
-        .off('change').on('change', function (e) {
-
-          const data = that.getData()
-          const index = $(this).parents('tr[data-index]').data('index')
-          const row = data[index]
-          const oldValue = row[column.field]
-          const newValue = $(this).val()
-
-          const isBoolTrue = newValue.toLowerCase() === 'true'
-          const isBoolFalse = newValue.toLowerCase() === 'false'
-
-          row[column.field] = isBoolTrue ? true : (isBoolFalse) ? false : newValue
-          that.trigger('cellinput-selectchange', column.field, row, oldValue, index, $(this))
-        })
-    }
-  })
-  this.trigger('cellinput-init')
-}

src/extensions/cell-input/bootstrap-table-cell-input.scss

@@ -1,12 +0,0 @@
-.table-cell-input {
-  display: block !important;
-  padding: 5px !important;
-  margin: 0 !important;
-  border: 0 !important;
-  width: 100% !important;
-  box-sizing: border-box !important;
-  -moz-box-sizing: border-box !important;
-  border-radius: 0 !important;
-  line-height: 1 !important;
-  white-space: nowrap;
-}

src/extensions/cell-input/extension.json

@@ -1,17 +0,0 @@
-{
-  "name": "Cell Input",
-  "version": "1.0.0",
-  "description": "Plugin to edit cell value.",
-  "url": "https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/cell-input",
-  "example": "#",
-
-  "plugins": [{
-    "name": "bootstrap-table-cell-input",
-    "url": "https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/cell-input"
-  }],
-
-  "author": {
-    "name": "aamatveev",
-    "image": "https://avatars3.githubusercontent.com/u/9355888"
-  }
-}