Add cell input extension (#3647)

* add extension cell-input

* fix select type

* fix2 select type

* fix3 select type

* fix3 cell-input-enabled

* Create README.md

* Remove ;

src/extensions/cell-input/README.md

@@ -0,0 +1,35 @@
+# Cell Input
+### Plugin to add input/select element on the cells of table
+
+## Usage
+
+```html
+<script src="extensions/cell-input/bootstrap-table-cell-input.js"></script>
+```
+## Options of table
+
+### cellInputEnabled
+
+* type: Boolean
+* description: Set to true to enable the plugin
+* default: `false`
+
+## Options of column
+
+### cellInputEnabled
+
+* type: Boolean
+* description: Set to true to make the cell editable
+* default: `false`
+
+### cellInputType
+
+* type: String
+* description: defines the type of input. available options: `text` and `select`
+* default: `text`
+
+
+## Example
+
+
+[http://jsfiddle.net/amatveef/5qztmj0w/](http://jsfiddle.net/amatveef/5qztmj0w/)

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

@@ -0,0 +1,12 @@
+.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/bootstrap-table-cell-input.js

@@ -0,0 +1,217 @@
+/**
+ * @author andrey matveev <aamatveef@gmail.com>
+ * @version: v1.1.0
+ * https://github.com/aamatveev/bootstrap-table
+ * extensions: 
+ */
+
+!function ($) {
+
+    'use strict';
+
+    $.extend($.fn.bootstrapTable.defaults, {
+        cellInputEnabled: false,
+        cellInputType: "text", // text or select or textarea
+        cellInputUniqueId: "",
+        cellInputSelectOptinons: [], // [{ text: '', value: '', disabled: false, default: true },{}]
+        cellInputIsDeciaml: false,
+        onCellInputInit: function () {
+            return false
+        },
+        onCellInputBlur: function (field, row, oldValue, $el) {
+            return false
+        },
+        onCellInputFocus: function (field, row, oldValue, $el) {
+            return false
+        },
+        onCellInputKeyup: function (field, row, oldValue, $el) {
+            return false
+        },
+        onCellInputKeydown: function (field, row, oldValue, $el) {
+                return false
+        },
+        onCellInputSelectChange: function (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'
+    })
+
+    var BootstrapTable = $.fn.bootstrapTable.Constructor,
+        _initTable = BootstrapTable.prototype.initTable,
+        _initBody = BootstrapTable.prototype.initBody
+
+    BootstrapTable.prototype.initTable = function () {
+        var that = this
+        _initTable.apply(this, Array.prototype.slice.apply(arguments))
+
+        // exit if table.options.cellInputEnabled = false
+        if (!this.options.cellInputEnabled) {
+            return
+        }
+
+        $.each(this.columns, function (i, column) {
+            
+            // exit if column.cellInputEnabled = false
+            if(!column.cellInputEnabled){
+                return
+            }
+
+            if (column.cellInputType === "text") {
+                var _formatter = column.formatter
+                column.formatter = function (value, row, index) {
+                    var result = _formatter ? _formatter(value, row, index) : value
+                    
+                    // Решает проблему невозможности ввода кавычек &quot;
+                    result = typeof result === "string" ? result.replace(/"/g, '&quot;') : result
+
+                    var isSetDataUniqueIdAttr = column.cellInputUniqueId && column.cellInputUniqueId.length > 0
+                    var 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") {
+
+                var _formatter = column.formatter
+                column.formatter = function (value, row, index) {
+                    
+                    var result = _formatter ? _formatter(value, row, index) : value
+                    var optionDatas = column.cellInputSelectOptinons!= null ? column.cellInputSelectOptinons : []
+                    var selectoptions = []
+
+                    var arrAllowedValues = []
+                    for (var k = 0; k < optionDatas.length; k++) {
+                        arrAllowedValues.push(optionDatas[k].value)
+                    }
+                    var allowedVal = $.inArray(value, arrAllowedValues) >= 0
+                    
+                    for (var j = 0; j < optionDatas.length; j++) {
+                        var optionData = optionDatas[j]
+                        var 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>');
+                    }
+
+                    var isSetDataUniqueIdAttr = column.cellInputUniqueId && column.cellInputUniqueId.length > 0
+                    var 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('')
+                }
+            }else if (column.cellInputType === "textarea") {
+
+            } else {
+                return
+            }
+
+        })
+    }
+
+    BootstrapTable.prototype.initBody = function (fixedScroll) {
+        var that = this
+        _initBody.apply(this, Array.prototype.slice.apply(arguments))
+
+        if (!this.options.cellInputEnabled) {
+            return
+        }
+
+        $.each(this.columns, function (i, column) {
+            if (column.cellInputType === "text") {
+                that.$body.find('input[data-name="' + column.field + '"]')
+                .off('blur').on('blur', function (e) {
+                    var data = that.getData(),
+                        index = $(this).parents('tr[data-index]').data('index'),
+                        row = data[index],
+                        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) {
+                        var data = that.getData(),
+                            index = $(this).parents('tr[data-index]').data('index'),
+                            row = data[index],
+                            oldValue = row[column.field],
+                            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) {
+                        var data = that.getData(),
+                            index = $(this).parents('tr[data-index]').data('index'),
+                            row = data[index],
+                            oldValue = row[column.field],
+                            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) {
+                        var data = that.getData(),
+                            index = $(this).parents('tr[data-index]').data('index'),
+                            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) {
+
+                        var data = that.getData(),
+                            index = $(this).parents('tr[data-index]').data('index'),
+                            row = data[index],
+                            oldValue = row[column.field],
+                            newValue = $(this).val()
+
+                        var isBoolTrue = newValue.toLowerCase() === 'true'
+                        var isBoolFalse = newValue.toLowerCase() === 'false'
+
+                        row[column.field] = isBoolTrue ? true : (isBoolFalse) ? false : newValue
+                        that.trigger('cellinput-selectchange', column.field, row, oldValue, index, $(this))
+                    })
+            } else if (column.cellInputType === "textarea"){
+                
+            }
+
+        })
+        this.trigger('cellinput-init')
+    }
+
+}(jQuery)

src/extensions/cell-input/extension.json

@@ -0,0 +1,17 @@
+{
+  "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"
+  }
+}