diff options
Diffstat (limited to 'lib/jquery.jtable.js')
| -rw-r--r-- | lib/jquery.jtable.js | 140 |
1 files changed, 110 insertions, 30 deletions
diff --git a/lib/jquery.jtable.js b/lib/jquery.jtable.js index 0db71c6..3a356ae 100644 --- a/lib/jquery.jtable.js +++ b/lib/jquery.jtable.js @@ -1,6 +1,6 @@ /* -jTable 2.2.1 +jTable 2.3.0 http://www.jtable.org --------------------------------------------------------------------------- @@ -49,6 +49,7 @@ THE SOFTWARE. showCloseButton: false, loadingAnimationDelay: 500, saveUserPreferences: true, + jqueryuiTheme: false, ajaxSettings: { type: 'POST', @@ -134,7 +135,7 @@ THE SOFTWARE. this._createBusyPanel(); this._createErrorDialogDiv(); this._addNoDataRow(); - + this._cookieKeyPrefix = this._generateCookieKeyPrefix(); }, @@ -205,6 +206,8 @@ THE SOFTWARE. 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. @@ -220,6 +223,8 @@ THE SOFTWARE. .addClass('jtable-title') .appendTo(self._$mainContainer); + self._jqueryuiThemeAddClass($titleDiv, 'ui-widget-header'); + $('<div />') .addClass('jtable-title-text') .appendTo($titleDiv) @@ -252,6 +257,12 @@ THE SOFTWARE. .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(); }, @@ -300,19 +311,26 @@ THE SOFTWARE. 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. @@ -326,6 +344,7 @@ THE SOFTWARE. _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(); }, @@ -557,8 +576,13 @@ THE SOFTWARE. * 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); }); }, @@ -945,6 +969,8 @@ THE SOFTWARE. .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 @@ -988,7 +1014,7 @@ THE SOFTWARE. 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); @@ -1012,27 +1038,30 @@ THE SOFTWARE. /* 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(); } }, @@ -1040,6 +1069,7 @@ THE SOFTWARE. *************************************************************************/ _hideBusy: function () { clearTimeout(this._setBusyTimer); + this._setBusyTimer = null; this._$busyDiv.hide(); this._$busyMessageDiv.html('').hide(); }, @@ -1050,6 +1080,24 @@ THE SOFTWARE. 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. @@ -1101,7 +1149,7 @@ THE SOFTWARE. _getKeyValueOfRecord: function (record) { return record[this._keyField]; }, - + /************************************************************************ * COOKIE * *************************************************************************/ @@ -1382,7 +1430,7 @@ THE SOFTWARE. //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. @@ -2478,8 +2526,13 @@ THE SOFTWARE. /* 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); + 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); }); }, @@ -2882,8 +2935,13 @@ THE SOFTWARE. } 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('jtable-row-deleting', 'slow', '').promise().done(function () { + $rows.stop(true, true).addClass(className, 'slow', '').promise().done(function () { self._removeRowsFromTable($rows, 'deleted'); }); } else { @@ -3061,6 +3119,7 @@ THE SOFTWARE. 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') @@ -3224,6 +3283,8 @@ THE SOFTWARE. } $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); } @@ -3234,7 +3295,7 @@ THE SOFTWARE. /* 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); } @@ -3365,6 +3426,8 @@ THE SOFTWARE. .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); }, @@ -3701,9 +3764,14 @@ THE SOFTWARE. .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'); } }, @@ -3721,9 +3789,14 @@ THE SOFTWARE. .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'); } }, @@ -3754,9 +3827,11 @@ THE SOFTWARE. .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'); } }, @@ -4523,6 +4598,11 @@ THE SOFTWARE. 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); |