diff --git a/README.md b/README.md index 9b236f51..d99b7f68 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,68 @@ -What is jTable +What is msjTable ====== -http://www.jtable.org + [![A screenshot of jTable](https://raw.githubusercontent.com/hikalkan/jtable/master/screenshot.png)](http://jtable.org/) -jTable is a jQuery plugin used to create AJAX based CRUD tables without coding HTML or Javascript. It has several features including: - -* Automatically creates HTML table and loads records from server using AJAX. -* Creates 'create new record' jQueryUI dialog form. When user creates a record, it sends data to server using AJAX and adds the same record to the table in the page. -* Creates 'edit record' jQueryUI dialog form. When user edits a record, it updates server using AJAX and updates all cells on the table in the page. -* Allow user to 'delete a record' by jQueryUI dialog based confirmation. When user deletes a record, it deletes the record from server using AJAX and deletes the record from the table in the page. -* Shows animations for create/delete/edit operations on the table. -* Supports server side paging using AJAX. -* Supports server side sorting using AJAX. -* Supports master/child tables. -* Allows user to select rows. -* Allows user to resize columns. -* Allows user to show/hide columns. -* Exposes some events to enable validation with forms. -* It can be localized easily. -* All styling of table and forms are defined in a CSS file, so you can easily change style of everything to use plugin in your pages. CSS file is well defined and commented. -* It comes with pre-defined color themes. -* It is not depended on any server side technology. -* It is platform independed and works on all common browsers. +#### msjTable is a jQuery plugin forked from jTable, to create AJAX based CRUD tables without coding HTML or Javascript. + +#### Additional features of msjTable : + +* Record Preview feature : +```javascript +$("#myjtable").jtable({ +..., +recordPreview : true, // setting recordPreview to true, a view icon will appeare beside edit icon in each row +..., +fields : { + ..., + first_name : { + title : 'First name', + edit : true, + create : true, + preview : true, // specify which field you want to be shown in preview dialog + type : 'text' + }, + ... +}); + +``` + +* Multi columns form for Create, Edit and Preview dialogs. +```javascript +$("#myjtable").jtable({ +..., +createFormColumns : 2, // set the number of columns in new record dialog +editFormColumns : 2, // set the number of columns in edit record dialog +viewFormColumns : 2, // set the number of columns in record preview dialog +... + +}); +``` + +* You can send any required fields to row-delete-request as POST data (jTable only sends single key field) +```javascript +$("#myjtable").jtable({ +..., +fields : { + ..., + first_name : { + title : 'First name', + edit : true, + create : true, + delete : true, // setting delete option of field to true, sends this field beside key field as parameters to delete request. + type : 'text' + }, + ... +}); + +``` + + + + +Read More about additional features and its usage [here](https://m-shaeri.ir/blog/jquery-jtable-awesome-full-featured-plugin-for-crud-table/) Notes ====== diff --git a/dev/jquery.jtable.build.txt b/dev/jquery.jtable.build.txt index 49f8ca72..18c5dc8e 100644 --- a/dev/jquery.jtable.build.txt +++ b/dev/jquery.jtable.build.txt @@ -5,9 +5,10 @@ add jquery.jtable.utils.js add jquery.jtable.forms.js add jquery.jtable.creation.js add jquery.jtable.editing.js +add jquery.jtable.preview.js add jquery.jtable.deletion.js add jquery.jtable.selecting.js add jquery.jtable.paging.js add jquery.jtable.sorting.js add jquery.jtable.dynamiccolumns.js -add jquery.jtable.masterchild.js \ No newline at end of file +add jquery.jtable.masterchild.js diff --git a/dev/jquery.jtable.creation.js b/dev/jquery.jtable.creation.js index 4212e967..31b9a207 100644 --- a/dev/jquery.jtable.creation.js +++ b/dev/jquery.jtable.creation.js @@ -225,7 +225,10 @@ //Create add new record form var $addRecordForm = $('
'); - + var ColumnCount=self.options.createFormColumns ? self.options.createFormColumns : 1; + var CurrentColumnCount=0; + var $CreateFormTable = $('').appendTo($addRecordForm); + var $RowContainer = $('').appendTo($CreateFormTable); //Create input elements for (var i = 0; i < self._fieldList.length; i++) { @@ -247,10 +250,16 @@ continue; } - //Create a container div for this input field and add to form - var $fieldContainer = $('
') + //Create a container table cell for this input field and add to form + var $fieldContainer = $('
').appendTo($CreateFormTable); + CurrentColumnCount=0; + } //Create a label for input $fieldContainer.append(self._createInputLabelForRecordField(fieldName)); diff --git a/dev/jquery.jtable.deletion.js b/dev/jquery.jtable.deletion.js index 99960837..395a4e40 100644 --- a/dev/jquery.jtable.deletion.js +++ b/dev/jquery.jtable.deletion.js @@ -364,6 +364,25 @@ var postData = {}; postData[self._keyField] = self._getKeyValueOfRecord($row.data('record')); + //Add additional field to delete request POST + for (var i = 0; i < this._fieldList.length; i++) { + var fieldName = this._fieldList[i]; + var field = this.options.fields[fieldName]; + + //Do not send this field to server if field delete option is not explicitly set to true + if (!field.delete) { + continue; + } + + //Key field is already added to postData + if (self._keyField == fieldName) { + continue; + } + + //Add field to postData to be sent to server + postData[fieldName] = $row.data('record')[fieldName]; + } + //deleteAction may be a function, check if it is if (!url && $.isFunction(self.options.actions.deleteAction)) { diff --git a/dev/jquery.jtable.editing.js b/dev/jquery.jtable.editing.js index d0a5c587..929c05e8 100644 --- a/dev/jquery.jtable.editing.js +++ b/dev/jquery.jtable.editing.js @@ -258,7 +258,10 @@ //Create edit form var $editForm = $(''); - + var ColumnCount=self.options.editFormColumns ? self.options.editFormColumns : 1; + var CurrentColumnCount=0; + var $EditFormTable = $('
') .addClass('jtable-input-field-container') - .appendTo($addRecordForm); + .appendTo($RowContainer); + + CurrentColumnCount++; + if(CurrentColumnCount==ColumnCount) { + $RowContainer=$('
').appendTo($editForm); + var $RowContainer = $('').appendTo($EditFormTable); //Create input fields for (var i = 0; i < self._fieldList.length; i++) { @@ -289,7 +292,15 @@ } //Create a container div for this input field and add to form - var $fieldContainer = $('
').appendTo($editForm); + var $fieldContainer = $('').appendTo($EditFormTable); + CurrentColumnCount=0; + } //Create a label for input $fieldContainer.append(self._createInputLabelForRecordField(fieldName)); diff --git a/dev/jquery.jtable.forms.js b/dev/jquery.jtable.forms.js index 799a35b0..116b5530 100644 --- a/dev/jquery.jtable.forms.js +++ b/dev/jquery.jtable.forms.js @@ -1,5 +1,6 @@ -/************************************************************************ -* FORMS extension for jTable (base for edit/create forms) * + +/************************************************************************ +* FORMS extension for jTable (base for edit/create/preview forms) * *************************************************************************/ (function ($) { @@ -30,6 +31,14 @@ .addClass('jtable-input-label') .html(this.options.fields[fieldName].inputTitle || this.options.fields[fieldName].title); }, + /* Creates label for an input element. + *************************************************************************/ + _createViewLabelForRecordField: function (fieldName) { + //TODO: May create label tag instead of a div. + return $('
') + .addClass('jtable-view-label') + .html(this.options.fields[fieldName].title); + }, /* Creates an input element according to field type. *************************************************************************/ @@ -45,7 +54,7 @@ //If value if not supplied, use defaultValue of the field if (value == undefined || value == null) { - value = field.defaultValue; + value = field.defaultValue; } //Use custom function if supplied @@ -68,6 +77,7 @@ .append($input); } + //Create input according to field type if (field.type == 'date') { return this._createDateInputForField(field, fieldName, value); @@ -76,7 +86,7 @@ } else if (field.type == 'password') { return this._createPasswordInputForField(field, fieldName, value); } else if (field.type == 'checkbox') { - return this._createCheckboxForField(field, fieldName, value); + return this._createCheckboxForField(field, fieldName, value, formType); } else if (field.options) { if (field.type == 'radiobutton') { return this._createRadioButtonListForField(field, fieldName, value, record, formType); @@ -88,6 +98,64 @@ } }, + /* Creates an View element according to field type. + *************************************************************************/ + _createViewForRecordField: function (funcParams) { + var fieldName = funcParams.fieldName, + value = funcParams.value, + record = funcParams.record, + formType = funcParams.formType, + form = funcParams.form; + + //Get the field + var field = this.options.fields[fieldName]; + + //If value if not supplied, use defaultValue of the field + if (value == undefined || value == null) { + value = field.defaultViewValue; + } + + //Use custom function if supplied + if (field.customView) { + var $view = $(field.customView({ + value: value, + record: record, + formType: formType, + form: form + })); + + //Add id attribute if does not exists + if (!$view.attr('id')) { + $view.attr('id', 'View-' + fieldName); + } + + //Wrap input element with div + return $('
') + .addClass('jtable-view jtable-custom-view') + .append($view); + } + + + //Create input according to field type + if (field.type == 'date') { + return this._createTextViewForField(field, fieldName, value); + } else if (field.type == 'textarea') { + return this._createTextViewForField(field, fieldName, value); + } else if (field.type == 'password') { + return this._createTextViewForField(field, fieldName, value); + } else if (field.type == 'checkbox') { + return this._createTextViewForCheckboxField(field, fieldName, value,formType); + } else if (field.options) { + if (field.type == 'radiobutton') { + return this._createTextViewForOptions(field, fieldName, value, record, formType); + } else { + return this._createTextViewForOptions(field, fieldName, value, record, formType); + } + } else { + return this._createTextViewForField(field, fieldName, value); + } + }, + //Creates a hidden input element with given name and value. _createInputForHidden: function (fieldName, value) { if (value == undefined) { @@ -105,20 +173,9 @@ if(value != undefined) { $input.val(value); } - + var displayFormat = field.displayFormat || this.options.defaultDateFormat; - var changeMonth = field.changeMonth || this.options.defaultChangeMonth; - var changeYear = field.changeYear || this.options.defaultChangeYear; - var yearRange = field.yearRange || this.options.defaultYearRange; - var maxDate = field.maxDate || this.options.defaultMaxDate; - - $input.datepicker({ - dateFormat: displayFormat, - changeMonth: changeMonth, - changeYear: changeYear, - yearRange: yearRange, - maxDate: maxDate - }); + $input.datepicker({ dateFormat: displayFormat }); return $('
') .addClass('jtable-input jtable-date-input') .append($input); @@ -131,7 +188,7 @@ if (value != undefined) { $textArea.val(value); } - + return $('
') .addClass('jtable-input jtable-textarea-input') .append($textArea); @@ -140,11 +197,11 @@ /* Creates a standart textbox for a field. *************************************************************************/ _createTextInputForField: function (field, fieldName, value) { - var $input = $(''); + var $input = $(''); if (value != undefined) { $input.val(value); } - + return $('
') .addClass('jtable-input jtable-text-input') .append($input); @@ -153,19 +210,74 @@ /* Creates a password input for a field. *************************************************************************/ _createPasswordInputForField: function (field, fieldName, value) { - var $input = $(''); + var $input = $(''); if (value != undefined) { $input.val(value); } - + return $('
') .addClass('jtable-input jtable-password-input') .append($input); }, + /* Creates a standart view span for a field. + *************************************************************************/ + _createTextViewForField: function (field, fieldName, value) { + var $view = $('
'); + if (value != undefined) { + $view.html(value); + } + + return $('
') + .addClass('jtable-view jtable-view-text') + .append($view); + }, + + /* Creates a standart view for DropDownBoxs and Radio Options field. + *************************************************************************/ + _createTextViewForOptions: function (field, fieldName, value, record, source ) { + var $view = $('
'); + var options = this._getOptionsForField(fieldName, { + record: record, + source: source + }); + + var DisplayValue = this._getOptionsSelectedItem(options,value) + + if (DisplayValue != undefined && DisplayValue != null ) { + $view.html(DisplayValue); + } + + return $('
') + .addClass('jtable-view jtable-view-text') + .append($view); + }, + /* Creates a view for checkboxfor a field. + *************************************************************************/ + _createTextViewForCheckboxField: function (field, fieldName, value, formType) { + + var $view = $('
'); + var self = this; + + //If value is undefined, get unchecked state's value + if (value == undefined) { + value = self._getCheckBoxPropertiesForFieldByState(fieldName, false).Value; + } + var DisplayValue = self._getCheckBoxTextForFieldByValue(fieldName, value) + + if (DisplayValue != undefined && DisplayValue != null ) { + $view.html(DisplayValue); + } + + return $('
') + .addClass('jtable-view jtable-view-text') + .append($view); + + }, + /* Creates a checkboxfor a field. *************************************************************************/ - _createCheckboxForField: function (field, fieldName, value) { + _createCheckboxForField: function (field, fieldName, value, formType) { var self = this; //If value is undefined, get unchecked state's value @@ -178,7 +290,7 @@ .addClass('jtable-input jtable-checkbox-input'); //Create checkbox and check if needed - var $checkBox = $('') + var $checkBox = $('') .appendTo($containerDiv); if (value != undefined) { $checkBox.val(value); @@ -193,6 +305,8 @@ $checkBox.attr('checked', 'checked'); } + + //This method sets checkbox's value and text according to state of the checkbox var refreshCheckBoxValueAndText = function () { var checkboxProps = self._getCheckBoxPropertiesForFieldByState(fieldName, $checkBox.is(':checked')); @@ -247,7 +361,7 @@ return $containerDiv; }, - + /* Fills a dropdown list with given options. *************************************************************************/ _fillDropDownListWithOptions: function ($select, options, value) { @@ -258,6 +372,15 @@ .appendTo($select); } }, + /* get selected item from given options + *************************************************************************/ + _getOptionsSelectedItem: function (options, value) { + for (var i = 0; i < options.length; i++) { + if (options[i].Value == value ) + return options[i].DisplayText ; + } + return null; + }, /* Creates depended values object from given form. *************************************************************************/ @@ -307,6 +430,10 @@ .html(option.DisplayText) .appendTo($radioButtonDiv); + if (source = 'view'){ + $radioButton.attr('disabled', 'disabled'); + } + if (field.setOnTextClick != false) { $textSpan .addClass('jtable-option-text-clickable') @@ -384,7 +511,7 @@ } var field = self.options.fields[fieldName]; - + //check if this combobox depends on others if (!field.dependsOn) { return; diff --git a/dev/jquery.jtable.preview.js b/dev/jquery.jtable.preview.js new file mode 100644 index 00000000..07498d43 --- /dev/null +++ b/dev/jquery.jtable.preview.js @@ -0,0 +1,227 @@ +/************************************************************************ + * VIEW 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: { + viewRecord: 'View' + } + }, + + /************************************************************************ + * PRIVATE FIELDS * + *************************************************************************/ + + _$viewDiv: null, //Reference to the viewing dialog div (jQuery object) + _$viewingRow: null, //Reference to currently viewing row (jQuery object) + + /************************************************************************ + * CONSTRUCTOR AND INITIALIZATION METHODS * + *************************************************************************/ + + /* Overrides base method to do viewing-specific constructions. + *************************************************************************/ + _create: function () { + base._create.apply(this, arguments); + + if (!this.options.recordPreview) { + return; + } + + this._createViewDialogDiv(); + }, + + /* Creates and prepares preview dialog div + *************************************************************************/ + _createViewDialogDiv: function () { + var self = this; + + //Create a div for dialog and add to container element + self._$viewDiv = $('
') + .appendTo(self._$mainContainer); + + //Prepare dialog + self._$viewDiv.dialog({ + autoOpen: false, + show: self.options.dialogShowEffect, + hide: self.options.dialogHideEffect, + width: 'auto', + minWidth: '300', + modal: true, + title: self.options.messages.viewRecord, + buttons: + [{ //close button + text: self.options.messages.close, + click: function () { + self._$viewDiv.dialog('close'); + } + }], + close: function () { + var $viewForm = self._$viewDiv.find('form:first'); + self._trigger("formClosed", null, { form: $viewForm, formType: 'edit', row: self._$viewingRow }); + $viewForm.remove(); + } + }); + }, + + + + /************************************************************************ + * PUBLIC METHODS * + *************************************************************************/ + + + /************************************************************************ + * OVERRIDED METHODS * + *************************************************************************/ + + /* Overrides base method to add a 'view coomand column cell' to header row. + *************************************************************************/ + _addColumnsToHeaderRow: function ($tr) { + base._addColumnsToHeaderRow.apply(this, arguments); + if (self.options.recordPreview == true) { + $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); + + + // Add View command cell if the viewable option is sef to true + if (self.options.recordPreview == true ) { + var $span = $('').html(self.options.messages.viewRecord); + var $button = $('') + .addClass('jtable-command-button jtable-view-command-button') + .append($span) + .click(function (e) { + e.preventDefault(); + e.stopPropagation(); + self._showViewForm($row); + }); + $('
') + .addClass('jtable-command-column') + .append($button) + .appendTo($row); + } + + + + }, + + + /************************************************************************ + * PRIVATE METHODS * + *************************************************************************/ + + /* Shows view form for a row. + *************************************************************************/ + _showViewForm: function ($tableRow) { + var self = this; + var record = $tableRow.data('record'); + + //Create view form + var $ViewForm = $(''); + var ColumnCount=self.options.viewFormColumns ? self.options.viewFormColumns : 1; + var CurrentColumnCount=0; + var $ViewFormTable = $('
') + .addClass('jtable-input-field-container') + .appendTo($RowContainer); + + CurrentColumnCount++; + if(CurrentColumnCount==ColumnCount) { + $RowContainer=$('
').appendTo($ViewForm); + var $RowContainer = $('').appendTo($ViewFormTable); + //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]; + + + //Do not create element for non-viewable fields + if (field.view == false) { + continue; + } + + + + //Create a container div for this input field and add to form + var $fieldContainer = $('').appendTo($ViewFormTable); + CurrentColumnCount=0; + } + + //Create a label for input + $fieldContainer.append(self._createViewLabelForRecordField(fieldName)); + + //Create input element with it's current value + var currentValue = self._getValueForRecordField(record, fieldName); + $fieldContainer.append( + self._createViewForRecordField({ + fieldName: fieldName, + value: currentValue, + record: record, + formType: 'view', + form: $ViewForm + })); + } + + self._makeCascadeDropDowns($ViewForm, record, 'view'); + + + + //Open dialog + self._$viewingRow = $tableRow; + self._$viewDiv.clear(); + self._$viewDiv.append($ViewForm).dialog('open'); + self._trigger("formCreated", null, { form: $ViewForm, formType: 'view', record: record, row: $tableRow }); + } + , + + + + /* 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; + } + } + + + /************************************************************************ + * EVENT RAISING METHODS * + *************************************************************************/ + + + }); + +})(jQuery); \ No newline at end of file diff --git a/jTable.jquery.json b/jTable.jquery.json index b66d95c6..bbc8e2d1 100644 --- a/jTable.jquery.json +++ b/jTable.jquery.json @@ -1,6 +1,6 @@ { - "name": "jTable", - "title": "jTable", + "name": "msjTable", + "title": "msjTable", "description": "A JQuery plugin to create AJAX based CRUD tables (grids). It supports paging, sorting, selecting, master/child tables, show/hide/resize columns, localization, themes and more.", "keywords": [ "ajax", @@ -14,14 +14,14 @@ "version": "2.6.0", "author": { "name": "Halil ibrahim Kalkan", - "email": "halil@jtable.org", + "email": "halil@jtable.org", "url": "http://www.halilibrahimkalkan.com" }, "maintainers": [ { - "name": "Halil ibrahim Kalkan", - "email": "hi_kalkan@yahoo.com", - "url": "http://www.halilibrahimkalkan.com" + "name": "Mostafa Shaeri", + + "url": "https://m-shaeri.ir" } ], "licenses": [ @@ -30,7 +30,7 @@ "url": "http://en.wikipedia.org/wiki/MIT_License" } ], - "bugs": "https://github.com/volosoft/jtable/issues", + "bugs": "https://github.com/birddevelper/msjtable/issues", "homepage": "http://www.jtable.org", "docs": "http://jtable.org/Home/Documents", "download": "http://jtable.org/Home/Downloads", @@ -38,4 +38,4 @@ "jquery": ">=1.9.1", "jqueryui": ">=1.9.2" } -} \ No newline at end of file +} diff --git a/jquery.jtable.js b/jquery.jtable.js index e69f83e0..336614b2 100644 --- a/jquery.jtable.js +++ b/jquery.jtable.js @@ -1,11 +1,11 @@ /* -jTable 2.5.0 +msjTable 2.6.0 http://www.jtable.org --------------------------------------------------------------------------- -Copyright (C) 2011-2014 by Halil İbrahim Kalkan (http://www.halilibrahimkalkan.com) +Copyright (C) 2020-2021 by Mostafa Shaeri (https://www.m-shaeri.ir) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -25,8 +25,8 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -*/ - +*/ + /************************************************************************ * CORE jTable module * *************************************************************************/ @@ -1388,8 +1388,8 @@ THE SOFTWARE. }); }(jQuery)); - - + + /************************************************************************ * Some UTULITY methods used by jTable * *************************************************************************/ @@ -1549,10 +1549,11 @@ THE SOFTWARE. } })(jQuery); - + + /************************************************************************ -* FORMS extension for jTable (base for edit/create forms) * +* FORMS extension for jTable (base for edit/create/preview forms) * *************************************************************************/ (function ($) { @@ -1583,6 +1584,14 @@ THE SOFTWARE. .addClass('jtable-input-label') .html(this.options.fields[fieldName].inputTitle || this.options.fields[fieldName].title); }, + /* Creates label for an input element. + *************************************************************************/ + _createViewLabelForRecordField: function (fieldName) { + //TODO: May create label tag instead of a div. + return $('
') + .addClass('jtable-view-label') + .html(this.options.fields[fieldName].title); + }, /* Creates an input element according to field type. *************************************************************************/ @@ -1598,7 +1607,7 @@ THE SOFTWARE. //If value if not supplied, use defaultValue of the field if (value == undefined || value == null) { - value = field.defaultValue; + value = field.defaultValue; } //Use custom function if supplied @@ -1621,6 +1630,7 @@ THE SOFTWARE. .append($input); } + //Create input according to field type if (field.type == 'date') { return this._createDateInputForField(field, fieldName, value); @@ -1629,7 +1639,7 @@ THE SOFTWARE. } else if (field.type == 'password') { return this._createPasswordInputForField(field, fieldName, value); } else if (field.type == 'checkbox') { - return this._createCheckboxForField(field, fieldName, value); + return this._createCheckboxForField(field, fieldName, value, formType); } else if (field.options) { if (field.type == 'radiobutton') { return this._createRadioButtonListForField(field, fieldName, value, record, formType); @@ -1641,6 +1651,64 @@ THE SOFTWARE. } }, + /* Creates an View element according to field type. + *************************************************************************/ + _createViewForRecordField: function (funcParams) { + var fieldName = funcParams.fieldName, + value = funcParams.value, + record = funcParams.record, + formType = funcParams.formType, + form = funcParams.form; + + //Get the field + var field = this.options.fields[fieldName]; + + //If value if not supplied, use defaultValue of the field + if (value == undefined || value == null) { + value = field.defaultViewValue; + } + + //Use custom function if supplied + if (field.customView) { + var $view = $(field.customView({ + value: value, + record: record, + formType: formType, + form: form + })); + + //Add id attribute if does not exists + if (!$view.attr('id')) { + $view.attr('id', 'View-' + fieldName); + } + + //Wrap input element with div + return $('
') + .addClass('jtable-view jtable-custom-view') + .append($view); + } + + + //Create input according to field type + if (field.type == 'date') { + return this._createTextViewForField(field, fieldName, value); + } else if (field.type == 'textarea') { + return this._createTextViewForField(field, fieldName, value); + } else if (field.type == 'password') { + return this._createTextViewForField(field, fieldName, value); + } else if (field.type == 'checkbox') { + return this._createTextViewForCheckboxField(field, fieldName, value,formType); + } else if (field.options) { + if (field.type == 'radiobutton') { + return this._createTextViewForOptions(field, fieldName, value, record, formType); + } else { + return this._createTextViewForOptions(field, fieldName, value, record, formType); + } + } else { + return this._createTextViewForField(field, fieldName, value); + } + }, + //Creates a hidden input element with given name and value. _createInputForHidden: function (fieldName, value) { if (value == undefined) { @@ -1658,20 +1726,9 @@ THE SOFTWARE. if(value != undefined) { $input.val(value); } - + var displayFormat = field.displayFormat || this.options.defaultDateFormat; - var changeMonth = field.changeMonth || this.options.defaultChangeMonth; - var changeYear = field.changeYear || this.options.defaultChangeYear; - var yearRange = field.yearRange || this.options.defaultYearRange; - var maxDate = field.maxDate || this.options.defaultMaxDate; - - $input.datepicker({ - dateFormat: displayFormat, - changeMonth: changeMonth, - changeYear: changeYear, - yearRange: yearRange, - maxDate: maxDate - }); + $input.datepicker({ dateFormat: displayFormat }); return $('
') .addClass('jtable-input jtable-date-input') .append($input); @@ -1684,7 +1741,7 @@ THE SOFTWARE. if (value != undefined) { $textArea.val(value); } - + return $('
') .addClass('jtable-input jtable-textarea-input') .append($textArea); @@ -1693,11 +1750,11 @@ THE SOFTWARE. /* Creates a standart textbox for a field. *************************************************************************/ _createTextInputForField: function (field, fieldName, value) { - var $input = $(''); + var $input = $(''); if (value != undefined) { $input.val(value); } - + return $('
') .addClass('jtable-input jtable-text-input') .append($input); @@ -1706,19 +1763,74 @@ THE SOFTWARE. /* Creates a password input for a field. *************************************************************************/ _createPasswordInputForField: function (field, fieldName, value) { - var $input = $(''); + var $input = $(''); if (value != undefined) { $input.val(value); } - + return $('
') .addClass('jtable-input jtable-password-input') .append($input); }, + /* Creates a standart view span for a field. + *************************************************************************/ + _createTextViewForField: function (field, fieldName, value) { + var $view = $('
'); + if (value != undefined) { + $view.html(value); + } + + return $('
') + .addClass('jtable-view jtable-view-text') + .append($view); + }, + + /* Creates a standart view for DropDownBoxs and Radio Options field. + *************************************************************************/ + _createTextViewForOptions: function (field, fieldName, value, record, source ) { + var $view = $('
'); + var options = this._getOptionsForField(fieldName, { + record: record, + source: source + }); + + var DisplayValue = this._getOptionsSelectedItem(options,value) + + if (DisplayValue != undefined && DisplayValue != null ) { + $view.html(DisplayValue); + } + + return $('
') + .addClass('jtable-view jtable-view-text') + .append($view); + }, + /* Creates a view for checkboxfor a field. + *************************************************************************/ + _createTextViewForCheckboxField: function (field, fieldName, value, formType) { + + var $view = $('
'); + var self = this; + + //If value is undefined, get unchecked state's value + if (value == undefined) { + value = self._getCheckBoxPropertiesForFieldByState(fieldName, false).Value; + } + var DisplayValue = self._getCheckBoxTextForFieldByValue(fieldName, value) + + if (DisplayValue != undefined && DisplayValue != null ) { + $view.html(DisplayValue); + } + + return $('
') + .addClass('jtable-view jtable-view-text') + .append($view); + + }, + /* Creates a checkboxfor a field. *************************************************************************/ - _createCheckboxForField: function (field, fieldName, value) { + _createCheckboxForField: function (field, fieldName, value, formType) { var self = this; //If value is undefined, get unchecked state's value @@ -1731,7 +1843,7 @@ THE SOFTWARE. .addClass('jtable-input jtable-checkbox-input'); //Create checkbox and check if needed - var $checkBox = $('') + var $checkBox = $('') .appendTo($containerDiv); if (value != undefined) { $checkBox.val(value); @@ -1746,6 +1858,8 @@ THE SOFTWARE. $checkBox.attr('checked', 'checked'); } + + //This method sets checkbox's value and text according to state of the checkbox var refreshCheckBoxValueAndText = function () { var checkboxProps = self._getCheckBoxPropertiesForFieldByState(fieldName, $checkBox.is(':checked')); @@ -1800,7 +1914,7 @@ THE SOFTWARE. return $containerDiv; }, - + /* Fills a dropdown list with given options. *************************************************************************/ _fillDropDownListWithOptions: function ($select, options, value) { @@ -1811,6 +1925,15 @@ THE SOFTWARE. .appendTo($select); } }, + /* get selected item from given options + *************************************************************************/ + _getOptionsSelectedItem: function (options, value) { + for (var i = 0; i < options.length; i++) { + if (options[i].Value == value ) + return options[i].DisplayText ; + } + return null; + }, /* Creates depended values object from given form. *************************************************************************/ @@ -1860,6 +1983,10 @@ THE SOFTWARE. .html(option.DisplayText) .appendTo($radioButtonDiv); + if (source = 'view'){ + $radioButton.attr('disabled', 'disabled'); + } + if (field.setOnTextClick != false) { $textSpan .addClass('jtable-option-text-clickable') @@ -1937,7 +2064,7 @@ THE SOFTWARE. } var field = self.options.fields[fieldName]; - + //check if this combobox depends on others if (!field.dependsOn) { return; @@ -2045,8 +2172,8 @@ THE SOFTWARE. }); })(jQuery); - - + + /************************************************************************ * CREATE RECORD extension for jTable * *************************************************************************/ @@ -2110,7 +2237,7 @@ THE SOFTWARE. autoOpen: false, show: self.options.dialogShowEffect, hide: self.options.dialogHideEffect, - width: 'auto', + width: self.options.formDialogWidth ? self.options.formDialogWidth : 'auto', minWidth: '300', modal: true, title: self.options.messages.addNewRecord, @@ -2274,7 +2401,10 @@ THE SOFTWARE. //Create add new record form var $addRecordForm = $('
'); - + var ColumnCount=self.options.createFormColumns ? self.options.createFormColumns : 1; + var CurrentColumnCount=0; + var $CreateFormTable = $('
') + .addClass('jtable-view-field-container') + .appendTo($RowContainer); + + CurrentColumnCount++; + if(CurrentColumnCount==ColumnCount) { + $RowContainer=$('
').appendTo($addRecordForm); + var $RowContainer = $('').appendTo($CreateFormTable); //Create input elements for (var i = 0; i < self._fieldList.length; i++) { @@ -2296,10 +2426,16 @@ THE SOFTWARE. continue; } - //Create a container div for this input field and add to form - var $fieldContainer = $('
') + //Create a container table cell for this input field and add to form + var $fieldContainer = $('
').appendTo($CreateFormTable); + CurrentColumnCount=0; + } //Create a label for input $fieldContainer.append(self._createInputLabelForRecordField(fieldName)); @@ -2395,8 +2531,8 @@ THE SOFTWARE. }); })(jQuery); - - + + /************************************************************************ * EDIT RECORD extension for jTable * *************************************************************************/ @@ -2464,7 +2600,7 @@ THE SOFTWARE. autoOpen: false, show: self.options.dialogShowEffect, hide: self.options.dialogHideEffect, - width: 'auto', + width: self.options.formDialogWidth ? self.options.formDialogWidth : 'auto', minWidth: '300', modal: true, title: self.options.messages.editRecord, @@ -2657,7 +2793,10 @@ THE SOFTWARE. //Create edit form var $editForm = $(''); - + var ColumnCount=self.options.editFormColumns ? self.options.editFormColumns : 1; + var CurrentColumnCount=0; + var $EditFormTable = $('
') .addClass('jtable-input-field-container') - .appendTo($addRecordForm); + .appendTo($RowContainer); + + CurrentColumnCount++; + if(CurrentColumnCount==ColumnCount) { + $RowContainer=$('
').appendTo($editForm); + var $RowContainer = $('').appendTo($EditFormTable); //Create input fields for (var i = 0; i < self._fieldList.length; i++) { @@ -2688,7 +2827,15 @@ THE SOFTWARE. } //Create a container div for this input field and add to form - var $fieldContainer = $('
').appendTo($editForm); + var $fieldContainer = $('').appendTo($EditFormTable); + CurrentColumnCount=0; + } //Create a label for input $fieldContainer.append(self._createInputLabelForRecordField(fieldName)); @@ -2849,8 +2996,236 @@ THE SOFTWARE. }); })(jQuery); - - + + +/************************************************************************ + * VIEW 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: { + viewRecord: 'View' + } + }, + + /************************************************************************ + * PRIVATE FIELDS * + *************************************************************************/ + + _$viewDiv: null, //Reference to the viewing dialog div (jQuery object) + _$viewingRow: null, //Reference to currently viewing row (jQuery object) + + /************************************************************************ + * CONSTRUCTOR AND INITIALIZATION METHODS * + *************************************************************************/ + + /* Overrides base method to do viewing-specific constructions. + *************************************************************************/ + _create: function () { + base._create.apply(this, arguments); + + if (!this.options.recordPreview) { + return; + } + + this._createViewDialogDiv(); + }, + + /* Creates and prepares preview dialog div + *************************************************************************/ + _createViewDialogDiv: function () { + var self = this; + + //Create a div for dialog and add to container element + self._$viewDiv = $('
') + .appendTo(self._$mainContainer); + + //Prepare dialog + self._$viewDiv.dialog({ + autoOpen: false, + show: self.options.dialogShowEffect, + hide: self.options.dialogHideEffect, + width: 'auto', + minWidth: '300', + modal: true, + title: self.options.messages.viewRecord, + buttons: + [{ //close button + text: self.options.messages.close, + click: function () { + self._$viewDiv.dialog('close'); + } + }], + close: function () { + var $viewForm = self._$viewDiv.find('form:first'); + self._trigger("formClosed", null, { form: $viewForm, formType: 'edit', row: self._$viewingRow }); + $viewForm.remove(); + } + }); + }, + + + + /************************************************************************ + * PUBLIC METHODS * + *************************************************************************/ + + + /************************************************************************ + * OVERRIDED METHODS * + *************************************************************************/ + + /* Overrides base method to add a 'view coomand column cell' to header row. + *************************************************************************/ + _addColumnsToHeaderRow: function ($tr) { + base._addColumnsToHeaderRow.apply(this, arguments); + if (self.options.recordPreview == true) { + $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); + + + // Add View command cell if the viewable option is sef to true + if (self.options.recordPreview == true ) { + var $span = $('').html(self.options.messages.viewRecord); + var $button = $('') + .addClass('jtable-command-button jtable-view-command-button') + .append($span) + .click(function (e) { + e.preventDefault(); + e.stopPropagation(); + self._showViewForm($row); + }); + $('') + .addClass('jtable-command-column') + .append($button) + .appendTo($row); + } + + + + }, + + + /************************************************************************ + * PRIVATE METHODS * + *************************************************************************/ + + /* Shows view form for a row. + *************************************************************************/ + _showViewForm: function ($tableRow) { + var self = this; + var record = $tableRow.data('record'); + + //Create view form + var $ViewForm = $(''); + var ColumnCount=self.options.viewFormColumns ? self.options.viewFormColumns : 1; + var CurrentColumnCount=0; + var $ViewFormTable = $('
') + .addClass('jtable-input-field-container') + .appendTo($RowContainer); + + CurrentColumnCount++; + if(CurrentColumnCount==ColumnCount) { + $RowContainer=$('
').appendTo($ViewForm); + var $RowContainer = $('').appendTo($ViewFormTable); + //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]; + + + //Do not create element for non-viewable fields + if (field.view == false) { + continue; + } + + + + //Create a container div for this input field and add to form + var $fieldContainer = $('').appendTo($ViewFormTable); + CurrentColumnCount=0; + } + + //Create a label for input + $fieldContainer.append(self._createViewLabelForRecordField(fieldName)); + + //Create input element with it's current value + var currentValue = self._getValueForRecordField(record, fieldName); + $fieldContainer.append( + self._createViewForRecordField({ + fieldName: fieldName, + value: currentValue, + record: record, + formType: 'view', + form: $ViewForm + })); + } + + self._makeCascadeDropDowns($ViewForm, record, 'view'); + + + + //Open dialog + self._$viewingRow = $tableRow; + self._$viewDiv.clear(); + self._$viewDiv.append($ViewForm).dialog('open'); + self._trigger("formCreated", null, { form: $ViewForm, formType: 'view', record: record, row: $tableRow }); + } + , + + + + /* 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; + } + } + + + /************************************************************************ + * EVENT RAISING METHODS * + *************************************************************************/ + + + }); + +})(jQuery); + /************************************************************************ * DELETION extension for jTable * *************************************************************************/ @@ -2951,6 +3326,7 @@ THE SOFTWARE. self._$deleteRecordDiv.dialog('close'); }, function (message) { //error + self._$deleteRecordDiv.dialog('close'); self._showError(message); self._setEnabledOfDialogButton($deleteButton, true, self.options.messages.deleteText); } @@ -3216,6 +3592,25 @@ THE SOFTWARE. var postData = {}; postData[self._keyField] = self._getKeyValueOfRecord($row.data('record')); + //Add additional field to delete request POST + for (var i = 0; i < this._fieldList.length; i++) { + var fieldName = this._fieldList[i]; + var field = this.options.fields[fieldName]; + + //Do not send this field to server if field delete option is not explicitly set to true + if (!field.delete) { + continue; + } + + //Key field is already added to postData + if (self._keyField == fieldName) { + continue; + } + + //Add field to postData to be sent to server + postData[fieldName] = $row.data('record')[fieldName]; + } + //deleteAction may be a function, check if it is if (!url && $.isFunction(self.options.actions.deleteAction)) { @@ -3283,8 +3678,8 @@ THE SOFTWARE. }); })(jQuery); - - + + /************************************************************************ * SELECTING extension for jTable * *************************************************************************/ @@ -3667,8 +4062,8 @@ THE SOFTWARE. }); })(jQuery); - - + + /************************************************************************ * PAGING extension for jTable * *************************************************************************/ @@ -4264,215 +4659,215 @@ THE SOFTWARE. }); })(jQuery); - - -/************************************************************************ -* SORTING extension for jTable * -*************************************************************************/ -(function ($) { - - //Reference to base object members - var base = { - _initializeFields: $.hik.jtable.prototype._initializeFields, - _normalizeFieldOptions: $.hik.jtable.prototype._normalizeFieldOptions, - _createHeaderCellForField: $.hik.jtable.prototype._createHeaderCellForField, - _createRecordLoadUrl: $.hik.jtable.prototype._createRecordLoadUrl, - _createJtParamsForLoading: $.hik.jtable.prototype._createJtParamsForLoading - }; - - //extension members - $.extend(true, $.hik.jtable.prototype, { - - /************************************************************************ - * DEFAULT OPTIONS / EVENTS * - *************************************************************************/ - options: { - sorting: false, - multiSorting: false, - defaultSorting: '' - }, - - /************************************************************************ - * PRIVATE FIELDS * - *************************************************************************/ - - _lastSorting: null, //Last sorting of the table - - /************************************************************************ - * OVERRIDED METHODS * - *************************************************************************/ - - /* Overrides base method to create sorting array. - *************************************************************************/ - _initializeFields: function () { - base._initializeFields.apply(this, arguments); - - this._lastSorting = []; - if (this.options.sorting) { - this._buildDefaultSortingArray(); - } - }, - - /* Overrides _normalizeFieldOptions method to normalize sorting option for fields. - *************************************************************************/ - _normalizeFieldOptions: function (fieldName, props) { - base._normalizeFieldOptions.apply(this, arguments); - props.sorting = (props.sorting != false); - }, - - /* Overrides _createHeaderCellForField to make columns sortable. - *************************************************************************/ - _createHeaderCellForField: function (fieldName, field) { - var $headerCell = base._createHeaderCellForField.apply(this, arguments); - if (this.options.sorting && field.sorting) { - this._makeColumnSortable($headerCell, fieldName, field.initialSortingDirection); - } - - return $headerCell; - }, - - /* Overrides _createRecordLoadUrl to add sorting specific info to URL. - *************************************************************************/ - _createRecordLoadUrl: function () { - var loadUrl = base._createRecordLoadUrl.apply(this, arguments); - loadUrl = this._addSortingInfoToUrl(loadUrl); - return loadUrl; - }, - - /************************************************************************ - * PRIVATE METHODS * - *************************************************************************/ - - /* Builds the sorting array according to defaultSorting string - *************************************************************************/ - _buildDefaultSortingArray: function () { - var self = this; - - $.each(self.options.defaultSorting.split(","), function (orderIndex, orderValue) { - $.each(self.options.fields, function (fieldName, fieldProps) { - if (fieldProps.sorting) { - var colOffset = orderValue.indexOf(fieldName); - if (colOffset > -1) { - if (orderValue.toUpperCase().indexOf(' DESC', colOffset) > -1) { - self._lastSorting.push({ - fieldName: fieldName, - sortOrder: 'DESC' - }); - } else { - self._lastSorting.push({ - fieldName: fieldName, - sortOrder: 'ASC' - }); - } - } - } - }); - }); - }, - - /* Makes a column sortable. - *************************************************************************/ - _makeColumnSortable: function ($columnHeader, fieldName, initialSortingDirection) { - var self = this; - - $columnHeader - .addClass('jtable-column-header-sortable') - .click(function (e) { - e.preventDefault(); - - if (!self.options.multiSorting || !e.ctrlKey) { - self._lastSorting = []; //clear previous sorting - } - - self._sortTableByColumn($columnHeader); - }); - - if(initialSortingDirection){ - $columnHeader.addClass('jtable-column-header-sorted-' + initialSortingDirection.toLowerCase()); - } - - //Set default sorting - $.each(this._lastSorting, function (sortIndex, sortField) { - if (sortField.fieldName == fieldName) { - if (sortField.sortOrder == 'DESC') { - $columnHeader.addClass('jtable-column-header-sorted-desc'); - } else { - $columnHeader.addClass('jtable-column-header-sorted-asc'); - } - } - }); - }, - - /* Sorts table according to a column header. - *************************************************************************/ - _sortTableByColumn: function ($columnHeader) { - //Remove sorting styles from all columns except this one - if (this._lastSorting.length == 0) { - $columnHeader.siblings().removeClass('jtable-column-header-sorted-asc jtable-column-header-sorted-desc'); - } - - //If current sorting list includes this column, remove it from the list - for (var i = 0; i < this._lastSorting.length; i++) { - if (this._lastSorting[i].fieldName == $columnHeader.data('fieldName')) { - this._lastSorting.splice(i--, 1); - } - } - - //Sort ASC or DESC according to current sorting state - if ($columnHeader.hasClass('jtable-column-header-sorted-asc')) { - $columnHeader.removeClass('jtable-column-header-sorted-asc').addClass('jtable-column-header-sorted-desc'); - this._lastSorting.push({ - 'fieldName': $columnHeader.data('fieldName'), - sortOrder: 'DESC' - }); - } else { - $columnHeader.removeClass('jtable-column-header-sorted-desc').addClass('jtable-column-header-sorted-asc'); - this._lastSorting.push({ - 'fieldName': $columnHeader.data('fieldName'), - sortOrder: 'ASC' - }); - } - - //Load current page again - this._reloadTable(); - }, - - /* Adds jtSorting parameter to a URL as query string. - *************************************************************************/ - _addSortingInfoToUrl: function (url) { - if (!this.options.sorting || this._lastSorting.length == 0) { - return url; - } - - var sorting = []; - $.each(this._lastSorting, function (idx, value) { - sorting.push(value.fieldName + ' ' + value.sortOrder); - }); - - return (url + (url.indexOf('?') < 0 ? '?' : '&') + 'jtSorting=' + sorting.join(",")); - }, - - /* Overrides _createJtParamsForLoading method to add sorging parameters to jtParams object. - *************************************************************************/ - _createJtParamsForLoading: function () { - var jtParams = base._createJtParamsForLoading.apply(this, arguments); - - if (this.options.sorting && this._lastSorting.length) { - var sorting = []; - $.each(this._lastSorting, function (idx, value) { - sorting.push(value.fieldName + ' ' + value.sortOrder); - }); - - jtParams.jtSorting = sorting.join(","); - } - - return jtParams; - } - - }); - -})(jQuery); - + + +/************************************************************************ +* SORTING extension for jTable * +*************************************************************************/ +(function ($) { + + //Reference to base object members + var base = { + _initializeFields: $.hik.jtable.prototype._initializeFields, + _normalizeFieldOptions: $.hik.jtable.prototype._normalizeFieldOptions, + _createHeaderCellForField: $.hik.jtable.prototype._createHeaderCellForField, + _createRecordLoadUrl: $.hik.jtable.prototype._createRecordLoadUrl, + _createJtParamsForLoading: $.hik.jtable.prototype._createJtParamsForLoading + }; + + //extension members + $.extend(true, $.hik.jtable.prototype, { + + /************************************************************************ + * DEFAULT OPTIONS / EVENTS * + *************************************************************************/ + options: { + sorting: false, + multiSorting: false, + defaultSorting: '' + }, + + /************************************************************************ + * PRIVATE FIELDS * + *************************************************************************/ + + _lastSorting: null, //Last sorting of the table + + /************************************************************************ + * OVERRIDED METHODS * + *************************************************************************/ + + /* Overrides base method to create sorting array. + *************************************************************************/ + _initializeFields: function () { + base._initializeFields.apply(this, arguments); + + this._lastSorting = []; + if (this.options.sorting) { + this._buildDefaultSortingArray(); + } + }, + + /* Overrides _normalizeFieldOptions method to normalize sorting option for fields. + *************************************************************************/ + _normalizeFieldOptions: function (fieldName, props) { + base._normalizeFieldOptions.apply(this, arguments); + props.sorting = (props.sorting != false); + }, + + /* Overrides _createHeaderCellForField to make columns sortable. + *************************************************************************/ + _createHeaderCellForField: function (fieldName, field) { + var $headerCell = base._createHeaderCellForField.apply(this, arguments); + if (this.options.sorting && field.sorting) { + this._makeColumnSortable($headerCell, fieldName, field.initialSortingDirection); + } + + return $headerCell; + }, + + /* Overrides _createRecordLoadUrl to add sorting specific info to URL. + *************************************************************************/ + _createRecordLoadUrl: function () { + var loadUrl = base._createRecordLoadUrl.apply(this, arguments); + loadUrl = this._addSortingInfoToUrl(loadUrl); + return loadUrl; + }, + + /************************************************************************ + * PRIVATE METHODS * + *************************************************************************/ + + /* Builds the sorting array according to defaultSorting string + *************************************************************************/ + _buildDefaultSortingArray: function () { + var self = this; + + $.each(self.options.defaultSorting.split(","), function (orderIndex, orderValue) { + $.each(self.options.fields, function (fieldName, fieldProps) { + if (fieldProps.sorting) { + var colOffset = orderValue.indexOf(fieldName); + if (colOffset > -1) { + if (orderValue.toUpperCase().indexOf(' DESC', colOffset) > -1) { + self._lastSorting.push({ + fieldName: fieldName, + sortOrder: 'DESC' + }); + } else { + self._lastSorting.push({ + fieldName: fieldName, + sortOrder: 'ASC' + }); + } + } + } + }); + }); + }, + + /* Makes a column sortable. + *************************************************************************/ + _makeColumnSortable: function ($columnHeader, fieldName, initialSortingDirection) { + var self = this; + + $columnHeader + .addClass('jtable-column-header-sortable') + .click(function (e) { + e.preventDefault(); + + if (!self.options.multiSorting || !e.ctrlKey) { + self._lastSorting = []; //clear previous sorting + } + + self._sortTableByColumn($columnHeader); + }); + + if(initialSortingDirection){ + $columnHeader.addClass('jtable-column-header-sorted-' + initialSortingDirection.toLowerCase()); + } + + //Set default sorting + $.each(this._lastSorting, function (sortIndex, sortField) { + if (sortField.fieldName == fieldName) { + if (sortField.sortOrder == 'DESC') { + $columnHeader.addClass('jtable-column-header-sorted-desc'); + } else { + $columnHeader.addClass('jtable-column-header-sorted-asc'); + } + } + }); + }, + + /* Sorts table according to a column header. + *************************************************************************/ + _sortTableByColumn: function ($columnHeader) { + //Remove sorting styles from all columns except this one + if (this._lastSorting.length == 0) { + $columnHeader.siblings().removeClass('jtable-column-header-sorted-asc jtable-column-header-sorted-desc'); + } + + //If current sorting list includes this column, remove it from the list + for (var i = 0; i < this._lastSorting.length; i++) { + if (this._lastSorting[i].fieldName == $columnHeader.data('fieldName')) { + this._lastSorting.splice(i--, 1); + } + } + + //Sort ASC or DESC according to current sorting state + if ($columnHeader.hasClass('jtable-column-header-sorted-asc')) { + $columnHeader.removeClass('jtable-column-header-sorted-asc').addClass('jtable-column-header-sorted-desc'); + this._lastSorting.push({ + 'fieldName': $columnHeader.data('fieldName'), + sortOrder: 'DESC' + }); + } else { + $columnHeader.removeClass('jtable-column-header-sorted-desc').addClass('jtable-column-header-sorted-asc'); + this._lastSorting.push({ + 'fieldName': $columnHeader.data('fieldName'), + sortOrder: 'ASC' + }); + } + + //Load current page again + this._reloadTable(); + }, + + /* Adds jtSorting parameter to a URL as query string. + *************************************************************************/ + _addSortingInfoToUrl: function (url) { + if (!this.options.sorting || this._lastSorting.length == 0) { + return url; + } + + var sorting = []; + $.each(this._lastSorting, function (idx, value) { + sorting.push(value.fieldName + ' ' + value.sortOrder); + }); + + return (url + (url.indexOf('?') < 0 ? '?' : '&') + 'jtSorting=' + sorting.join(",")); + }, + + /* Overrides _createJtParamsForLoading method to add sorging parameters to jtParams object. + *************************************************************************/ + _createJtParamsForLoading: function () { + var jtParams = base._createJtParamsForLoading.apply(this, arguments); + + if (this.options.sorting && this._lastSorting.length) { + var sorting = []; + $.each(this._lastSorting, function (idx, value) { + sorting.push(value.fieldName + ' ' + value.sortOrder); + }); + + jtParams.jtSorting = sorting.join(","); + } + + return jtParams; + } + + }); + +})(jQuery); + /************************************************************************ * DYNAMIC COLUMNS extension for jTable * * (Show/hide/resize columns) * @@ -4934,8 +5329,8 @@ THE SOFTWARE. }); })(jQuery); - - + + /************************************************************************ * MASTER/CHILD tables extension for jTable * *************************************************************************/ @@ -5106,5 +5501,5 @@ THE SOFTWARE. }); -})(jQuery); - +})(jQuery); + diff --git a/lib/themes/basic/jtable_basic.css b/lib/themes/basic/jtable_basic.css index 2bd8a056..81951b1f 100644 --- a/lib/themes/basic/jtable_basic.css +++ b/lib/themes/basic/jtable_basic.css @@ -183,13 +183,22 @@ div.jtable-main-container div.jtable-column-selection-container ul.jtable-column div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li input[type="checkbox"] { cursor: pointer; } -form.jtable-dialog-form div.jtable-input-field-container { + +form.jtable-dialog-form table.jtable-input-field-container-grid { + border-spacing: 10px; + border-collapse: separate; + +} + +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row td.jtable-input-field-container { padding: 2px 0px 3px 0px; border-bottom: 1px solid #ddd; } -form.jtable-dialog-form div.jtable-input-field-container:last-child { + +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row:last-child td.jtable-input-field-container { border: none; } + form.jtable-dialog-form div.jtable-input-label { padding: 2px 3px; font-size: 1.1em; @@ -280,3 +289,39 @@ div.jtable-busy-message { background-color: #ddd; font-size: 1.25em; } + +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} + + diff --git a/lib/themes/basic/report.png b/lib/themes/basic/report.png new file mode 100644 index 00000000..c472bf7c Binary files /dev/null and b/lib/themes/basic/report.png differ diff --git a/lib/themes/jqueryui/jtable_jqueryui.css b/lib/themes/jqueryui/jtable_jqueryui.css index 3a2ef934..166a9844 100644 --- a/lib/themes/jqueryui/jtable_jqueryui.css +++ b/lib/themes/jqueryui/jtable_jqueryui.css @@ -177,13 +177,22 @@ div.jtable-main-container div.jtable-column-selection-container ul.jtable-column div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li input[type="checkbox"] { cursor: pointer; } -form.jtable-dialog-form div.jtable-input-field-container { + +form.jtable-dialog-form table.jtable-input-field-container-grid { + border-spacing: 10px; + border-collapse: separate; + +} + +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row td.jtable-input-field-container { padding: 2px 0px 3px 0px; border-bottom: 1px solid #ddd; } -form.jtable-dialog-form div.jtable-input-field-container:last-child { + +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row:last-child td.jtable-input-field-container { border: none; } + form.jtable-dialog-form div.jtable-input-label { padding: 2px 3px; font-size: 1.1em; diff --git a/lib/themes/lightcolor/blue/jtable.css b/lib/themes/lightcolor/blue/jtable.css index 39942338..92f32f90 100644 --- a/lib/themes/lightcolor/blue/jtable.css +++ b/lib/themes/lightcolor/blue/jtable.css @@ -181,13 +181,22 @@ div.jtable-main-container div.jtable-column-selection-container ul.jtable-column div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li input[type="checkbox"] { cursor: pointer; } -form.jtable-dialog-form div.jtable-input-field-container { + +form.jtable-dialog-form table.jtable-input-field-container-grid { + border-spacing: 10px; + border-collapse: separate; + +} + +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row td.jtable-input-field-container { padding: 2px 0px 3px 0px; border-bottom: 1px solid #ddd; } -form.jtable-dialog-form div.jtable-input-field-container:last-child { + +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row:last-child td.jtable-input-field-container { border: none; } + form.jtable-dialog-form div.jtable-input-label { padding: 2px 3px; font-size: 1.1em; @@ -519,3 +528,37 @@ div.jtable-busy-message { border-color: #2B5177; background-color: #78B1ED; } + +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../lightcolor/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} diff --git a/lib/themes/lightcolor/gray/jtable.css b/lib/themes/lightcolor/gray/jtable.css index 4380c00f..a1997079 100644 --- a/lib/themes/lightcolor/gray/jtable.css +++ b/lib/themes/lightcolor/gray/jtable.css @@ -181,13 +181,22 @@ div.jtable-main-container div.jtable-column-selection-container ul.jtable-column div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li input[type="checkbox"] { cursor: pointer; } -form.jtable-dialog-form div.jtable-input-field-container { + +form.jtable-dialog-form table.jtable-input-field-container-grid { + border-spacing: 10px; + border-collapse: separate; + +} + +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row td.jtable-input-field-container { padding: 2px 0px 3px 0px; border-bottom: 1px solid #ddd; } -form.jtable-dialog-form div.jtable-input-field-container:last-child { + +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row:last-child td.jtable-input-field-container { border: none; } + form.jtable-dialog-form div.jtable-input-label { padding: 2px 3px; font-size: 1.1em; @@ -519,3 +528,38 @@ div.jtable-busy-message { border-color: #5f5f5f; background-color: #8e8e8e; } + +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../lightcolor/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} + diff --git a/lib/themes/lightcolor/green/jtable.css b/lib/themes/lightcolor/green/jtable.css index 63c480c6..999cf8a0 100644 --- a/lib/themes/lightcolor/green/jtable.css +++ b/lib/themes/lightcolor/green/jtable.css @@ -181,11 +181,17 @@ div.jtable-main-container div.jtable-column-selection-container ul.jtable-column div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li input[type="checkbox"] { cursor: pointer; } -form.jtable-dialog-form div.jtable-input-field-container { +form.jtable-dialog-form table.jtable-input-field-container-grid { + border-spacing: 10px; + border-collapse: separate; + +} +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row td.jtable-input-field-container { padding: 2px 0px 3px 0px; border-bottom: 1px solid #ddd; } -form.jtable-dialog-form div.jtable-input-field-container:last-child { + +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row:last-child td.jtable-input-field-container { border: none; } form.jtable-dialog-form div.jtable-input-label { @@ -519,3 +525,38 @@ div.jtable-busy-message { border-color: #167509; background-color: #42d033; } + +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../lightcolor/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} + diff --git a/lib/themes/lightcolor/orange/jtable.css b/lib/themes/lightcolor/orange/jtable.css index e1bee460..6cd66388 100644 --- a/lib/themes/lightcolor/orange/jtable.css +++ b/lib/themes/lightcolor/orange/jtable.css @@ -181,13 +181,20 @@ div.jtable-main-container div.jtable-column-selection-container ul.jtable-column div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li input[type="checkbox"] { cursor: pointer; } -form.jtable-dialog-form div.jtable-input-field-container { +form.jtable-dialog-form table.jtable-input-field-container-grid { + border-spacing: 10px; + border-collapse: separate; + +} +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row td.jtable-input-field-container { padding: 2px 0px 3px 0px; border-bottom: 1px solid #ddd; } -form.jtable-dialog-form div.jtable-input-field-container:last-child { + +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row:last-child td.jtable-input-field-container { border: none; } + form.jtable-dialog-form div.jtable-input-label { padding: 2px 3px; font-size: 1.1em; @@ -519,3 +526,37 @@ div.jtable-busy-message { border-color: #a14100; background-color: #f36301; } + +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../lightcolor/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} diff --git a/lib/themes/lightcolor/red/jtable.css b/lib/themes/lightcolor/red/jtable.css index 7985356d..626cb939 100644 --- a/lib/themes/lightcolor/red/jtable.css +++ b/lib/themes/lightcolor/red/jtable.css @@ -181,11 +181,15 @@ div.jtable-main-container div.jtable-column-selection-container ul.jtable-column div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li input[type="checkbox"] { cursor: pointer; } -form.jtable-dialog-form div.jtable-input-field-container { +form.jtable-dialog-form table.jtable-input-field-container-grid { + border-spacing: 10px; + border-collapse: separate; +} +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row td.jtable-input-field-container { padding: 2px 0px 3px 0px; border-bottom: 1px solid #ddd; } -form.jtable-dialog-form div.jtable-input-field-container:last-child { +form.jtable-dialog-form table.jtable-input-field-container-grid tr.jtable-input-field-container-row:last-child td.jtable-input-field-container { border: none; } form.jtable-dialog-form div.jtable-input-label { @@ -519,3 +523,37 @@ div.jtable-busy-message { border-color: #772b2b; background-color: #ea2a2a; } + +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../lightcolor/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} diff --git a/lib/themes/lightcolor/report.png b/lib/themes/lightcolor/report.png new file mode 100644 index 00000000..c472bf7c Binary files /dev/null and b/lib/themes/lightcolor/report.png differ diff --git a/lib/themes/metro/blue/jtable.css b/lib/themes/metro/blue/jtable.css index 88429fe5..01162c6d 100644 --- a/lib/themes/metro/blue/jtable.css +++ b/lib/themes/metro/blue/jtable.css @@ -493,3 +493,36 @@ div.jtable-busy-message { background-color: #0b67cd; background-position: 8px; } +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../metro/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} diff --git a/lib/themes/metro/brown/jtable.css b/lib/themes/metro/brown/jtable.css index aa22a8f3..943f0bac 100644 --- a/lib/themes/metro/brown/jtable.css +++ b/lib/themes/metro/brown/jtable.css @@ -493,3 +493,37 @@ div.jtable-busy-message { background-color: #61380a; background-position: 8px; } +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../metro/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} + diff --git a/lib/themes/metro/crimson/jtable.css b/lib/themes/metro/crimson/jtable.css index 9c0344b2..42454790 100644 --- a/lib/themes/metro/crimson/jtable.css +++ b/lib/themes/metro/crimson/jtable.css @@ -493,3 +493,38 @@ div.jtable-busy-message { background-color: #a10000; background-position: 8px; } + +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../metro/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} + diff --git a/lib/themes/metro/darkorange/jtable.css b/lib/themes/metro/darkorange/jtable.css index 3590e760..3b134223 100644 --- a/lib/themes/metro/darkorange/jtable.css +++ b/lib/themes/metro/darkorange/jtable.css @@ -493,3 +493,37 @@ div.jtable-busy-message { background-color: #b8310a; background-position: 8px; } + +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../metro/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} diff --git a/lib/themes/metro/green/jtable.css b/lib/themes/metro/green/jtable.css index 6ad58287..5706ec22 100644 --- a/lib/themes/metro/green/jtable.css +++ b/lib/themes/metro/green/jtable.css @@ -493,3 +493,38 @@ div.jtable-busy-message { background-color: #008100; background-position: 8px; } + +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../metro/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} + diff --git a/lib/themes/metro/pink/jtable.css b/lib/themes/metro/pink/jtable.css index d980c038..d3303876 100644 --- a/lib/themes/metro/pink/jtable.css +++ b/lib/themes/metro/pink/jtable.css @@ -493,3 +493,36 @@ div.jtable-busy-message { background-color: #7d0085; background-position: 8px; } +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../metro/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} diff --git a/lib/themes/metro/purple/jtable.css b/lib/themes/metro/purple/jtable.css index 2b9affc4..be540a4d 100644 --- a/lib/themes/metro/purple/jtable.css +++ b/lib/themes/metro/purple/jtable.css @@ -493,3 +493,36 @@ div.jtable-busy-message { background-color: #3e1a98; background-position: 8px; } +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../metro/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} diff --git a/lib/themes/metro/red/jtable.css b/lib/themes/metro/red/jtable.css index 3c2e20a9..0d22bd94 100644 --- a/lib/themes/metro/red/jtable.css +++ b/lib/themes/metro/red/jtable.css @@ -493,3 +493,37 @@ div.jtable-busy-message { background-color: #c30000; background-position: 8px; } +form.jtable-dialog-form table.jtable-view-field-container-grid { + border-spacing: 25px 15px; + border-collapse: separate; + +} +table.jtable-view-field-container-grid tr.jtable-view-field-container-row td.jtable-view-field-container { + padding: 2px 0px 3px 0px; + border-bottom: 1px solid #ddd; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid tr.jtable-view-field-container-row:last-child td.jtable-view-field-container { + border: none; +} + +form.jtable-dialog-form table.jtable-view-field-container-grid div.jtable-view-label { + padding: 3px 3px; + font-size: 1.1em; + font-weight:bold; + color: #666; +} +form.jtable-dialog-form div.jtable-view { + padding: 4px; + max-width : 400px; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button { + background: url('../../metro/report.png') no-repeat; + width: 16px; + height: 16px; + opacity: 0.4; +} +div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-view-command-button:hover { + opacity: 0.8; +} + diff --git a/lib/themes/metro/report.png b/lib/themes/metro/report.png new file mode 100644 index 00000000..c472bf7c Binary files /dev/null and b/lib/themes/metro/report.png differ
') + .addClass('jtable-view-field-container') + .appendTo($RowContainer); + + CurrentColumnCount++; + if(CurrentColumnCount==ColumnCount) { + $RowContainer=$('