jsxgrid 2.0.0

package/src/fields/jsgrid.field.Xjsoneditor.js

@@ -0,0 +1,165 @@
+(function(jsGrid, $, undefined) {
+
+    // Standalone: does not extend jsGrid.TextAreaField, only jsGrid.Field.
+
+    var Field = jsGrid.Field;
+
+    var Xjsoneditor = function (config) {
+        Field.call(this, config);
+    };
+
+    Xjsoneditor.prototype = new Field({
+        autosearch: true,
+        readOnly: false,
+        templates: [],
+        closeText: 'Save',
+        editText: "Editor",
+        defaultSelected: null,//value to preset the filter input with, applied once on first filter render then reset
+
+        filterTemplate: function () {
+            if (!this.filtering)
+                return "";
+
+            var grid = this._grid,
+                $result = this.filterControl = this._createTextBox();
+
+            if (this.autosearch) {
+                $result.on("keypress", function (e) {
+                    if (e.which === 13) {
+                        grid.search();
+                        e.preventDefault();
+                    }
+                });
+            }
+
+            if (this.defaultSelected !== null) {
+                $result.val(this.defaultSelected);
+                this.defaultSelected = null;
+            }
+
+            return $result;
+        },
+
+        filterValue: function () {
+            return this.filterControl.val();
+        },
+
+        insertValue: function () {
+            return this.insertControl.val();
+        },
+
+        editValue: function () {
+            return this.editControl.val();
+        },
+
+        _createTextBox: function () {
+            return $("<input>").attr("type", "text")
+                .prop("readonly", !!this.readOnly);
+        },
+
+        _doModal: function (formContent, options, resultControl) {
+            return jsGrid.popup(formContent, options);
+        },
+
+        _createJsonEditor: function (json, mode) {
+            if (typeof JSONEditor === 'undefined') {
+                throw new Error("Xjsoneditor requires the 'jsoneditor' package to be loaded on the page.");
+            }
+
+            json = json || {};
+            if (typeof json !== 'object') {
+                json = JSON.parse(json);
+            }
+
+            var container = $('<div style="height: 500px;">');
+            $('body').append(container);
+            container = container[0];
+            var options = {
+                templates: this.templates,
+                modes: ['code', 'text', 'tree'], // allowed modes
+                onError: function (err) {
+                    alert(err.toString());
+                },
+                mode: mode || 'view'
+            };
+
+            return new JSONEditor(container, options, json);
+        },
+
+        itemTemplate: function (value, item) {
+            var f = this;
+
+            return $("<button>" + f.editText + "</button>").click(function () {
+                var editor = f._createJsonEditor(value);
+                f._doModal(editor.container, {
+                    onClose: function () {
+                        $(editor.container).remove();
+                        editor.destroy();
+                    }
+                });
+                return false;
+            });
+        },
+        insertTemplate: function () {
+            if (!this.inserting)
+                return "";
+
+            var f = this;
+
+            return this.insertControl = $("<textarea>").click(function () {
+                var editor = f._createJsonEditor({}, 'tree');
+                var ta = $(this);
+
+                f._doModal(editor.container, {
+                    closeText: f.closeText,
+                    onClose: function () {
+
+                        var json = editor.get();
+                        if (!$.isEmptyObject(json)) {
+                            ta.val(JSON.stringify(json));
+                        } else {
+                            ta.val({});
+                        }
+                        editor.destroy();
+
+                    }
+                });
+                return false;
+            });
+
+        },
+        editTemplate: function (value) {
+            if (!this.editing)
+                return this.itemTemplate.apply(this, arguments);
+
+
+            var f = this;
+
+            return this.editControl = $("<textarea>").val(value).click(function () {
+                var ta = $(this);
+                var editor = f._createJsonEditor(ta.val(), 'tree');
+
+
+                f._doModal(editor.container, {
+                    closeText: f.closeText,
+                    onClose: function () {
+
+                        var json = editor.get();
+                        if (!$.isEmptyObject(json)) {
+                            ta.val(JSON.stringify(json));
+                        } else {
+                            ta.val({});
+                        }
+                        editor.destroy();
+
+                    }
+                });
+                return false;
+            });
+        }
+
+    });
+
+    jsGrid.fields.Xjsoneditor = Xjsoneditor;
+
+}(jsGrid, jQuery));

package/src/fields/jsgrid.field.Xselect.js

@@ -0,0 +1,176 @@
+(function(jsGrid, $, undefined) {
+
+    // Standalone: does not extend jsGrid.SelectField, only jsGrid.Field.
+
+    var Field = jsGrid.Field;
+    var NUMBER_VALUE_TYPE = "number";
+
+    var Xselect = function (config) {
+        this.items = [];
+        this.selectedIndex = -1;
+        this.valueField = "";
+        this.textField = "";
+
+        if (config.valueField && config.items && config.items.length) {
+            var firstItemValue = config.items[0][config.valueField];
+            this.valueType = (typeof firstItemValue) === NUMBER_VALUE_TYPE ? NUMBER_VALUE_TYPE : "string";
+        }
+
+        this.sorter = this.valueType;
+
+        Field.call(this, config);
+    };
+
+    Xselect.prototype = new Field({
+        align: "center",
+        autosearch: true,
+        valueType: NUMBER_VALUE_TYPE,
+        pseudoElement: null,//pseudoElement that will be unsifted to start of select data in filters
+        select2: null,
+        defaultSelected: null,
+
+        itemTemplate: function (value) {
+            var items = this.items,
+                valueField = this.valueField,
+                textField = this.textField,
+                resultItem;
+
+            if (valueField) {
+                if (typeof(value) === "object") {
+                    resultItem = value;
+                } else {
+                    resultItem = $.grep(items, function (item) {
+                        return item[valueField] === value;
+                    })[0] || {};
+                }
+            } else {
+                resultItem = items[value];
+            }
+
+            var result = (textField ? resultItem[textField] : resultItem);
+
+            return (result === undefined || result === null) ? "" : result;
+        },
+
+        insertTemplate: function () {
+            if (!this.inserting)
+                return "";
+
+            return this.insertControl = this._createSelect();
+        },
+
+        editTemplate: function (value) {
+            if (!this.editing)
+                return this.itemTemplate.apply(this, arguments);
+
+            var $result = this.editControl = this._createSelect();
+            var editValue = value;
+            if (typeof(value) === "object") {
+                editValue = value[this.valueField];
+            }
+            (editValue !== undefined) && $result.val(editValue);
+            return $result;
+        },
+
+        insertValue: function () {
+            var val = this.insertControl.val();
+            return this.valueType === NUMBER_VALUE_TYPE ? parseInt(val || 0, 10) : val;
+        },
+
+        editValue: function () {
+            var val = this.editControl.val();
+            return this.valueType === NUMBER_VALUE_TYPE ? parseInt(val || 0, 10) : val;
+        },
+
+        filterTemplate: function () {
+            if (!this.filtering)
+                return "";
+            var data;
+            if (Array.isArray(this.items)) {
+                data = this.items.slice(0);
+                if (this.pseudoElement) {
+                    data.unshift(this.pseudoElement);
+                } else {
+                    var d = {};
+                    d[this.textField] = '';
+                    d[this.valueField] = null;
+                    data.unshift(d);
+                }
+            } else if (typeof this.items === 'object') {
+                data = Object.assign({}, this.items);
+                if ((typeof this.pseudoElement === 'object') && this.pseudoElement) {
+                    data = Object.assign({}, data, this.pseudoElement);
+                } else {
+                    data = Object.assign({}, {'': null}, data);
+                }
+            }
+            if (this.defaultSelected !== null) {
+                var valueField = this.valueField;
+                var targetValue = this.defaultSelected;
+                var foundIndex = -1;
+
+                $.each(data, function (index, item) {
+                    var value = valueField ? item[valueField] : index;
+                    if (value == targetValue) {
+                        foundIndex = index;
+                        return false;
+                    }
+                });
+                if (foundIndex !== -1) {
+                    this.selectedIndex = foundIndex;
+                }
+                this.defaultSelected = null;
+            }
+
+            var grid = this._grid,
+                $result = this.filterControl = this._createSelect(data);
+
+            if (this.autosearch) {
+                $result.on("change", function (e) {
+                    grid.search();
+                });
+            }
+
+            return $result;
+        },
+
+        filterValue: function () {
+            var val = this.filterControl.val();
+            return this.valueType === NUMBER_VALUE_TYPE ? parseInt(val || 0, 10) : val;
+        },
+
+        _createSelect: function (data) {
+            var $result = $("<select>"),
+                valueField = this.valueField,
+                textField = this.textField,
+                selectedIndex = this.selectedIndex;
+
+            $.each((data || this.items), function (index, item) {
+                var value = valueField ? item[valueField] : index,
+                    text = textField ? item[textField] : item;
+
+                var $option = $("<option>")
+                    .attr("value", value)
+                    .text(text)
+                    .appendTo($result);
+
+                $option.prop("selected", (selectedIndex === index));
+            });
+
+            $result.prop("disabled", !!this.readOnly);
+
+            if(this.select2){
+                var s2 = Object.assign({}, this.select2, {width: '100%'});
+                setTimeout(function() {
+                    $result.select2(s2);
+                }, 0);
+            }
+
+            return $result;
+        }
+
+    });
+
+    jsGrid.fields.Xselect = Xselect;
+
+}(jsGrid, jQuery));

package/src/fields/jsgrid.field.Xtextarea.js

@@ -0,0 +1,97 @@
+(function(jsGrid, $, undefined) {
+
+    // Standalone: does not extend jsGrid.TextAreaField, only jsGrid.Field.
+
+    var Field = jsGrid.Field;
+
+    var Xtextarea = function (config) {
+        Field.call(this, config);
+    };
+
+    Xtextarea.prototype = new Field({
+        autosearch: true,
+        readOnly: false,
+        maxShowSymbols: 50,
+        defaultSelected: null,//value to preset the filter input with, applied once on first filter render then reset
+
+        filterTemplate: function () {
+            if (!this.filtering)
+                return "";
+
+            var grid = this._grid,
+                $result = this.filterControl = this._createTextBox();
+
+            if (this.autosearch) {
+                $result.on("keypress", function (e) {
+                    if (e.which === 13) {
+                        grid.search();
+                        e.preventDefault();
+                    }
+                });
+            }
+
+            if (this.defaultSelected !== null) {
+                $result.val(this.defaultSelected);
+                this.defaultSelected = null;
+            }
+
+            return $result;
+        },
+
+        filterValue: function () {
+            return this.filterControl.val();
+        },
+
+        insertTemplate: function () {
+            if (!this.inserting)
+                return "";
+
+            return this.insertControl = this._createTextArea();
+        },
+
+        editTemplate: function (value) {
+            if (!this.editing)
+                return this.itemTemplate.apply(this, arguments);
+
+            var $result = this.editControl = this._createTextArea();
+            $result.val(value);
+            return $result;
+        },
+
+        insertValue: function () {
+            return this.insertControl.val();
+        },
+
+        editValue: function () {
+            return this.editControl.val();
+        },
+
+        _createTextBox: function () {
+            return $("<input>").attr("type", "text")
+                .prop("readonly", !!this.readOnly);
+        },
+
+        _createTextArea: function () {
+            return $("<textarea>").prop("readonly", !!this.readOnly);
+        },
+
+        itemTemplate: function (value, item) {
+            value = value == null ? '' : String(value);
+
+            if (value.length <= this.maxShowSymbols) {
+                return $("<div>").text(value);
+            }
+            var str = value.slice(0, this.maxShowSymbols);
+            var div = $("<div>").text(str + ' ...').one("click",function () {
+                div.text(value);
+                return false;
+            });
+
+            return div;
+        }
+
+    });
+
+    jsGrid.fields.Xtextarea = Xtextarea;
+
+}(jsGrid, jQuery));

package/src/fields/jsgrid.field.checkbox.js

@@ -0,0 +1,97 @@
+(function(jsGrid, $, undefined) {
+
+    var Field = jsGrid.Field;
+
+    function CheckboxField(config) {
+        Field.call(this, config);
+    }
+
+    CheckboxField.prototype = new Field({
+
+        sorter: "number",
+        align: "center",
+        autosearch: true,
+
+        itemTemplate: function(value) {
+            return this._createCheckbox().prop({
+                checked: value,
+                disabled: true
+            });
+        },
+
+        filterTemplate: function() {
+            if(!this.filtering)
+                return "";
+
+            var grid = this._grid,
+                $result = this.filterControl = this._createCheckbox();
+
+            $result.prop({
+                readOnly: true,
+                indeterminate: true
+            });
+
+            $result.on("click", function() {
+                var $cb = $(this);
+
+                if($cb.prop("readOnly")) {
+                    $cb.prop({
+                        checked: false,
+                        readOnly: false
+                    });
+                }
+                else if(!$cb.prop("checked")) {
+                    $cb.prop({
+                        readOnly: true,
+                        indeterminate: true
+                    });
+                }
+            });
+
+            if(this.autosearch) {
+                $result.on("click", function() {
+                    grid.search();
+                });
+            }
+
+            return $result;
+        },
+
+        insertTemplate: function() {
+            if(!this.inserting)
+                return "";
+
+            return this.insertControl = this._createCheckbox();
+        },
+
+        editTemplate: function(value) {
+            if(!this.editing)
+                return this.itemTemplate.apply(this, arguments);
+
+            var $result = this.editControl = this._createCheckbox();
+            $result.prop("checked", value);
+            return $result;
+        },
+
+        filterValue: function() {
+            return this.filterControl.get(0).indeterminate
+                ? undefined
+                : this.filterControl.is(":checked");
+        },
+
+        insertValue: function() {
+            return this.insertControl.is(":checked");
+        },
+
+        editValue: function() {
+            return this.editControl.is(":checked");
+        },
+
+        _createCheckbox: function() {
+            return $("<input>").attr("type", "checkbox");
+        }
+    });
+
+    jsGrid.fields.checkbox = jsGrid.CheckboxField = CheckboxField;
+
+}(jsGrid, jQuery));