| /pack-rat/003_pack_rat/pack-rat/node_modules/bootstrap-table/src/extensions/editable/README.md |
|---|
| @@ -0,0 +1,71 @@ |
|---|
| # Table Editable |
| |
| Use Plugin: [x-editable](https://github.com/vitalets/x-editable) |
| |
| ## Usage |
| |
| ```html |
| <script src="extensions/editable/bootstrap-table-editable.js"></script> |
| ``` |
| |
| ## Options |
| |
| ### editable |
| |
| * type: Boolean |
| * description: Set false to disabled editable of all columns. |
| * default: `true` |
| |
| ## Column options |
| |
| ### editable |
| |
| * type: Object |
| * description: Configuration of x-editable. Full list of options: http://vitalets.github.io/x-editable/docs.html#editable |
| * default: `undefined` |
| |
| All options can be defined via `data-editable-*` HTML attributes. Table wide options are used for every column but can be overridden: |
| |
| ````html |
| <table id="my_table_id" |
| data-url="data/url.json" |
| data-id-field="id" |
| data-editable-emptytext="Default empty text." |
| data-editable-url="/my/editable/update/path"> |
| <thead> |
| <tr> |
| <th class="col-md-1" data-field="id" data-sortable="true" data-align="center">#</th> |
| <th class="col-md-4" data-field="name" data-editable="true">Name</th> |
| <th class="col-md-7" data-field="description" data-editable="true" data-editable-emptytext="Custom empty text.">Description</th> |
| </tr> |
| </thead> |
| </table> |
| ```` |
| |
| ## Events |
| |
| ### onEditableInit(editable-init.bs.table) |
| |
| Fired when all columns was initialized by `$().editable()` method. |
| |
| ### onEditableSave(editable-save.bs.table) |
| |
| Fired when an editable cell is saved. |
| |
| parameters: editable, field, row, oldValue, $el |
| |
| ### onEditableShown(editable-shown.bs.table) |
| |
| Fired when an editable cell is opened for edits. |
| |
| parameters: editable, field, row, $el |
| |
| ### onEditableHidden(editable-hidden.bs.table) |
| |
| Fired when an editable cell is hidden / closed. |
| |
| parameters: field, row, $el, reason |
| |
| ## The existing problems |
| |
| * Editable extension does not support searchable in the select type. |
| /pack-rat/003_pack_rat/pack-rat/node_modules/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js |
|---|
| @@ -0,0 +1,146 @@ |
|---|
| /** |
| * @author zhixin wen <wenzhixin2010@gmail.com> |
| * extensions: https://github.com/vitalets/x-editable |
| */ |
| |
| (function($) { |
| |
| 'use strict'; |
| |
| $.extend($.fn.bootstrapTable.defaults, { |
| editable: true, |
| onEditableInit: function() { |
| return false; |
| }, |
| onEditableSave: function(field, row, oldValue, $el) { |
| return false; |
| }, |
| onEditableShown: function(field, row, $el, editable) { |
| return false; |
| }, |
| onEditableHidden: function(field, row, $el, reason) { |
| return false; |
| } |
| }); |
| |
| $.extend($.fn.bootstrapTable.Constructor.EVENTS, { |
| 'editable-init.bs.table': 'onEditableInit', |
| 'editable-save.bs.table': 'onEditableSave', |
| 'editable-shown.bs.table': 'onEditableShown', |
| 'editable-hidden.bs.table': 'onEditableHidden' |
| }); |
| |
| 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)); |
| |
| if (!this.options.editable) { |
| return; |
| } |
| |
| $.each(this.columns, function(i, column) { |
| if (!column.editable) { |
| return; |
| } |
| |
| var editableOptions = {}, |
| editableDataMarkup = [], |
| editableDataPrefix = 'editable-'; |
| |
| var processDataOptions = function(key, value) { |
| // Replace camel case with dashes. |
| var dashKey = key.replace(/([A-Z])/g, function($1) { |
| return "-" + $1.toLowerCase(); |
| }); |
| if (dashKey.slice(0, editableDataPrefix.length) == editableDataPrefix) { |
| var dataKey = dashKey.replace(editableDataPrefix, 'data-'); |
| editableOptions[dataKey] = value; |
| } |
| }; |
| |
| $.each(that.options, processDataOptions); |
| |
| column.formatter = column.formatter || function(value, row, index) { |
| return value; |
| }; |
| column._formatter = column._formatter ? column._formatter : column.formatter; |
| column.formatter = function(value, row, index) { |
| var result = column._formatter ? column._formatter(value, row, index) : value; |
| |
| $.each(column, processDataOptions); |
| |
| $.each(editableOptions, function(key, value) { |
| editableDataMarkup.push(' ' + key + '="' + value + '"'); |
| }); |
| |
| var _dont_edit_formatter = false; |
| if (column.editable.hasOwnProperty('noeditFormatter')) { |
| _dont_edit_formatter = column.editable.noeditFormatter(value, row, index); |
| } |
| |
| if (_dont_edit_formatter === false) { |
| return ['<a href="javascript:void(0)"', |
| ' data-name="' + column.field + '"', |
| ' data-pk="' + row[that.options.idField] + '"', |
| ' data-value="' + result + '"', |
| editableDataMarkup.join(''), |
| '>' + '</a>' |
| ].join(''); |
| } else { |
| return _dont_edit_formatter; |
| } |
| |
| }; |
| }); |
| }; |
| |
| BootstrapTable.prototype.initBody = function() { |
| var that = this; |
| _initBody.apply(this, Array.prototype.slice.apply(arguments)); |
| |
| if (!this.options.editable) { |
| return; |
| } |
| |
| $.each(this.columns, function(i, column) { |
| if (!column.editable) { |
| return; |
| } |
| |
| that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable) |
| .off('save').on('save', function(e, params) { |
| var data = that.getData(), |
| index = $(this).parents('tr[data-index]').data('index'), |
| row = data[index], |
| oldValue = row[column.field]; |
| |
| $(this).data('value', params.submitValue); |
| row[column.field] = params.submitValue; |
| that.trigger('editable-save', column.field, row, oldValue, $(this)); |
| that.resetFooter(); |
| }); |
| that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable) |
| .off('shown').on('shown', function(e, editable) { |
| var data = that.getData(), |
| index = $(this).parents('tr[data-index]').data('index'), |
| row = data[index]; |
| |
| that.trigger('editable-shown', column.field, row, $(this), editable); |
| }); |
| that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable) |
| .off('hidden').on('hidden', function(e, reason) { |
| var data = that.getData(), |
| index = $(this).parents('tr[data-index]').data('index'), |
| row = data[index]; |
| |
| that.trigger('editable-hidden', column.field, row, $(this), reason); |
| }); |
| }); |
| this.trigger('editable-init'); |
| }; |
| |
| })(jQuery); |
