diff options
Diffstat (limited to 'dev')
| -rw-r--r-- | dev/jquery.jtable.core.js | 92 | ||||
| -rw-r--r-- | dev/jquery.jtable.deletion.js | 793 | ||||
| -rw-r--r-- | dev/jquery.jtable.editing.js | 751 | ||||
| -rw-r--r-- | dev/jquery.jtable.forms.js | 2 | ||||
| -rw-r--r-- | dev/jquery.jtable.header.txt | 2 | ||||
| -rw-r--r-- | dev/jquery.jtable.masterchild.js | 335 | ||||
| -rw-r--r-- | dev/jquery.jtable.paging.js | 18 | ||||
| -rw-r--r-- | dev/jquery.jtable.selecting.js | 5 |
8 files changed, 1039 insertions, 959 deletions
diff --git a/dev/jquery.jtable.core.js b/dev/jquery.jtable.core.js index 5a94b6b..6c24448 100644 --- a/dev/jquery.jtable.core.js +++ b/dev/jquery.jtable.core.js @@ -20,6 +20,7 @@ showCloseButton: false, loadingAnimationDelay: 500, saveUserPreferences: true, + jqueryuiTheme: false, ajaxSettings: { type: 'POST', @@ -105,7 +106,7 @@ this._createBusyPanel(); this._createErrorDialogDiv(); this._addNoDataRow(); - + this._cookieKeyPrefix = this._generateCookieKeyPrefix(); }, @@ -176,6 +177,8 @@ this._$mainContainer = $('<div />') .addClass('jtable-main-container') .appendTo(this.element); + + this._jqueryuiThemeAddClass(this._$mainContainer, 'ui-widget'); }, /* Creates title of the table if a title supplied in options. @@ -191,6 +194,8 @@ .addClass('jtable-title') .appendTo(self._$mainContainer); + self._jqueryuiThemeAddClass($titleDiv, 'ui-widget-header'); + $('<div />') .addClass('jtable-title-text') .appendTo($titleDiv) @@ -223,6 +228,12 @@ .addClass('jtable') .appendTo(this._$mainContainer); + if (this.options.tableId) { + this._$table.attr('id', this.options.tableId); + } + + this._jqueryuiThemeAddClass(this._$table, 'ui-widget-content'); + this._createTableHead(); this._createTableBody(); }, @@ -271,19 +282,26 @@ var $th = $('<th></th>') .addClass('jtable-column-header') + .addClass(field.listClass) .css('width', field.width) .data('fieldName', fieldName) .append($headerContainerDiv); + this._jqueryuiThemeAddClass($th, 'ui-state-default'); + return $th; }, /* Creates an empty header cell that can be used as command column headers. *************************************************************************/ _createEmptyCommandHeader: function () { - return $('<th></th>') + var $th = $('<th></th>') .addClass('jtable-command-column-header') .css('width', '1%'); + + this._jqueryuiThemeAddClass($th, 'ui-state-default'); + + return $th; }, /* Creates tbody tag and adds to the table. @@ -297,6 +315,7 @@ _createBusyPanel: function () { this._$busyMessageDiv = $('<div />').addClass('jtable-busy-message').prependTo(this._$mainContainer); this._$busyDiv = $('<div />').addClass('jtable-busy-panel-background').prependTo(this._$mainContainer); + this._jqueryuiThemeAddClass(this._$busyMessageDiv, 'ui-widget-header'); this._hideBusy(); }, @@ -528,8 +547,13 @@ * TODO: Make this animation cofigurable and changable *************************************************************************/ _showNewRowAnimation: function ($tableRow) { - $tableRow.addClass('jtable-row-created', 'slow', '', function () { - $tableRow.removeClass('jtable-row-created', 5000); + var className = 'jtable-row-created'; + if (this.options.jqueryuiTheme) { + className = className + ' ui-state-highlight'; + } + + $tableRow.addClass(className, 'slow', '', function () { + $tableRow.removeClass(className, 5000); }); }, @@ -916,6 +940,8 @@ .addClass('jtable-toolbar-item') .appendTo(this._$toolbarDiv); + this._jqueryuiThemeAddClass($toolBarItem, 'ui-widget ui-state-default ui-corner-all', 'ui-state-hover'); + //cssClass property if (item.cssClass) { $toolBarItem @@ -959,7 +985,7 @@ hoverAnimationDuration = this.options.toolbar.hoverAnimationDuration; hoverAnimationEasing = this.options.toolbar.hoverAnimationEasing; } - + //change class on hover $toolBarItem.hover(function () { $toolBarItem.addClass('jtable-toolbar-item-hover', hoverAnimationDuration, hoverAnimationEasing); @@ -983,27 +1009,30 @@ /* Shows busy indicator and blocks table UI. * TODO: Make this cofigurable and changable *************************************************************************/ - _setBusyTimer: null, //TODO: Think for a better way! + _setBusyTimer: null, _showBusy: function (message, delay) { - var self = this; - - var show = function () { - if (!self._$busyMessageDiv.is(':visible')) { - self._$busyDiv.width(self._$mainContainer.width()); - self._$busyDiv.height(self._$mainContainer.height()); - self._$busyDiv.show(); - self._$busyMessageDiv.show(); - } - - self._$busyMessageDiv.html(message); + var self = this; // + + //Show a transparent overlay to prevent clicking to the table + self._$busyDiv + .width(self._$mainContainer.width()) + .height(self._$mainContainer.height()) + .addClass('jtable-busy-panel-background-invisible') + .show(); + + var makeVisible = function () { + self._$busyDiv.removeClass('jtable-busy-panel-background-invisible'); + self._$busyMessageDiv.html(message).show(); }; - //TODO: Put an overlay always (without color) to not allow to click the table - //TODO: and change it visible when timeout occurs. if (delay) { - self._setBusyTimer = setTimeout(show, delay); + if (self._setBusyTimer) { + return; + } + + self._setBusyTimer = setTimeout(makeVisible, delay); } else { - show(); + makeVisible(); } }, @@ -1011,6 +1040,7 @@ *************************************************************************/ _hideBusy: function () { clearTimeout(this._setBusyTimer); + this._setBusyTimer = null; this._$busyDiv.hide(); this._$busyMessageDiv.html('').hide(); }, @@ -1021,6 +1051,24 @@ return this._$busyMessageDiv.is(':visible'); }, + /* Adds jQueryUI class to an item. + *************************************************************************/ + _jqueryuiThemeAddClass: function ($elm, className, hoverClassName) { + if (!this.options.jqueryuiTheme) { + return; + } + + $elm.addClass(className); + + if (hoverClassName) { + $elm.hover(function () { + $elm.addClass(hoverClassName); + }, function () { + $elm.removeClass(hoverClassName); + }); + } + }, + /* COMMON METHODS *******************************************************/ /* Performs an AJAX call to specified URL. @@ -1072,7 +1120,7 @@ _getKeyValueOfRecord: function (record) { return record[this._keyField]; }, - + /************************************************************************ * COOKIE * *************************************************************************/ diff --git a/dev/jquery.jtable.deletion.js b/dev/jquery.jtable.deletion.js index 5ebbeac..827aadb 100644 --- a/dev/jquery.jtable.deletion.js +++ b/dev/jquery.jtable.deletion.js @@ -1,394 +1,399 @@ -/************************************************************************
-* DELETION 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: {
-
- //Options
- deleteConfirmation: true,
-
- //Events
- recordDeleted: function (event, data) { },
-
- //Localization
- messages: {
- deleteConfirmation: 'This record will be deleted. Are you sure?',
- deleteText: 'Delete',
- deleting: 'Deleting',
- canNotDeletedRecords: 'Can not delete {0} of {1} records!',
- deleteProggress: 'Deleting {0} of {1} records, processing...'
- }
- },
-
- /************************************************************************
- * PRIVATE FIELDS *
- *************************************************************************/
-
- _$deleteRecordDiv: null, //Reference to the adding new record dialog div (jQuery object)
- _$deletingRow: null, //Reference to currently deleting row (jQuery object)
-
- /************************************************************************
- * CONSTRUCTOR *
- *************************************************************************/
-
- /* Overrides base method to do deletion-specific constructions.
- *************************************************************************/
- _create: function () {
- base._create.apply(this, arguments);
- this._createDeleteDialogDiv();
- },
-
- /* Creates and prepares delete record confirmation dialog div.
- *************************************************************************/
- _createDeleteDialogDiv: function () {
- var self = this;
-
- //Create div element for delete confirmation dialog
- self._$deleteRecordDiv = $('<div><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><span class="jtable-delete-confirm-message"></span></p></div>').appendTo(self._$mainContainer);
-
- //Prepare dialog
- self._$deleteRecordDiv.dialog({
- autoOpen: false,
- show: self.options.dialogShowEffect,
- hide: self.options.dialogHideEffect,
- modal: true,
- title: self.options.messages.areYouSure,
- buttons:
- [{ //cancel button
- text: self.options.messages.cancel,
- click: function () {
- self._$deleteRecordDiv.dialog("close");
- }
- }, {//delete button
- id: 'DeleteDialogButton',
- text: self.options.messages.deleteText,
- click: function () {
-
- //row maybe removed by another source, if so, do nothing
- if (self._$deletingRow.hasClass('jtable-row-removed')) {
- self._$deleteRecordDiv.dialog('close');
- return;
- }
-
- var $deleteButton = $('#DeleteDialogButton');
- self._setEnabledOfDialogButton($deleteButton, false, self.options.messages.deleting);
- self._deleteRecordFromServer(
- self._$deletingRow,
- function () {
- self._removeRowsFromTableWithAnimation(self._$deletingRow);
- self._$deleteRecordDiv.dialog('close');
- },
- function (message) { //error
- self._showError(message);
- self._setEnabledOfDialogButton($deleteButton, true, self.options.messages.deleteText);
- }
- );
- }
- }],
- close: function () {
- var $deleteButton = $('#DeleteDialogButton');
- self._setEnabledOfDialogButton($deleteButton, true, self.options.messages.deleteText);
- }
- });
- },
-
- /************************************************************************
- * PUBLIC METHODS *
- *************************************************************************/
-
- /* This method is used to delete one or more rows from server and the table.
- *************************************************************************/
- deleteRows: function ($rows) {
- var self = this;
-
- if ($rows.length <= 0) {
- self._logWarn('No rows specified to jTable deleteRows method.');
- return;
- }
-
- if (self._isBusy()) {
- self._logWarn('Can not delete rows since jTable is busy!');
- return;
- }
-
- //Deleting just one row
- if ($rows.length == 1) {
- self._deleteRecordFromServer(
- $rows,
- function () { //success
- self._removeRowsFromTableWithAnimation($rows);
- },
- function (message) { //error
- self._showError(message);
- }
- );
-
- return;
- }
-
- //Deleting multiple rows
- self._showBusy(self._formatString(self.options.messages.deleteProggress, 0, $rows.length));
-
- //This method checks if deleting of all records is completed
- var completedCount = 0;
- var isCompleted = function () {
- return (completedCount >= $rows.length);
- };
-
- //This method is called when deleting of all records completed
- var completed = function () {
- var $deletedRows = $rows.filter('.jtable-row-ready-to-remove');
- if ($deletedRows.length < $rows.length) {
- self._showError(self._formatString(self.options.messages.canNotDeletedRecords, $rows.length - $deletedRows.length, $rows.length));
- }
-
- if ($deletedRows.length > 0) {
- self._removeRowsFromTableWithAnimation($deletedRows);
- }
-
- self._hideBusy();
- };
-
- //Delete all rows
- var deletedCount = 0;
- $rows.each(function () {
- var $row = $(this);
- self._deleteRecordFromServer(
- $row,
- function () { //success
- ++deletedCount; ++completedCount;
- $row.addClass('jtable-row-ready-to-remove');
- self._showBusy(self._formatString(self.options.messages.deleteProggress, deletedCount, $rows.length));
- if (isCompleted()) {
- completed();
- }
- },
- function () { //error
- ++completedCount;
- if (isCompleted()) {
- completed();
- }
- }
- );
- });
- },
-
- /* Deletes a record from the table (optionally from the server also).
- *************************************************************************/
- deleteRecord: function (options) {
- var self = this;
- options = $.extend({
- clientOnly: false,
- animationsEnabled: self.options.animationsEnabled,
- url: self.options.actions.deleteAction,
- success: function () { },
- error: function () { }
- }, options);
-
- if (options.key == undefined) {
- self._logWarn('options parameter in deleteRecord method must contain a key property.');
- return;
- }
-
- var $deletingRow = self.getRowByKey(options.key);
- if ($deletingRow == null) {
- self._logWarn('Can not found any row by key: ' + options.key);
- return;
- }
-
- if (options.clientOnly) {
- self._removeRowsFromTableWithAnimation($deletingRow, options.animationsEnabled);
- options.success();
- return;
- }
-
- self._deleteRecordFromServer(
- $deletingRow,
- function (data) { //success
- self._removeRowsFromTableWithAnimation($deletingRow, options.animationsEnabled);
- options.success(data);
- },
- function (message) { //error
- self._showError(message);
- options.error(message);
- },
- options.url
- );
- },
-
- /************************************************************************
- * OVERRIDED METHODS *
- *************************************************************************/
-
- /* Overrides base method to add a 'deletion column cell' to header row.
- *************************************************************************/
- _addColumnsToHeaderRow: function ($tr) {
- base._addColumnsToHeaderRow.apply(this, arguments);
- if (this.options.actions.deleteAction != undefined) {
- $tr.append(this._createEmptyCommandHeader());
- }
- },
-
- /* Overrides base method to add a 'delete command cell' to a row.
- *************************************************************************/
- _addCellsToRowUsingRecord: function ($row) {
- base._addCellsToRowUsingRecord.apply(this, arguments);
-
- var self = this;
- if (self.options.actions.deleteAction != undefined) {
- var $span = $('<span></span>').html(self.options.messages.deleteText);
- var $button = $('<button title="' + self.options.messages.deleteText + '"></button>')
- .addClass('jtable-command-button jtable-delete-command-button')
- .append($span)
- .click(function (e) {
- e.preventDefault();
- e.stopPropagation();
- self._deleteButtonClickedForRow($row);
- });
- $('<td></td>')
- .addClass('jtable-command-column')
- .append($button)
- .appendTo($row);
- }
- },
-
- /************************************************************************
- * PRIVATE METHODS *
- *************************************************************************/
-
- /* This method is called when user clicks delete button on a row.
- *************************************************************************/
- _deleteButtonClickedForRow: function ($row) {
- var self = this;
-
- var deleteConfirm;
- var deleteConfirmMessage = self.options.messages.deleteConfirmation;
-
- //If options.deleteConfirmation is function then call it
- if ($.isFunction(self.options.deleteConfirmation)) {
- var data = { row: $row, record: $row.data('record'), deleteConfirm: true, deleteConfirmMessage: deleteConfirmMessage, cancel: false, cancelMessage: null };
- self.options.deleteConfirmation(data);
-
- //If delete progress is cancelled
- if (data.cancel) {
-
- //If a canlellation reason is specified
- if (data.cancelMessage) {
- self._showError(data.cancelMessage); //TODO: show warning/stop message instead of error (also show warning/error ui icon)!
- }
-
- return;
- }
-
- deleteConfirmMessage = data.deleteConfirmMessage;
- deleteConfirm = data.deleteConfirm;
- } else {
- deleteConfirm = self.options.deleteConfirmation;
- }
-
- if (deleteConfirm != false) {
- //Confirmation
- self._$deleteRecordDiv.find('.jtable-delete-confirm-message').html(deleteConfirmMessage);
- self._showDeleteDialog($row);
- } else {
- //No confirmation
- self._deleteRecordFromServer(
- $row,
- function () { //success
- self._removeRowsFromTableWithAnimation($row);
- },
- function (message) { //error
- self._showError(message);
- }
- );
- }
- },
-
- /* Shows delete comfirmation dialog.
- *************************************************************************/
- _showDeleteDialog: function ($row) {
- this._$deletingRow = $row;
- this._$deleteRecordDiv.dialog('open');
- },
-
- /* Performs an ajax call to server to delete record
- * and removesd row of record from table if ajax call success.
- *************************************************************************/
- _deleteRecordFromServer: function ($row, success, error, url) {
- var self = this;
-
- //Check if it is already being deleted right now
- if ($row.data('deleting') == true) {
- return;
- }
-
- $row.data('deleting', true);
-
- var postData = {};
- postData[self._keyField] = self._getKeyValueOfRecord($row.data('record'));
-
- this._ajax({
- url: (url || self.options.actions.deleteAction),
- data: postData,
- success: function (data) {
-
- if (data.Result != 'OK') {
- $row.data('deleting', false);
- if (error) {
- error(data.Message);
- }
-
- return;
- }
-
- self._trigger("recordDeleted", null, { record: $row.data('record'), row: $row, serverResponse: data });
-
- if (success) {
- success(data);
- }
- },
- error: function () {
- $row.data('deleting', false);
- if (error) {
- error(self.options.messages.serverCommunicationError);
- }
- }
- });
- },
-
- /* Removes a row from table after a 'deleting' animation.
- *************************************************************************/
- _removeRowsFromTableWithAnimation: function ($rows, animationsEnabled) {
- var self = this;
-
- if (animationsEnabled == undefined) {
- animationsEnabled = self.options.animationsEnabled;
- }
-
- if (animationsEnabled) {
- //Stop current animation (if does exists) and begin 'deleting' animation.
- $rows.stop(true, true).addClass('jtable-row-deleting', 'slow', '').promise().done(function () {
- self._removeRowsFromTable($rows, 'deleted');
- });
- } else {
- self._removeRowsFromTable($rows, 'deleted');
- }
- }
-
- });
-
-})(jQuery);
+/************************************************************************ +* DELETION 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: { + + //Options + deleteConfirmation: true, + + //Events + recordDeleted: function (event, data) { }, + + //Localization + messages: { + deleteConfirmation: 'This record will be deleted. Are you sure?', + deleteText: 'Delete', + deleting: 'Deleting', + canNotDeletedRecords: 'Can not delete {0} of {1} records!', + deleteProggress: 'Deleting {0} of {1} records, processing...' + } + }, + + /************************************************************************ + * PRIVATE FIELDS * + *************************************************************************/ + + _$deleteRecordDiv: null, //Reference to the adding new record dialog div (jQuery object) + _$deletingRow: null, //Reference to currently deleting row (jQuery object) + + /************************************************************************ + * CONSTRUCTOR * + *************************************************************************/ + + /* Overrides base method to do deletion-specific constructions. + *************************************************************************/ + _create: function () { + base._create.apply(this, arguments); + this._createDeleteDialogDiv(); + }, + + /* Creates and prepares delete record confirmation dialog div. + *************************************************************************/ + _createDeleteDialogDiv: function () { + var self = this; + + //Create div element for delete confirmation dialog + self._$deleteRecordDiv = $('<div><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><span class="jtable-delete-confirm-message"></span></p></div>').appendTo(self._$mainContainer); + + //Prepare dialog + self._$deleteRecordDiv.dialog({ + autoOpen: false, + show: self.options.dialogShowEffect, + hide: self.options.dialogHideEffect, + modal: true, + title: self.options.messages.areYouSure, + buttons: + [{ //cancel button + text: self.options.messages.cancel, + click: function () { + self._$deleteRecordDiv.dialog("close"); + } + }, {//delete button + id: 'DeleteDialogButton', + text: self.options.messages.deleteText, + click: function () { + + //row maybe removed by another source, if so, do nothing + if (self._$deletingRow.hasClass('jtable-row-removed')) { + self._$deleteRecordDiv.dialog('close'); + return; + } + + var $deleteButton = $('#DeleteDialogButton'); + self._setEnabledOfDialogButton($deleteButton, false, self.options.messages.deleting); + self._deleteRecordFromServer( + self._$deletingRow, + function () { + self._removeRowsFromTableWithAnimation(self._$deletingRow); + self._$deleteRecordDiv.dialog('close'); + }, + function (message) { //error + self._showError(message); + self._setEnabledOfDialogButton($deleteButton, true, self.options.messages.deleteText); + } + ); + } + }], + close: function () { + var $deleteButton = $('#DeleteDialogButton'); + self._setEnabledOfDialogButton($deleteButton, true, self.options.messages.deleteText); + } + }); + }, + + /************************************************************************ + * PUBLIC METHODS * + *************************************************************************/ + + /* This method is used to delete one or more rows from server and the table. + *************************************************************************/ + deleteRows: function ($rows) { + var self = this; + + if ($rows.length <= 0) { + self._logWarn('No rows specified to jTable deleteRows method.'); + return; + } + + if (self._isBusy()) { + self._logWarn('Can not delete rows since jTable is busy!'); + return; + } + + //Deleting just one row + if ($rows.length == 1) { + self._deleteRecordFromServer( + $rows, + function () { //success + self._removeRowsFromTableWithAnimation($rows); + }, + function (message) { //error + self._showError(message); + } + ); + + return; + } + + //Deleting multiple rows + self._showBusy(self._formatString(self.options.messages.deleteProggress, 0, $rows.length)); + + //This method checks if deleting of all records is completed + var completedCount = 0; + var isCompleted = function () { + return (completedCount >= $rows.length); + }; + + //This method is called when deleting of all records completed + var completed = function () { + var $deletedRows = $rows.filter('.jtable-row-ready-to-remove'); + if ($deletedRows.length < $rows.length) { + self._showError(self._formatString(self.options.messages.canNotDeletedRecords, $rows.length - $deletedRows.length, $rows.length)); + } + + if ($deletedRows.length > 0) { + self._removeRowsFromTableWithAnimation($deletedRows); + } + + self._hideBusy(); + }; + + //Delete all rows + var deletedCount = 0; + $rows.each(function () { + var $row = $(this); + self._deleteRecordFromServer( + $row, + function () { //success + ++deletedCount; ++completedCount; + $row.addClass('jtable-row-ready-to-remove'); + self._showBusy(self._formatString(self.options.messages.deleteProggress, deletedCount, $rows.length)); + if (isCompleted()) { + completed(); + } + }, + function () { //error + ++completedCount; + if (isCompleted()) { + completed(); + } + } + ); + }); + }, + + /* Deletes a record from the table (optionally from the server also). + *************************************************************************/ + deleteRecord: function (options) { + var self = this; + options = $.extend({ + clientOnly: false, + animationsEnabled: self.options.animationsEnabled, + url: self.options.actions.deleteAction, + success: function () { }, + error: function () { } + }, options); + + if (options.key == undefined) { + self._logWarn('options parameter in deleteRecord method must contain a key property.'); + return; + } + + var $deletingRow = self.getRowByKey(options.key); + if ($deletingRow == null) { + self._logWarn('Can not found any row by key: ' + options.key); + return; + } + + if (options.clientOnly) { + self._removeRowsFromTableWithAnimation($deletingRow, options.animationsEnabled); + options.success(); + return; + } + + self._deleteRecordFromServer( + $deletingRow, + function (data) { //success + self._removeRowsFromTableWithAnimation($deletingRow, options.animationsEnabled); + options.success(data); + }, + function (message) { //error + self._showError(message); + options.error(message); + }, + options.url + ); + }, + + /************************************************************************ + * OVERRIDED METHODS * + *************************************************************************/ + + /* Overrides base method to add a 'deletion column cell' to header row. + *************************************************************************/ + _addColumnsToHeaderRow: function ($tr) { + base._addColumnsToHeaderRow.apply(this, arguments); + if (this.options.actions.deleteAction != undefined) { + $tr.append(this._createEmptyCommandHeader()); + } + }, + + /* Overrides base method to add a 'delete command cell' to a row. + *************************************************************************/ + _addCellsToRowUsingRecord: function ($row) { + base._addCellsToRowUsingRecord.apply(this, arguments); + + var self = this; + if (self.options.actions.deleteAction != undefined) { + var $span = $('<span></span>').html(self.options.messages.deleteText); + var $button = $('<button title="' + self.options.messages.deleteText + '"></button>') + .addClass('jtable-command-button jtable-delete-command-button') + .append($span) + .click(function (e) { + e.preventDefault(); + e.stopPropagation(); + self._deleteButtonClickedForRow($row); + }); + $('<td></td>') + .addClass('jtable-command-column') + .append($button) + .appendTo($row); + } + }, + + /************************************************************************ + * PRIVATE METHODS * + *************************************************************************/ + + /* This method is called when user clicks delete button on a row. + *************************************************************************/ + _deleteButtonClickedForRow: function ($row) { + var self = this; + + var deleteConfirm; + var deleteConfirmMessage = self.options.messages.deleteConfirmation; + + //If options.deleteConfirmation is function then call it + if ($.isFunction(self.options.deleteConfirmation)) { + var data = { row: $row, record: $row.data('record'), deleteConfirm: true, deleteConfirmMessage: deleteConfirmMessage, cancel: false, cancelMessage: null }; + self.options.deleteConfirmation(data); + + //If delete progress is cancelled + if (data.cancel) { + + //If a canlellation reason is specified + if (data.cancelMessage) { + self._showError(data.cancelMessage); //TODO: show warning/stop message instead of error (also show warning/error ui icon)! + } + + return; + } + + deleteConfirmMessage = data.deleteConfirmMessage; + deleteConfirm = data.deleteConfirm; + } else { + deleteConfirm = self.options.deleteConfirmation; + } + + if (deleteConfirm != false) { + //Confirmation + self._$deleteRecordDiv.find('.jtable-delete-confirm-message').html(deleteConfirmMessage); + self._showDeleteDialog($row); + } else { + //No confirmation + self._deleteRecordFromServer( + $row, + function () { //success + self._removeRowsFromTableWithAnimation($row); + }, + function (message) { //error + self._showError(message); + } + ); + } + }, + + /* Shows delete comfirmation dialog. + *************************************************************************/ + _showDeleteDialog: function ($row) { + this._$deletingRow = $row; + this._$deleteRecordDiv.dialog('open'); + }, + + /* Performs an ajax call to server to delete record + * and removesd row of record from table if ajax call success. + *************************************************************************/ + _deleteRecordFromServer: function ($row, success, error, url) { + var self = this; + + //Check if it is already being deleted right now + if ($row.data('deleting') == true) { + return; + } + + $row.data('deleting', true); + + var postData = {}; + postData[self._keyField] = self._getKeyValueOfRecord($row.data('record')); + + this._ajax({ + url: (url || self.options.actions.deleteAction), + data: postData, + success: function (data) { + + if (data.Result != 'OK') { + $row.data('deleting', false); + if (error) { + error(data.Message); + } + + return; + } + + self._trigger("recordDeleted", null, { record: $row.data('record'), row: $row, serverResponse: data }); + + if (success) { + success(data); + } + }, + error: function () { + $row.data('deleting', false); + if (error) { + error(self.options.messages.serverCommunicationError); + } + } + }); + }, + + /* Removes a row from table after a 'deleting' animation. + *************************************************************************/ + _removeRowsFromTableWithAnimation: function ($rows, animationsEnabled) { + var self = this; + + if (animationsEnabled == undefined) { + animationsEnabled = self.options.animationsEnabled; + } + + if (animationsEnabled) { + var className = 'jtable-row-deleting'; + if (this.options.jqueryuiTheme) { + className = className + ' ui-state-disabled'; + } + + //Stop current animation (if does exists) and begin 'deleting' animation. + $rows.stop(true, true).addClass(className, 'slow', '').promise().done(function () { + self._removeRowsFromTable($rows, 'deleted'); + }); + } else { + self._removeRowsFromTable($rows, 'deleted'); + } + } + + }); + +})(jQuery); diff --git a/dev/jquery.jtable.editing.js b/dev/jquery.jtable.editing.js index 7ba0e0f..d48fff5 100644 --- a/dev/jquery.jtable.editing.js +++ b/dev/jquery.jtable.editing.js @@ -1,373 +1,378 @@ -/************************************************************************
-* 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);
- 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 () {
-
- //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.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);
- }
- }
- }],
- close: function () {
- var $editForm = self._$editDiv.find('form:first');
- var $saveButton = $('#EditDialogSaveButton');
- self._trigger("formClosed", null, { form: $editForm, formType: 'edit', row: self._$editingRow });
- self._setEnabledOfDialogButton($saveButton, true, self.options.messages.save);
- $editForm.remove();
- }
- });
- },
-
- /************************************************************************
- * PUNLIC 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,
- url: self.options.actions.updateAction,
- 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);
- 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;
- }
-
- self._submitFormUsingAjax(
- options.url,
- $.param(options.record),
- 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);
- },
- 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" action="' + self.options.actions.updateAction + '" method="POST"></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');
-
- //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;
- self._submitFormUsingAjax(
- $editForm.attr('action'),
- $editForm.serialize(),
- function (data) {
- //Check for errors
- 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");
- },
- 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]);
- $columns.eq(this._firstDataColumnOffset + i).html(displayItem || '');
- }
-
- this._onRowUpdated($tableRow);
- },
-
- /* Shows 'updated' animation for a table row.
- *************************************************************************/
- _showUpdateAnimationForRow: function ($tableRow) {
- $tableRow.stop(true, true).addClass('jtable-row-updated', 'slow', '', function () {
- $tableRow.removeClass('jtable-row-updated', 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);
+/************************************************************************ +* 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); + 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 () { + + //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.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); + } + } + }], + close: function () { + var $editForm = self._$editDiv.find('form:first'); + var $saveButton = $('#EditDialogSaveButton'); + self._trigger("formClosed", null, { form: $editForm, formType: 'edit', row: self._$editingRow }); + self._setEnabledOfDialogButton($saveButton, true, self.options.messages.save); + $editForm.remove(); + } + }); + }, + + /************************************************************************ + * PUNLIC 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, + url: self.options.actions.updateAction, + 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); + 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; + } + + self._submitFormUsingAjax( + options.url, + $.param(options.record), + 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); + }, + 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" action="' + self.options.actions.updateAction + '" method="POST"></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'); + + //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; + self._submitFormUsingAjax( + $editForm.attr('action'), + $editForm.serialize(), + function (data) { + //Check for errors + 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"); + }, + 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]); + $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); diff --git a/dev/jquery.jtable.forms.js b/dev/jquery.jtable.forms.js index 840eec4..b497a7e 100644 --- a/dev/jquery.jtable.forms.js +++ b/dev/jquery.jtable.forms.js @@ -28,7 +28,7 @@ //TODO: May create label tag instead of a div. return $('<div />') .addClass('jtable-input-label') - .html(this.options.fields[fieldName].title); + .html(this.options.fields[fieldName].inputTitle || this.options.fields[fieldName].title); }, /* Creates an input element according to field type. diff --git a/dev/jquery.jtable.header.txt b/dev/jquery.jtable.header.txt index 48a6458..9b2c233 100644 --- a/dev/jquery.jtable.header.txt +++ b/dev/jquery.jtable.header.txt @@ -1,6 +1,6 @@ /* -jTable 2.2.1 +jTable 2.3.0 http://www.jtable.org --------------------------------------------------------------------------- diff --git a/dev/jquery.jtable.masterchild.js b/dev/jquery.jtable.masterchild.js index 9b769a0..a771301 100644 --- a/dev/jquery.jtable.masterchild.js +++ b/dev/jquery.jtable.masterchild.js @@ -1,166 +1,171 @@ -/************************************************************************
-* MASTER/CHILD tables extension for jTable *
-*************************************************************************/
-(function ($) {
-
- //Reference to base object members
- var base = {
- _removeRowsFromTable: $.hik.jtable.prototype._removeRowsFromTable
- };
-
- //extension members
- $.extend(true, $.hik.jtable.prototype, {
-
- /************************************************************************
- * DEFAULT OPTIONS / EVENTS *
- *************************************************************************/
- options: {
- openChildAsAccordion: false
- },
-
- /************************************************************************
- * PUBLIC METHODS *
- *************************************************************************/
-
- /* Creates and opens a new child table for given row.
- *************************************************************************/
- openChildTable: function ($row, tableOptions, opened) {
- var self = this;
-
- //Show close button as default
- tableOptions.showCloseButton = (tableOptions.showCloseButton != false);
-
- //Close child table when close button is clicked (default behavior)
- if (tableOptions.showCloseButton && !tableOptions.closeRequested) {
- tableOptions.closeRequested = function () {
- self.closeChildTable($row);
- };
- }
-
- //If accordion style, close open child table (if it does exists)
- if (self.options.openChildAsAccordion) {
- $row.siblings('.jtable-data-row').each(function () {
- self.closeChildTable($(this));
- });
- }
-
- //Close child table for this row and open new one for child table
- self.closeChildTable($row, function () {
- var $childRowColumn = self.getChildRow($row).children('td').empty();
- var $childTableContainer = $('<div />')
- .addClass('jtable-child-table-container')
- .appendTo($childRowColumn);
- $childRowColumn.data('childTable', $childTableContainer);
- $childTableContainer.jtable(tableOptions);
- self.openChildRow($row);
- $childTableContainer.hide().slideDown('fast', function () {
- if (opened) {
- opened({
- childTable: $childTableContainer
- });
- }
- });
- });
- },
-
- /* Closes child table for given row.
- *************************************************************************/
- closeChildTable: function ($row, closed) {
- var self = this;
-
- var $childRowColumn = this.getChildRow($row).children('td');
- var $childTable = $childRowColumn.data('childTable');
- if (!$childTable) {
- if (closed) {
- closed();
- }
-
- return;
- }
-
- $childRowColumn.data('childTable', null);
- $childTable.slideUp('fast', function () {
- $childTable.jtable('destroy');
- $childTable.remove();
- self.closeChildRow($row);
- if (closed) {
- closed();
- }
- });
- },
-
- /* Returns a boolean value indicates that if a child row is open for given row.
- *************************************************************************/
- isChildRowOpen: function ($row) {
- return (this.getChildRow($row).is(':visible'));
- },
-
- /* Gets child row for given row, opens it if it's closed (Creates if needed).
- *************************************************************************/
- getChildRow: function ($row) {
- return $row.data('childRow') || this._createChildRow($row);
- },
-
- /* Creates and opens child row for given row.
- *************************************************************************/
- openChildRow: function ($row) {
- var $childRow = this.getChildRow($row);
- if (!$childRow.is(':visible')) {
- $childRow.show();
- }
-
- return $childRow;
- },
-
- /* Closes child row if it's open.
- *************************************************************************/
- closeChildRow: function ($row) {
- var $childRow = this.getChildRow($row);
- if ($childRow.is(':visible')) {
- $childRow.hide();
- }
- },
-
- /************************************************************************
- * OVERRIDED METHODS *
- *************************************************************************/
-
- /* Overrides _removeRowsFromTable method to remove child rows of deleted rows.
- *************************************************************************/
- _removeRowsFromTable: function ($rows, reason) {
- var self = this;
-
- if (reason == 'deleted') {
- $rows.each(function () {
- var $row = $(this);
- var $childRow = $row.data('childRow');
- if ($childRow) {
- self.closeChildTable($row);
- $childRow.remove();
- }
- });
- }
-
- base._removeRowsFromTable.apply(this, arguments);
- },
-
- /************************************************************************
- * PRIVATE METHODS *
- *************************************************************************/
-
- /* Creates a child row for a row, hides and returns it.
- *************************************************************************/
- _createChildRow: function ($row) {
- var totalColumnCount = this._$table.find('thead th').length;
- var $childRow = $('<tr></tr>')
- .addClass('jtable-child-row')
- .append('<td colspan="' + totalColumnCount + '"></td>');
- $row.after($childRow);
- $row.data('childRow', $childRow);
- $childRow.hide();
- return $childRow;
- }
-
- });
-
+/************************************************************************ +* MASTER/CHILD tables extension for jTable * +*************************************************************************/ +(function ($) { + + //Reference to base object members + var base = { + _removeRowsFromTable: $.hik.jtable.prototype._removeRowsFromTable + }; + + //extension members + $.extend(true, $.hik.jtable.prototype, { + + /************************************************************************ + * DEFAULT OPTIONS / EVENTS * + *************************************************************************/ + options: { + openChildAsAccordion: false + }, + + /************************************************************************ + * PUBLIC METHODS * + *************************************************************************/ + + /* Creates and opens a new child table for given row. + *************************************************************************/ + openChildTable: function ($row, tableOptions, opened) { + var self = this; + + //Apply theming as same as parent table unless explicitily set + if (tableOptions.jqueryuiTheme == undefined) { + tableOptions.jqueryuiTheme = self.options.jqueryuiTheme; + } + + //Show close button as default + tableOptions.showCloseButton = (tableOptions.showCloseButton != false); + + //Close child table when close button is clicked (default behavior) + if (tableOptions.showCloseButton && !tableOptions.closeRequested) { + tableOptions.closeRequested = function () { + self.closeChildTable($row); + }; + } + + //If accordion style, close open child table (if it does exists) + if (self.options.openChildAsAccordion) { + $row.siblings('.jtable-data-row').each(function () { + self.closeChildTable($(this)); + }); + } + + //Close child table for this row and open new one for child table + self.closeChildTable($row, function () { + var $childRowColumn = self.getChildRow($row).children('td').empty(); + var $childTableContainer = $('<div />') + .addClass('jtable-child-table-container') + .appendTo($childRowColumn); + $childRowColumn.data('childTable', $childTableContainer); + $childTableContainer.jtable(tableOptions); + self.openChildRow($row); + $childTableContainer.hide().slideDown('fast', function () { + if (opened) { + opened({ + childTable: $childTableContainer + }); + } + }); + }); + }, + + /* Closes child table for given row. + *************************************************************************/ + closeChildTable: function ($row, closed) { + var self = this; + + var $childRowColumn = this.getChildRow($row).children('td'); + var $childTable = $childRowColumn.data('childTable'); + if (!$childTable) { + if (closed) { + closed(); + } + + return; + } + + $childRowColumn.data('childTable', null); + $childTable.slideUp('fast', function () { + $childTable.jtable('destroy'); + $childTable.remove(); + self.closeChildRow($row); + if (closed) { + closed(); + } + }); + }, + + /* Returns a boolean value indicates that if a child row is open for given row. + *************************************************************************/ + isChildRowOpen: function ($row) { + return (this.getChildRow($row).is(':visible')); + }, + + /* Gets child row for given row, opens it if it's closed (Creates if needed). + *************************************************************************/ + getChildRow: function ($row) { + return $row.data('childRow') || this._createChildRow($row); + }, + + /* Creates and opens child row for given row. + *************************************************************************/ + openChildRow: function ($row) { + var $childRow = this.getChildRow($row); + if (!$childRow.is(':visible')) { + $childRow.show(); + } + + return $childRow; + }, + + /* Closes child row if it's open. + *************************************************************************/ + closeChildRow: function ($row) { + var $childRow = this.getChildRow($row); + if ($childRow.is(':visible')) { + $childRow.hide(); + } + }, + + /************************************************************************ + * OVERRIDED METHODS * + *************************************************************************/ + + /* Overrides _removeRowsFromTable method to remove child rows of deleted rows. + *************************************************************************/ + _removeRowsFromTable: function ($rows, reason) { + var self = this; + + if (reason == 'deleted') { + $rows.each(function () { + var $row = $(this); + var $childRow = $row.data('childRow'); + if ($childRow) { + self.closeChildTable($row); + $childRow.remove(); + } + }); + } + + base._removeRowsFromTable.apply(this, arguments); + }, + + /************************************************************************ + * PRIVATE METHODS * + *************************************************************************/ + + /* Creates a child row for a row, hides and returns it. + *************************************************************************/ + _createChildRow: function ($row) { + var totalColumnCount = this._$table.find('thead th').length; + var $childRow = $('<tr></tr>') + .addClass('jtable-child-row') + .append('<td colspan="' + totalColumnCount + '"></td>'); + $row.after($childRow); + $row.data('childRow', $childRow); + $childRow.hide(); + return $childRow; + } + + }); + })(jQuery);
\ No newline at end of file diff --git a/dev/jquery.jtable.paging.js b/dev/jquery.jtable.paging.js index c8cdada..4d3069e 100644 --- a/dev/jquery.jtable.paging.js +++ b/dev/jquery.jtable.paging.js @@ -86,6 +86,8 @@ .addClass('jtable-bottom-panel') .insertAfter(this._$table); + this._jqueryuiThemeAddClass(this._$bottomPanel, 'ui-state-default'); + $('<div />').addClass('jtable-left-area').appendTo(this._$bottomPanel); $('<div />').addClass('jtable-right-area').appendTo(this._$bottomPanel); }, @@ -422,9 +424,14 @@ .data('pageNumber', this._currentPageNo - 1) .appendTo(this._$pagingListArea); + this._jqueryuiThemeAddClass($first, 'ui-button ui-state-default', 'ui-state-hover'); + this._jqueryuiThemeAddClass($previous, 'ui-button ui-state-default', 'ui-state-hover'); + if (this._currentPageNo <= 1) { $first.addClass('jtable-page-number-disabled'); $previous.addClass('jtable-page-number-disabled'); + this._jqueryuiThemeAddClass($first, 'ui-state-disabled'); + this._jqueryuiThemeAddClass($previous, 'ui-state-disabled'); } }, @@ -442,9 +449,14 @@ .data('pageNumber', pageCount) .appendTo(this._$pagingListArea); + this._jqueryuiThemeAddClass($next, 'ui-button ui-state-default', 'ui-state-hover'); + this._jqueryuiThemeAddClass($last, 'ui-button ui-state-default', 'ui-state-hover'); + if (this._currentPageNo >= pageCount) { $next.addClass('jtable-page-number-disabled'); $last.addClass('jtable-page-number-disabled'); + this._jqueryuiThemeAddClass($next, 'ui-state-disabled'); + this._jqueryuiThemeAddClass($last, 'ui-state-disabled'); } }, @@ -475,9 +487,11 @@ .data('pageNumber', pageNumber) .appendTo(this._$pagingListArea); + this._jqueryuiThemeAddClass($pageNumber, 'ui-button ui-state-default', 'ui-state-hover'); + if (this._currentPageNo == pageNumber) { - $pageNumber.addClass('jtable-page-number-active'); - $pageNumber.addClass('jtable-page-number-disabled'); + $pageNumber.addClass('jtable-page-number-active jtable-page-number-disabled'); + this._jqueryuiThemeAddClass($pageNumber, 'ui-state-active'); } }, diff --git a/dev/jquery.jtable.selecting.js b/dev/jquery.jtable.selecting.js index a387e79..1c6dd60 100644 --- a/dev/jquery.jtable.selecting.js +++ b/dev/jquery.jtable.selecting.js @@ -163,6 +163,7 @@ var $columnHeader = $('<th class=""></th>') .addClass('jtable-command-column-header jtable-column-header-selecting'); + this._jqueryuiThemeAddClass($columnHeader, 'ui-state-default'); var $headerContainer = $('<div />') .addClass('jtable-column-header-container') @@ -326,6 +327,8 @@ } $rows.addClass('jtable-row-selected'); + this._jqueryuiThemeAddClass($rows, 'ui-state-highlight'); + if (this.options.selectingCheckboxes) { $rows.find('>td.jtable-selecting-column >input').prop('checked', true); } @@ -336,7 +339,7 @@ /* Makes row/rows 'non selected'. *************************************************************************/ _deselectRows: function ($rows) { - $rows.removeClass('jtable-row-selected'); + $rows.removeClass('jtable-row-selected ui-state-highlight'); if (this.options.selectingCheckboxes) { $rows.find('>td.jtable-selecting-column >input').prop('checked', false); } |