jTable version 2.0.0

All codebase revised and refactored.
All CSS re-written using less css. [#3]
Added metro style theme with 10 color options. [#2]
Added a basic theme that can be start point who want to create themes to
jTable.
Added methods: getRowByKey, selectRows. [#8]
Added field option: ajaxSettings.
Added feature: editing primary key's value. [#34]
Added feature: Allow updating a record with server response after
updateAction [#66]
Added ready-to-use localization scripts. [#67]
Fixed some issues. [#25, #29, #42, #46]
Set default values for key field as "edit: false" and "create: false"
Fixed some other minor bugs.
Removed standard theme.
Tested with latest jQuery libraries (jQuery v1.8.3 and jQuery UI
v1.9.2).

1 files changed, 376 insertions, 0 deletions

diff --git a/dev/jquery.jtable.forms.js b/dev/jquery.jtable.forms.js
new file mode 100644
index 0000000..7e3b1f1
--- /dev/null
+++ b/dev/jquery.jtable.forms.js
@@ -0,0 +1,376 @@
+/************************************************************************

+* FORMS extension for jTable (base for edit/create forms)               *

+*************************************************************************/

+(function ($) {

+

+    $.extend(true, $.hik.jtable.prototype, {

+

+        /************************************************************************

+        * PRIVATE METHODS                                                       *

+        *************************************************************************/

+

+        /* Submits a form asynchronously using AJAX.

+        *  This method is needed, since form submitting logic can be overrided

+        *  by extensions.

+        *************************************************************************/

+        _submitFormUsingAjax: function (url, formData, success, error) {

+            this._ajax({

+                url: url,

+                data: formData,

+                success: success,

+                error: error

+            });

+        },

+

+        /* Creates label for an input element.

+        *************************************************************************/

+        _createInputLabelForRecordField: function (fieldName) {

+            //TODO: May create label tag instead of a div.

+            return $('<div />')

+                .addClass('jtable-input-label')

+                .html(this.options.fields[fieldName].title);

+        },

+

+        /* Creates an input element according to field type.

+        *************************************************************************/

+        _createInputForRecordField: function (fieldName, value, record) {

+

+            //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.defaultValue;

+            }

+

+            //Use custom function if supplied

+            if (field.input) {

+                var $input = $(field.input({ value: value, record: record }));

+

+                //Add id attribute if does not exists

+                //TODO: Check if id is needed?

+                if (!$input.attr('id')) {

+                    $input.attr('id', 'Edit-' + fieldName);

+                }

+

+                return $input;

+            }

+

+            //Create input according to field type

+            if (field.type == 'date') {

+                return this._createDateInputForField(field, fieldName, value);

+            } else if (field.type == 'textarea') {

+                return this._createTextAreaForField(field, fieldName, value);

+            } else if (field.type == 'password') {

+                return this._createPasswordInputForField(field, fieldName, value);

+            } else if (field.type == 'checkbox') {

+                return this._createCheckboxForField(field, fieldName, value);

+            } else if (field.options) {

+                if (field.type == 'radiobutton') {

+                    return this._createRadioButtonListForField(field, fieldName, value);

+                } else {

+                    return this._createDropDownListForField(field, fieldName, value);

+                }

+            } else {

+                return this._createTextInputForField(field, fieldName, value);

+            }

+        },

+        

+        //Creates a hidden input element with given name and value.

+        _createInputForHidden: function (fieldName, value) {

+            if (value == undefined || value == null) {

+                value = "";

+            }

+

+            return $('<input type="hidden" value="' + value + '" name="' + fieldName + '" id="Edit-' + fieldName + '"></input>');

+        },

+

+        /* Creates a date input for a field.

+        *************************************************************************/

+        _createDateInputForField: function (field, fieldName, value) {

+            var $input = $('<input class="' + field.inputClass + '" id="Edit-' + fieldName + '" type="text"' + (value != undefined ? 'value="' + value + '"' : '') + ' name="' + fieldName + '"></input>');

+            var displayFormat = field.displayFormat || this.options.defaultDateFormat;

+            $input.datepicker({ dateFormat: displayFormat });

+            return $('<div />')

+                .addClass('jtable-input jtable-date-input')

+                .append($input);

+        },

+

+        /* Creates a textarea element for a field.

+        *************************************************************************/

+        _createTextAreaForField: function (field, fieldName, value) {

+            var $textArea = $('<textarea class="' + field.inputClass + '" id="Edit-' + fieldName + '" name="' + fieldName + '">' + (value || '') + '</textarea>');

+            return $('<div />')

+                .addClass('jtable-input jtable-textarea-input')

+                .append($textArea);

+        },

+

+        /* Creates a standart textbox for a field.

+        *************************************************************************/

+        _createTextInputForField: function (field, fieldName, value) {

+            var $input = $('<input class="' + field.inputClass + '" id="Edit-' + fieldName + '" type="text"' + (value != undefined ? 'value="' + value + '"' : '') + ' name="' + fieldName + '"></input>');

+            return $('<div />')

+                .addClass('jtable-input jtable-text-input')

+                .append($input);

+        },

+

+        /* Creates a password input for a field.

+        *************************************************************************/

+        _createPasswordInputForField: function (field, fieldName, value) {

+            var $input = $('<input class="' + field.inputClass + '" id="Edit-' + fieldName + '" type="password"' + (value != undefined ? 'value="' + value + '"' : '') + ' name="' + fieldName + '"></input>');

+            return $('<div />')

+                .addClass('jtable-input jtable-password-input')

+                .append($input);

+        },

+

+        /* Creates a checkboxfor a field.

+        *************************************************************************/

+        _createCheckboxForField: function (field, fieldName, value) {

+            var self = this;

+

+            //If value is undefined, get unchecked state's value

+            if (value == undefined) {

+                value = self._getCheckBoxPropertiesForFieldByState(fieldName, false).Value;

+            }

+

+            //Create a container div

+            var $containerDiv = $('<div />')

+                .addClass('jtable-input jtable-checkbox-input');

+

+            //Create checkbox and check if needed

+            var $checkBox = $('<input class="' + field.inputClass + '" id="Edit-' + fieldName + '" type="checkbox" name="' + fieldName + '" value="' + value + '" />')

+                .appendTo($containerDiv);

+

+            //Create display text of checkbox for current state

+            var $textSpan = $('<span>' + (field.formText || self._getCheckBoxTextForFieldByValue(fieldName, value)) + '</span>')

+                .appendTo($containerDiv);

+

+            //Check the checkbox if it's value is checked-value

+            if (self._getIsCheckBoxSelectedForFieldByValue(fieldName, value)) {

+                $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'));

+                $checkBox.attr('value', checkboxProps.Value);

+                $textSpan.html(field.formText || checkboxProps.DisplayText);

+            };

+

+            //Register to click event to change display text when state of checkbox is changed.

+            $checkBox.click(function () {

+                refreshCheckBoxValueAndText();

+            });

+

+            //Change checkbox state when clicked to text

+            if (field.setOnTextClick != false) {

+                $textSpan

+                    .addClass('jtable-option-text-clickable')

+                    .click(function() {

+                        if ($checkBox.is(':checked')) {

+                            $checkBox.attr('checked', false);

+                        } else {

+                            $checkBox.attr('checked', true);

+                        }

+

+                        refreshCheckBoxValueAndText();

+                    });

+            }

+

+            return $containerDiv;

+        },

+

+        /* Creates a drop down list (combobox) input element for a field.

+        *************************************************************************/

+        _createDropDownListForField: function (field, fieldName, value) {

+            //Create a container div

+            var $containerDiv = $('<div />')

+                .addClass('jtable-input jtable-dropdown-input');

+

+            //Create select element

+            var $select = $('<select class="' + field.inputClass + '" id="Edit-' + fieldName + '" name="' + fieldName + '"></select>')

+                .appendTo($containerDiv);

+

+            //add options

+            var options = this._getOptionsWithCaching(fieldName);

+            $.each(options, function (propName, propValue) {

+                $select.append('<option value="' + propName + '"' + (propName == value ? ' selected="selected"' : '') + '>' + propValue + '</option>');

+            });

+

+            return $containerDiv;

+        },

+        /* Creates a radio button list for a field.

+        *************************************************************************/

+        _createRadioButtonListForField: function (field, fieldName, value) {

+            //Create a container div

+            var $containerDiv = $('<div />')

+                .addClass('jtable-input jtable-radiobuttonlist-input');

+

+            //create radio buttons

+            var options = this._getOptionsWithCaching(fieldName);

+            var radioButtonIndex = 0;

+            $.each(options, function (propName, propValue) {

+

+                var $radioButtonDiv = $('<div class=""></div>')

+                    .addClass('jtable-radio-input')

+                    .appendTo($containerDiv);

+

+                var $radioButton = $('<input type="radio" id="Edit-' + fieldName + (radioButtonIndex++) + '" class="' + field.inputClass + '" name="' + fieldName + '" value="' + propName + '"' + ((propName == (value + '')) ? ' checked="true"' : '') + ' />')

+                    .appendTo($radioButtonDiv);

+

+                var $textSpan = $('<span></span>')

+                    .html(propValue)

+                    .appendTo($radioButtonDiv);

+

+                if (field.setOnTextClick != false) {

+                    $textSpan

+                        .addClass('jtable-option-text-clickable')

+                        .click(function() {

+                            if (!$radioButton.is(':checked')) {

+                                $radioButton.attr('checked', true);

+                            }

+                        });

+                }

+            });

+

+            return $containerDiv;

+        },

+

+        /* Gets display text for a checkbox field.

+        *************************************************************************/

+        _getCheckBoxTextForFieldByValue: function (fieldName, value) {

+            return this.options.fields[fieldName].values[value];

+        },

+

+        /* Returns true if given field's value must be checked state.

+        *************************************************************************/

+        _getIsCheckBoxSelectedForFieldByValue: function (fieldName, value) {

+            return (this._createCheckBoxStateArrayForFieldWithCaching(fieldName)[1].Value.toString() == value.toString());

+        },

+

+        /* Gets an object for a checkbox field that has Value and DisplayText

+        *  properties.

+        *************************************************************************/

+        _getCheckBoxPropertiesForFieldByState: function (fieldName, checked) {

+            return this._createCheckBoxStateArrayForFieldWithCaching(fieldName)[(checked ? 1 : 0)];

+        },

+

+        /* Calls _createCheckBoxStateArrayForField with caching.

+        *************************************************************************/

+        _createCheckBoxStateArrayForFieldWithCaching: function (fieldName) {

+            var cacheKey = 'checkbox_' + fieldName;

+            if (!this._cache[cacheKey]) {

+

+                this._cache[cacheKey] = this._createCheckBoxStateArrayForField(fieldName);

+            }

+

+            return this._cache[cacheKey];

+        },

+

+        /* Creates a two element array of objects for states of a checkbox field.

+        *  First element for unchecked state, second for checked state.

+        *  Each object has two properties: Value and DisplayText

+        *************************************************************************/

+        _createCheckBoxStateArrayForField: function (fieldName) {

+            var stateArray = [];

+            var currentIndex = 0;

+            $.each(this.options.fields[fieldName].values, function (propName, propValue) {

+                if (currentIndex++ < 2) {

+                    stateArray.push({ 'Value': propName, 'DisplayText': propValue });

+                }

+            });

+

+            return stateArray;

+        },

+

+        /* Gets options from cache if exists, else downloads and caches.

+        * TODO: Allow options to be a function and send record to the function.

+        *************************************************************************/

+        _getOptionsWithCaching: function (fieldName) {

+            var cacheKey = 'options_' + fieldName;

+            if (!this._cache[cacheKey]) {

+                var optionsSource = this.options.fields[fieldName].options;

+                //Build options according to it's source type

+                if (typeof optionsSource == 'string') {

+                    //It is an Url to rownload options

+                    this._cache[cacheKey] = this._downloadOptions(fieldName, optionsSource);

+                } else if (jQuery.isArray(optionsSource)) {

+                    //It is an array of options

+                    this._cache[cacheKey] = this._buildOptionsFromArray(optionsSource);

+                } else {

+                    //It is an object that it's properties are options, so use directly this object

+                    this._cache[cacheKey] = optionsSource;

+                }

+            }

+

+            return this._cache[cacheKey];

+        },

+

+        /* Download options for a field from server.

+        *************************************************************************/

+        _downloadOptions: function (fieldName, url) {

+            var self = this;

+            var options = {};

+

+            self._ajax({

+                url: url,

+                async: false,

+                success: function (data) {

+                    if (data.Result != 'OK') {

+                        self._showError(data.Message);

+                        return;

+                    }

+

+                    //Get options from incoming data

+                    for (var i = 0; i < data.Options.length; i++) {

+                        options[data.Options[i].Value] = data.Options[i].DisplayText;

+                    }

+                },

+                error: function () {

+                    var errMessage = self._formatString(self.options.messages.cannotLoadOptionsFor, fieldName);

+                    self._showError(errMessage);

+                }

+            });

+

+            return options;

+        },

+

+        /* Creates an options object (that it's property is value, value is displaytext)

+        *  from a simple array.

+        *************************************************************************/

+        _buildOptionsFromArray: function (optionsArray) {

+            var options = {};

+            for (var i = 0; i < optionsArray.length; i++) {

+                options[optionsArray[i]] = optionsArray[i];

+            }

+

+            return options;

+        },

+

+        /* Sets enabled/disabled state of a dialog button.

+        *************************************************************************/

+        _setEnabledOfDialogButton: function ($button, enabled, buttonText) {

+            if (!$button) {

+                return;

+            }

+

+            if (enabled != false) {

+                $button

+                    .removeAttr('disabled')

+                    .removeClass('ui-state-disabled');

+            } else {

+                $button

+                    .attr('disabled', 'disabled')

+                    .addClass('ui-state-disabled');

+            }

+

+            if (buttonText) {

+                $button

+                    .find('span')

+                    .text(buttonText);

+            }

+        }

+

+    });

+

+})(jQuery);