mirror of
https://github.com/tuxis-ie/nsedit.git
synced 2025-04-19 20:09:14 +03:00
452 lines
19 KiB
JavaScript
452 lines
19 KiB
JavaScript
/************************************************************************
|
|
* EDIT RECORD extension for jTable *
|
|
*************************************************************************/
|
|
(function ($) {
|
|
|
|
//Reference to base object members
|
|
var base = {
|
|
_create: $.hik.jtable.prototype._create,
|
|
_addColumnsToHeaderRow: $.hik.jtable.prototype._addColumnsToHeaderRow,
|
|
_addCellsToRowUsingRecord: $.hik.jtable.prototype._addCellsToRowUsingRecord
|
|
};
|
|
|
|
//extension members
|
|
$.extend(true, $.hik.jtable.prototype, {
|
|
|
|
/************************************************************************
|
|
* DEFAULT OPTIONS / EVENTS *
|
|
*************************************************************************/
|
|
options: {
|
|
|
|
//Events
|
|
recordUpdated: function (event, data) { },
|
|
rowUpdated: function (event, data) { },
|
|
|
|
//Localization
|
|
messages: {
|
|
editRecord: 'Edit Record'
|
|
}
|
|
},
|
|
|
|
/************************************************************************
|
|
* PRIVATE FIELDS *
|
|
*************************************************************************/
|
|
|
|
_$editDiv: null, //Reference to the editing dialog div (jQuery object)
|
|
_$editingRow: null, //Reference to currently editing row (jQuery object)
|
|
|
|
/************************************************************************
|
|
* CONSTRUCTOR AND INITIALIZATION METHODS *
|
|
*************************************************************************/
|
|
|
|
/* Overrides base method to do editing-specific constructions.
|
|
*************************************************************************/
|
|
_create: function () {
|
|
base._create.apply(this, arguments);
|
|
|
|
if (!this.options.actions.updateAction) {
|
|
return;
|
|
}
|
|
|
|
this._createEditDialogDiv();
|
|
},
|
|
|
|
/* Creates and prepares edit dialog div
|
|
*************************************************************************/
|
|
_createEditDialogDiv: function () {
|
|
var self = this;
|
|
|
|
//Create a div for dialog and add to container element
|
|
self._$editDiv = $('<div></div>')
|
|
.appendTo(self._$mainContainer);
|
|
|
|
//Prepare dialog
|
|
self._$editDiv.dialog({
|
|
autoOpen: false,
|
|
show: self.options.dialogShowEffect,
|
|
hide: self.options.dialogHideEffect,
|
|
width: 'auto',
|
|
minWidth: '300',
|
|
modal: true,
|
|
title: self.options.messages.editRecord,
|
|
buttons:
|
|
[{ //cancel button
|
|
text: self.options.messages.cancel,
|
|
click: function () {
|
|
self._$editDiv.dialog('close');
|
|
}
|
|
}, { //save button
|
|
id: 'EditDialogSaveButton',
|
|
text: self.options.messages.save,
|
|
click: function () {
|
|
self._onSaveClickedOnEditForm();
|
|
}
|
|
}],
|
|
close: function () {
|
|
var $editForm = self._$editDiv.find('form:first');
|
|
var $saveButton = self._$editDiv.parent().find('#EditDialogSaveButton');
|
|
self._trigger("formClosed", null, { form: $editForm, formType: 'edit', row: self._$editingRow });
|
|
self._setEnabledOfDialogButton($saveButton, true, self.options.messages.save);
|
|
$editForm.remove();
|
|
}
|
|
});
|
|
},
|
|
|
|
/* Saves editing form to server.
|
|
*************************************************************************/
|
|
_onSaveClickedOnEditForm: function () {
|
|
var self = this;
|
|
|
|
//row maybe removed by another source, if so, do nothing
|
|
if (self._$editingRow.hasClass('jtable-row-removed')) {
|
|
self._$editDiv.dialog('close');
|
|
return;
|
|
}
|
|
|
|
var $saveButton = self._$editDiv.parent().find('#EditDialogSaveButton');
|
|
var $editForm = self._$editDiv.find('form');
|
|
if (self._trigger("formSubmitting", null, { form: $editForm, formType: 'edit', row: self._$editingRow }) != false) {
|
|
self._setEnabledOfDialogButton($saveButton, false, self.options.messages.saving);
|
|
self._saveEditForm($editForm, $saveButton);
|
|
}
|
|
},
|
|
|
|
/************************************************************************
|
|
* PUBLIC METHODS *
|
|
*************************************************************************/
|
|
|
|
/* Updates a record on the table (optionally on the server also)
|
|
*************************************************************************/
|
|
updateRecord: function (options) {
|
|
var self = this;
|
|
options = $.extend({
|
|
clientOnly: false,
|
|
animationsEnabled: self.options.animationsEnabled,
|
|
success: function () { },
|
|
error: function () { }
|
|
}, options);
|
|
|
|
if (!options.record) {
|
|
self._logWarn('options parameter in updateRecord method must contain a record property.');
|
|
return;
|
|
}
|
|
|
|
var key = self._getKeyValueOfRecord(options.record);
|
|
if (key == undefined || key == null) {
|
|
self._logWarn('options parameter in updateRecord method must contain a record that contains the key field property.');
|
|
return;
|
|
}
|
|
|
|
var $updatingRow = self.getRowByKey(key);
|
|
if ($updatingRow == null) {
|
|
self._logWarn('Can not found any row by key "' + key + '" on the table. Updating row must be visible on the table.');
|
|
return;
|
|
}
|
|
|
|
if (options.clientOnly) {
|
|
$.extend($updatingRow.data('record'), options.record);
|
|
self._updateRowTexts($updatingRow);
|
|
self._onRecordUpdated($updatingRow, null);
|
|
if (options.animationsEnabled) {
|
|
self._showUpdateAnimationForRow($updatingRow);
|
|
}
|
|
|
|
options.success();
|
|
return;
|
|
}
|
|
|
|
var completeEdit = function (data) {
|
|
if (data.Result != 'OK') {
|
|
self._showError(data.Message);
|
|
options.error(data);
|
|
return;
|
|
}
|
|
|
|
$.extend($updatingRow.data('record'), options.record);
|
|
self._updateRecordValuesFromServerResponse($updatingRow.data('record'), data);
|
|
|
|
self._updateRowTexts($updatingRow);
|
|
self._onRecordUpdated($updatingRow, data);
|
|
if (options.animationsEnabled) {
|
|
self._showUpdateAnimationForRow($updatingRow);
|
|
}
|
|
|
|
options.success(data);
|
|
};
|
|
|
|
//updateAction may be a function, check if it is
|
|
if (!options.url && $.isFunction(self.options.actions.updateAction)) {
|
|
|
|
//Execute the function
|
|
var funcResult = self.options.actions.updateAction($.param(options.record));
|
|
|
|
//Check if result is a jQuery Deferred object
|
|
if (self._isDeferredObject(funcResult)) {
|
|
//Wait promise
|
|
funcResult.done(function (data) {
|
|
completeEdit(data);
|
|
}).fail(function () {
|
|
self._showError(self.options.messages.serverCommunicationError);
|
|
options.error();
|
|
});
|
|
} else { //assume it returned the creation result
|
|
completeEdit(funcResult);
|
|
}
|
|
|
|
} else { //Assume it's a URL string
|
|
|
|
//Make an Ajax call to create record
|
|
self._submitFormUsingAjax(
|
|
options.url || self.options.actions.updateAction,
|
|
$.param(options.record),
|
|
function (data) {
|
|
completeEdit(data);
|
|
},
|
|
function () {
|
|
self._showError(self.options.messages.serverCommunicationError);
|
|
options.error();
|
|
});
|
|
|
|
}
|
|
},
|
|
|
|
/************************************************************************
|
|
* OVERRIDED METHODS *
|
|
*************************************************************************/
|
|
|
|
/* Overrides base method to add a 'editing column cell' to header row.
|
|
*************************************************************************/
|
|
_addColumnsToHeaderRow: function ($tr) {
|
|
base._addColumnsToHeaderRow.apply(this, arguments);
|
|
if (this.options.actions.updateAction != undefined) {
|
|
$tr.append(this._createEmptyCommandHeader());
|
|
}
|
|
},
|
|
|
|
/* Overrides base method to add a 'edit command cell' to a row.
|
|
*************************************************************************/
|
|
_addCellsToRowUsingRecord: function ($row) {
|
|
var self = this;
|
|
base._addCellsToRowUsingRecord.apply(this, arguments);
|
|
|
|
if (self.options.actions.updateAction != undefined) {
|
|
var $span = $('<span></span>').html(self.options.messages.editRecord);
|
|
var $button = $('<button title="' + self.options.messages.editRecord + '"></button>')
|
|
.addClass('jtable-command-button jtable-edit-command-button')
|
|
.append($span)
|
|
.click(function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
self._showEditForm($row);
|
|
});
|
|
$('<td></td>')
|
|
.addClass('jtable-command-column')
|
|
.append($button)
|
|
.appendTo($row);
|
|
}
|
|
},
|
|
|
|
/************************************************************************
|
|
* PRIVATE METHODS *
|
|
*************************************************************************/
|
|
|
|
/* Shows edit form for a row.
|
|
*************************************************************************/
|
|
_showEditForm: function ($tableRow) {
|
|
var self = this;
|
|
var record = $tableRow.data('record');
|
|
|
|
//Create edit form
|
|
var $editForm = $('<form id="jtable-edit-form" class="jtable-dialog-form jtable-edit-form"></form>');
|
|
|
|
//Create input fields
|
|
for (var i = 0; i < self._fieldList.length; i++) {
|
|
|
|
var fieldName = self._fieldList[i];
|
|
var field = self.options.fields[fieldName];
|
|
var fieldValue = record[fieldName];
|
|
|
|
if (field.key == true) {
|
|
if (field.edit != true) {
|
|
//Create hidden field for key
|
|
$editForm.append(self._createInputForHidden(fieldName, fieldValue));
|
|
continue;
|
|
} else {
|
|
//Create a special hidden field for key (since key is be editable)
|
|
$editForm.append(self._createInputForHidden('jtRecordKey', fieldValue));
|
|
}
|
|
}
|
|
|
|
//Do not create element for non-editable fields
|
|
if (field.edit == false) {
|
|
continue;
|
|
}
|
|
|
|
//Hidden field
|
|
if (field.type == 'hidden') {
|
|
$editForm.append(self._createInputForHidden(fieldName, fieldValue));
|
|
continue;
|
|
}
|
|
|
|
//Create a container div for this input field and add to form
|
|
var $fieldContainer = $('<div class="jtable-input-field-container"></div>').appendTo($editForm);
|
|
|
|
//Create a label for input
|
|
$fieldContainer.append(self._createInputLabelForRecordField(fieldName));
|
|
|
|
//Create input element with it's current value
|
|
var currentValue = self._getValueForRecordField(record, fieldName);
|
|
$fieldContainer.append(
|
|
self._createInputForRecordField({
|
|
fieldName: fieldName,
|
|
value: currentValue,
|
|
record: record,
|
|
formType: 'edit',
|
|
form: $editForm
|
|
}));
|
|
}
|
|
|
|
self._makeCascadeDropDowns($editForm, record, 'edit');
|
|
|
|
$editForm.submit(function () {
|
|
self._onSaveClickedOnEditForm();
|
|
return false;
|
|
});
|
|
|
|
//Open dialog
|
|
self._$editingRow = $tableRow;
|
|
self._$editDiv.append($editForm).dialog('open');
|
|
self._trigger("formCreated", null, { form: $editForm, formType: 'edit', record: record, row: $tableRow });
|
|
},
|
|
|
|
/* Saves editing form to the server and updates the record on the table.
|
|
*************************************************************************/
|
|
_saveEditForm: function ($editForm, $saveButton) {
|
|
var self = this;
|
|
|
|
var completeEdit = function (data) {
|
|
if (data.Result != 'OK') {
|
|
self._showError(data.Message);
|
|
self._setEnabledOfDialogButton($saveButton, true, self.options.messages.save);
|
|
return;
|
|
}
|
|
|
|
var record = self._$editingRow.data('record');
|
|
|
|
self._updateRecordValuesFromForm(record, $editForm);
|
|
self._updateRecordValuesFromServerResponse(record, data);
|
|
self._updateRowTexts(self._$editingRow);
|
|
|
|
self._$editingRow.attr('data-record-key', self._getKeyValueOfRecord(record));
|
|
|
|
self._onRecordUpdated(self._$editingRow, data);
|
|
|
|
if (self.options.animationsEnabled) {
|
|
self._showUpdateAnimationForRow(self._$editingRow);
|
|
}
|
|
|
|
self._$editDiv.dialog("close");
|
|
};
|
|
|
|
|
|
//updateAction may be a function, check if it is
|
|
if ($.isFunction(self.options.actions.updateAction)) {
|
|
|
|
//Execute the function
|
|
var funcResult = self.options.actions.updateAction($editForm.serialize());
|
|
|
|
//Check if result is a jQuery Deferred object
|
|
if (self._isDeferredObject(funcResult)) {
|
|
//Wait promise
|
|
funcResult.done(function (data) {
|
|
completeEdit(data);
|
|
}).fail(function () {
|
|
self._showError(self.options.messages.serverCommunicationError);
|
|
self._setEnabledOfDialogButton($saveButton, true, self.options.messages.save);
|
|
});
|
|
} else { //assume it returned the creation result
|
|
completeEdit(funcResult);
|
|
}
|
|
|
|
} else { //Assume it's a URL string
|
|
|
|
//Make an Ajax call to update record
|
|
self._submitFormUsingAjax(
|
|
self.options.actions.updateAction,
|
|
$editForm.serialize(),
|
|
function(data) {
|
|
completeEdit(data);
|
|
},
|
|
function() {
|
|
self._showError(self.options.messages.serverCommunicationError);
|
|
self._setEnabledOfDialogButton($saveButton, true, self.options.messages.save);
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
/* This method ensures updating of current record with server response,
|
|
* if server sends a Record object as response to updateAction.
|
|
*************************************************************************/
|
|
_updateRecordValuesFromServerResponse: function (record, serverResponse) {
|
|
if (!serverResponse || !serverResponse.Record) {
|
|
return;
|
|
}
|
|
|
|
$.extend(true, record, serverResponse.Record);
|
|
},
|
|
|
|
/* Gets text for a field of a record according to it's type.
|
|
*************************************************************************/
|
|
_getValueForRecordField: function (record, fieldName) {
|
|
var field = this.options.fields[fieldName];
|
|
var fieldValue = record[fieldName];
|
|
if (field.type == 'date') {
|
|
return this._getDisplayTextForDateRecordField(field, fieldValue);
|
|
} else {
|
|
return fieldValue;
|
|
}
|
|
},
|
|
|
|
/* Updates cells of a table row's text values from row's record values.
|
|
*************************************************************************/
|
|
_updateRowTexts: function ($tableRow) {
|
|
var record = $tableRow.data('record');
|
|
var $columns = $tableRow.find('td');
|
|
for (var i = 0; i < this._columnList.length; i++) {
|
|
var displayItem = this._getDisplayTextForRecordField(record, this._columnList[i]);
|
|
if ((displayItem === 0)) displayItem = "0";
|
|
$columns.eq(this._firstDataColumnOffset + i).html(displayItem || '');
|
|
}
|
|
|
|
this._onRowUpdated($tableRow);
|
|
},
|
|
|
|
/* Shows 'updated' animation for a table row.
|
|
*************************************************************************/
|
|
_showUpdateAnimationForRow: function ($tableRow) {
|
|
var className = 'jtable-row-updated';
|
|
if (this.options.jqueryuiTheme) {
|
|
className = className + ' ui-state-highlight';
|
|
}
|
|
|
|
$tableRow.stop(true, true).addClass(className, 'slow', '', function () {
|
|
$tableRow.removeClass(className, 5000);
|
|
});
|
|
},
|
|
|
|
/************************************************************************
|
|
* EVENT RAISING METHODS *
|
|
*************************************************************************/
|
|
|
|
_onRowUpdated: function ($row) {
|
|
this._trigger("rowUpdated", null, { row: $row, record: $row.data('record') });
|
|
},
|
|
|
|
_onRecordUpdated: function ($row, data) {
|
|
this._trigger("recordUpdated", null, { record: $row.data('record'), row: $row, serverResponse: data });
|
|
}
|
|
|
|
});
|
|
|
|
})(jQuery);
|