jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Add editing API

Browse Source
This commit is contained in:
Faris Ansari 2017-10-02 17:38:58 +05:30
parent 700dd05457
commit aab92812c2
4 changed files with 153 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -507,12 +507,7 @@
wrapper: document.querySelector('section'),
addSerialNoColumn: true,
enableClusterize: true,
data,
editing: {
getInput() {
return $('<input type="text" style="background: yellow;" />').get(0)
}
}
data
});
performance.mark("ReGrid-end");

134
lib/ReGrid.js
View File

@ -111,7 +111,7 @@ var _createClass = function () { function defineProperties(target, props) { for
var _utils = __webpack_require__(2);
__webpack_require__(5);
__webpack_require__(3);
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@ -136,7 +136,7 @@ var ReGrid = function () {
this.addSerialNoColumn = (0, _utils.getDefault)(addSerialNoColumn, false);
this.enableClusterize = (0, _utils.getDefault)(enableClusterize, false);
this.enableLogs = (0, _utils.getDefault)(enableLogs, true);
this.editing = (0, _utils.getDefault)(editing, {});
this.editing = (0, _utils.getDefault)(editing, null);
if (data) {
this.refresh(data);
@ -266,12 +266,9 @@ var ReGrid = function () {
}, {
key: 'updateCell',
value: function updateCell(rowIndex, colIndex, value) {
var row = this.getRow(rowIndex);
var cell = row.find(function (cell) {
return cell.col_index === colIndex;
});
var cell = this.getCell(rowIndex, colIndex);
cell.data = value;
cell.content = value;
this.refreshCell(cell);
}
}, {
@ -283,8 +280,8 @@ var ReGrid = function () {
}, {
key: 'refreshCell',
value: function refreshCell(cell) {
var selector = '.data-table-col[data-row-index="' + cell.row_index + '"][data-col-index="' + cell.col_index + '"]';
var $cell = this.body.find(selector);
var selector = '.data-table-col[data-row-index="' + cell.rowIndex + '"][data-col-index="' + cell.colIndex + '"]';
var $cell = this.bodyScrollable.find(selector);
var $newCell = $((0, _utils.getColumnHTML)(cell));
$cell.replaceWith($newCell);
@ -402,22 +399,32 @@ var ReGrid = function () {
var self = this;
this.$editingCell = null;
// if (!self.events.onCellEdit) return;
this.bodyScrollable.on('dblclick', '.data-table-col', function () {
self.activateEditing($(this));
});
$(document.body).on('keypress', function (e) {
// enter keypress on focused cell
if (e.which === 13 && _this2.$focusedCell) {
self.activateEditing(_this2.$focusedCell);
if (e.which === 13 && _this2.$focusedCell && !_this2.$editingCell) {
_this2.log('editingCell');
_this2.activateEditing(_this2.$focusedCell);
e.stopImmediatePropagation();
}
});
$(document.body).on('keypress', function (e) {
// enter keypress on editing cell
if (e.which === 13 && _this2.$editingCell) {
_this2.log('submitCell');
_this2.submitEditing(_this2.$editingCell);
e.stopImmediatePropagation();
}
});
$(document.body).on('click', function (e) {
if ($(e.target).is('.edit-cell, .edit-cell *')) return;
self.bodyScrollable.find('.edit-cell').hide();
_this2.$editingCell = null;
});
}
}, {
@ -441,34 +448,67 @@ var ReGrid = function () {
this.$editingCell = $cell;
var $editCell = $cell.find('.edit-cell').empty();
var cell = this.getCell(rowIndex, colIndex);
var editing = this.getEditingObject(colIndex, rowIndex, cell.content, $editCell);
var render = this.renderEditingInput(colIndex, cell.content, $editCell);
if (render) {
if (editing) {
this.currentCellEditing = editing;
// initialize editing input with cell value
editing.initValue(cell.content);
$editCell.show();
}
// showing the popup is the responsibility of event handler
// self.events.onCellEdit(
// $cell.get(0),
// $editPopup,
// rowIndex,
// colIndex
// );
}
}, {
key: 'renderEditingInput',
value: function renderEditingInput(colIndex, value, parent) {
if (this.editing.renderInput) {
return this.editing.renderInput(colIndex, value, parent);
key: 'getEditingObject',
value: function getEditingObject(colIndex, rowIndex, value, parent) {
if (this.editing) {
return this.editing(colIndex, rowIndex, value, parent);
}
// render fallback
// editing fallback
var $input = $('<input type="text" />');
parent.append($input);
$input.val(value);
$input.select();
return true;
return {
initValue: function initValue(value) {
return $input.val(value);
},
getValue: function getValue() {
return $input.val();
},
setValue: function setValue(value) {
return $input.val(value);
}
};
}
}, {
key: 'submitEditing',
value: function submitEditing($cell) {
var _this3 = this;
var _getCellAttr3 = this.getCellAttr($cell),
rowIndex = _getCellAttr3.rowIndex,
colIndex = _getCellAttr3.colIndex;
if ($cell) {
var editing = this.currentCellEditing;
if (editing) {
var value = editing.getValue();
var done = editing.setValue(value);
if (done && done.then) {
// wait for promise then update internal state
done.then(function () {
return _this3.updateCell(rowIndex, colIndex, value);
});
} else {
this.updateCell(rowIndex, colIndex, value);
}
}
}
this.currentCellEditing = null;
}
}, {
key: 'bindResizeColumn',
@ -619,7 +659,7 @@ var ReGrid = function () {
}, {
key: 'setColumnWidths',
value: function setColumnWidths() {
var _this3 = this;
var _this4 = this;
var availableWidth = this.wrapper.width();
var headerWidth = this.header.width();
@ -632,15 +672,15 @@ var ReGrid = function () {
var deltaWidth = (availableWidth - headerWidth) / this.data.columns.length;
this.data.columns.map(function (col) {
var width = _this3.getColumnHeaderElement(col.colIndex).width();
var width = _this4.getColumnHeaderElement(col.colIndex).width();
var finalWidth = width + deltaWidth - 16;
if (_this3.addSerialNoColumn && col.colIndex === 0) {
if (_this4.addSerialNoColumn && col.colIndex === 0) {
return;
}
_this3.setColumnHeaderWidth(col.colIndex, finalWidth);
_this3.setColumnWidth(col.colIndex, finalWidth);
_this4.setColumnHeaderWidth(col.colIndex, finalWidth);
_this4.setColumnWidth(col.colIndex, finalWidth);
});
this.setBodyWidth();
}
@ -923,15 +963,13 @@ exports.default = {
module.exports = exports['default'];
/***/ }),
/* 3 */,
/* 4 */,
/* 5 */
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
// style-loader: Adds some css to the DOM by adding a <style> tag
// load the styles
var content = __webpack_require__(6);
var content = __webpack_require__(4);
if(typeof content === 'string') content = [[module.i, content, '']];
// Prepare cssTransformation
var transform;
@ -939,7 +977,7 @@ var transform;
var options = {}
options.transform = transform
// add the styles to the DOM
var update = __webpack_require__(8)(content, options);
var update = __webpack_require__(6)(content, options);
if(content.locals) module.exports = content.locals;
// Hot Module Replacement
if(false) {
@ -956,10 +994,10 @@ if(false) {
}
/***/ }),
/* 6 */
/* 4 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(7)(undefined);
exports = module.exports = __webpack_require__(5)(undefined);
// imports
@ -970,7 +1008,7 @@ exports.push([module.i, ".table {\n width: 100%;\n max-width: 100%;\n margin-
/***/ }),
/* 7 */
/* 5 */
/***/ (function(module, exports) {
/*
@ -1052,7 +1090,7 @@ function toComment(sourceMap) {
/***/ }),
/* 8 */
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
/*
@ -1098,7 +1136,7 @@ var singleton = null;
var singletonCounter = 0;
var stylesInsertedAtTop = [];
var fixUrls = __webpack_require__(9);
var fixUrls = __webpack_require__(7);
module.exports = function(list, options) {
if (typeof DEBUG !== "undefined" && DEBUG) {
@ -1411,7 +1449,7 @@ function updateLink (link, options, obj) {
/***/ }),
/* 9 */
/* 7 */
/***/ (function(module, exports) {

2
lib/ReGrid.js.map
View File

File diff suppressed because one or more lines are too long

93
src/regrid.js
View File

@ -33,7 +33,7 @@ export default class ReGrid {
this.addSerialNoColumn = getDefault(addSerialNoColumn, false);
this.enableClusterize = getDefault(enableClusterize, false);
this.enableLogs = getDefault(enableLogs, true);
this.editing = getDefault(editing, {});
this.editing = getDefault(editing, null);
if (data) {
this.refresh(data);
@ -168,10 +168,9 @@ export default class ReGrid {
}
updateCell(rowIndex, colIndex, value) {
const row = this.getRow(rowIndex);
const cell = row.find(cell => cell.col_index === colIndex);
const cell = this.getCell(rowIndex, colIndex);
cell.data = value;
cell.content = value;
this.refreshCell(cell);
}
@ -181,8 +180,8 @@ export default class ReGrid {
}
refreshCell(cell) {
const selector = `.data-table-col[data-row-index="${cell.row_index}"][data-col-index="${cell.col_index}"]`;
const $cell = this.body.find(selector);
const selector = `.data-table-col[data-row-index="${cell.rowIndex}"][data-col-index="${cell.colIndex}"]`;
const $cell = this.bodyScrollable.find(selector);
const $newCell = $(getColumnHTML(cell));
$cell.replaceWith($newCell);
@ -289,22 +288,32 @@ export default class ReGrid {
const self = this;
this.$editingCell = null;
// if (!self.events.onCellEdit) return;
this.bodyScrollable.on('dblclick', '.data-table-col', function () {
self.activateEditing($(this));
});
$(document.body).on('keypress', (e) => {
// enter keypress on focused cell
if (e.which === 13 && this.$focusedCell) {
self.activateEditing(this.$focusedCell);
if (e.which === 13 && this.$focusedCell && !this.$editingCell) {
this.log('editingCell');
this.activateEditing(this.$focusedCell);
e.stopImmediatePropagation();
}
});
$(document.body).on('keypress', (e) => {
// enter keypress on editing cell
if (e.which === 13 && this.$editingCell) {
this.log('submitCell');
this.submitEditing(this.$editingCell);
e.stopImmediatePropagation();
}
});
$(document.body).on('click', e => {
if ($(e.target).is('.edit-cell, .edit-cell *')) return;
self.bodyScrollable.find('.edit-cell').hide();
this.$editingCell = null;
});
}
@ -323,33 +332,61 @@ export default class ReGrid {
this.$editingCell = $cell;
const $editCell = $cell.find('.edit-cell').empty();
const cell = this.getCell(rowIndex, colIndex);
const editing = this.getEditingObject(colIndex, rowIndex, cell.content, $editCell);
const render = this.renderEditingInput(colIndex, cell.content, $editCell);
if (render) {
if (editing) {
this.currentCellEditing = editing;
// initialize editing input with cell value
editing.initValue(cell.content);
$editCell.show();
}
// showing the popup is the responsibility of event handler
// self.events.onCellEdit(
// $cell.get(0),
// $editPopup,
// rowIndex,
// colIndex
// );
}
renderEditingInput(colIndex, value, parent) {
if (this.editing.renderInput) {
return this.editing.renderInput(colIndex, value, parent);
getEditingObject(colIndex, rowIndex, value, parent) {
if (this.editing) {
return this.editing(colIndex, rowIndex, value, parent);
}
// render fallback
// editing fallback
const $input = $('<input type="text" />');
parent.append($input);
$input.val(value);
$input.select();
return true;
return {
initValue(value) {
return $input.val(value);
},
getValue() {
return $input.val();
},
setValue(value) {
return $input.val(value);
}
};
}
submitEditing($cell) {
const { rowIndex, colIndex } = this.getCellAttr($cell);
if ($cell) {
const editing = this.currentCellEditing;
if (editing) {
const value = editing.getValue();
const done = editing.setValue(value);
if (done && done.then) {
// wait for promise then update internal state
done.then(
() => this.updateCell(rowIndex, colIndex, value)
);
} else {
this.updateCell(rowIndex, colIndex, value);
}
}
}
this.currentCellEditing = null;
}
bindResizeColumn() {