/************************************************************************ * 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 = $('
') .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 = $('').html(self.options.messages.editRecord); var $button = $('') .addClass('jtable-command-button jtable-edit-command-button') .append($span) .click(function (e) { e.preventDefault(); e.stopPropagation(); self._showEditForm($row); }); $('