Skip to content
Browse files

jTable v2.3.0

jQueryUI theme support with jqueryuiTheme option. [#135]
New field option: inputTitle. [#265]
Fixed some issues. [#134, #270, #371]
Updated some localization files.
  • Loading branch information...
1 parent 808a21c commit 1a540bc9dd0ce3855c41fd94f1894d67854ec8d3 @hikalkan committed
Showing with 2,127 additions and 1,203 deletions.
  1. +70 −22 dev/jquery.jtable.core.js
  2. +399 −394 dev/jquery.jtable.deletion.js
  3. +378 −373 dev/jquery.jtable.editing.js
  4. +1 −1 dev/jquery.jtable.forms.js
  5. +1 −1 dev/jquery.jtable.header.txt
  6. +170 −165 dev/jquery.jtable.masterchild.js
  7. +16 −2 dev/jquery.jtable.paging.js
  8. +4 −1 dev/jquery.jtable.selecting.js
  9. +1 −1 jTable.jquery.json
  10. +110 −30 lib/jquery.jtable.js
  11. +54 −51 lib/jquery.jtable.min.js
  12. +21 −14 lib/themes/basic/jtable_basic.css
  13. +83 −76 lib/themes/basic/jtable_basic.less
  14. +1 −1 lib/themes/basic/jtable_basic.min.css
  15. BIN lib/themes/jqueryui/add.png
  16. BIN lib/themes/jqueryui/bg-thead.png
  17. BIN lib/themes/jqueryui/close.png
  18. BIN lib/themes/jqueryui/column-asc.png
  19. BIN lib/themes/jqueryui/column-desc.png
  20. BIN lib/themes/jqueryui/column-sortable.png
  21. BIN lib/themes/jqueryui/delete.png
  22. BIN lib/themes/jqueryui/edit.png
  23. +398 −0 lib/themes/jqueryui/jtable_jqueryui.css
  24. +296 −0 lib/themes/jqueryui/jtable_jqueryui.less
  25. +1 −0 lib/themes/jqueryui/jtable_jqueryui.min.css
  26. BIN lib/themes/jqueryui/loading.gif
  27. +10 −3 lib/themes/jtable_theme_base.less
  28. +6 −3 lib/themes/lightcolor/blue/jtable.css
  29. +1 −1 lib/themes/lightcolor/blue/jtable.min.css
  30. +7 −4 lib/themes/lightcolor/gray/jtable.css
  31. +1 −1 lib/themes/lightcolor/gray/jtable.less
  32. +1 −1 lib/themes/lightcolor/gray/jtable.min.css
  33. +7 −4 lib/themes/lightcolor/green/jtable.css
  34. +1 −1 lib/themes/lightcolor/green/jtable.less
  35. +1 −1 lib/themes/lightcolor/green/jtable.min.css
  36. +7 −4 lib/themes/lightcolor/orange/jtable.css
  37. +1 −1 lib/themes/lightcolor/orange/jtable.less
  38. +1 −1 lib/themes/lightcolor/orange/jtable.min.css
  39. +7 −4 lib/themes/lightcolor/red/jtable.css
  40. +1 −1 lib/themes/lightcolor/red/jtable.less
  41. +1 −1 lib/themes/lightcolor/red/jtable.min.css
  42. +6 −3 lib/themes/metro/blue/jtable.css
  43. +1 −1 lib/themes/metro/blue/jtable.min.css
  44. +6 −3 lib/themes/metro/brown/jtable.css
  45. +1 −1 lib/themes/metro/brown/jtable.min.css
  46. +6 −3 lib/themes/metro/crimson/jtable.css
  47. +1 −1 lib/themes/metro/crimson/jtable.min.css
  48. +6 −3 lib/themes/metro/darkgray/jtable.css
  49. +1 −1 lib/themes/metro/darkgray/jtable.min.css
  50. +6 −3 lib/themes/metro/darkorange/jtable.css
  51. +1 −1 lib/themes/metro/darkorange/jtable.min.css
  52. +6 −3 lib/themes/metro/green/jtable.css
  53. +1 −1 lib/themes/metro/green/jtable.min.css
  54. +6 −3 lib/themes/metro/lightgray/jtable.css
  55. +1 −1 lib/themes/metro/lightgray/jtable.min.css
  56. +6 −3 lib/themes/metro/pink/jtable.css
  57. +1 −1 lib/themes/metro/pink/jtable.min.css
  58. +6 −3 lib/themes/metro/purple/jtable.css
  59. +1 −1 lib/themes/metro/purple/jtable.min.css
  60. +6 −3 lib/themes/metro/red/jtable.css
  61. +1 −1 lib/themes/metro/red/jtable.min.css
View
92 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 *
*************************************************************************/
View
793 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);
View
751 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);
View
2 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.
View
2 dev/jquery.jtable.header.txt
@@ -1,6 +1,6 @@
/*
-jTable 2.2.1
+jTable 2.3.0
http://www.jtable.org
---------------------------------------------------------------------------
View
335 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);
View
18 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');
}
},