$(function() { $("#jsGrid").jsGrid({ height: "90%", width: "100%", filtering: true, editing: true, sorting: true, paging: true, autoload: true, pageSize: 15, pageButtonCount: 5, deleteConfirm: "Do you really want to delete the client?", controller: db, fields: [ { name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married", sorting: false }, { type: "control" } ] }); }); $(function() { $("#jsGrid").jsGrid({ height: "90%", width: "100%", sorting: true, paging: true, data: db.clients, fields: [ { name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married" } ] }); }); $(function() { $("#jsGrid").jsGrid({ height: "auto", width: "100%", sorting: true, paging: false, autoload: true, controller: { loadData: function() { var d = $.Deferred(); $.ajax({ url: "http://services.odata.org/V3/(S(3mnweai3qldmghnzfshavfok))/OData/OData.svc/Products", dataType: "json" }).done(function(response) { d.resolve(response.value); }); return d.promise(); } }, fields: [ { name: "Name", type: "text" }, { name: "Description", type: "textarea", width: 150 }, { name: "Rating", type: "number", width: 50, align: "center", itemTemplate: function(value) { return $("<div>").addClass("rating").append(Array(value + 1).join("★")); } }, { name: "Price", type: "number", width: 50, itemTemplate: function(value) { return value.toFixed(2) + "$"; } } ] }); }); $(function() { $("#jsGrid").jsGrid({ height: "70%", width: "100%", editing: true, autoload: true, paging: true, deleteConfirm: function(item) { return "The client \"" + item.Name + "\" will be removed. Are you sure?"; }, rowClick: function(args) { showDetailsDialog("Edit", args.item); }, controller: db, fields: [ { name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married", sorting: false }, { type: "control", modeSwitchButton: false, editButton: false, headerTemplate: function() { return $("<button>").attr("type", "button").text("Add") .on("click", function () { showDetailsDialog("Add", {}); }); } } ] }); $("#detailsDialog").dialog({ autoOpen: false, width: 400, close: function() { $("#detailsForm").validate().resetForm(); $("#detailsForm").find(".error").removeClass("error"); } }); $("#detailsForm").validate({ rules: { name: "required", age: { required: true, range: [18, 150] }, address: { required: true, minlength: 10 }, country: "required" }, messages: { name: "Please enter name", age: "Please enter valid age", address: "Please enter address (more than 10 chars)", country: "Please select country" }, submitHandler: function() { formSubmitHandler(); } }); var formSubmitHandler = $.noop; var showDetailsDialog = function(dialogType, client) { $("#name").val(client.Name); $("#age").val(client.Age); $("#address").val(client.Address); $("#country").val(client.Country); $("#married").prop("checked", client.Married); formSubmitHandler = function() { saveClient(client, dialogType === "Add"); }; $("#detailsDialog").dialog("option", "title", dialogType + " Client") .dialog("open"); }; var saveClient = function(client, isNew) { $.extend(client, { Name: $("#name").val(), Age: parseInt($("#age").val(), 10), Address: $("#address").val(), Country: parseInt($("#country").val(), 10), Married: $("#married").is(":checked") }); $("#jsGrid").jsGrid(isNew ? "insertItem" : "updateItem", client); $("#detailsDialog").dialog("close"); }; }); $(function() { $("#jsGrid").jsGrid({ height: "80%", width: "100%", autoload: true, selecting: false, controller: db, fields: [ { name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married" } ] }); $("#sort").click(function() { var field = $("#sortingField").val(); $("#jsGrid").jsGrid("sort", field); }); }); $(function() { $("#jsGrid").jsGrid({ height: "70%", width: "100%", filtering: true, editing: true, inserting: true, sorting: true, paging: true, autoload: true, pageSize: 15, pageButtonCount: 5, deleteConfirm: "Do you really want to delete the client?", controller: db, fields: [ { name: "Name", type: "text", width: 150, validate: "required" }, { name: "Age", type: "number", width: 50, validate: { validator: "range", param: [18, 80] } }, { name: "Address", type: "text", width: 200, validate: { validator: "rangeLength", param: [10, 250] } }, { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name", validate: { message: "Country should be specified", validator: function(value) { return value > 0; } } }, { name: "Married", type: "checkbox", title: "Is Married", sorting: false }, { type: "control" } ] }); }); $(function() { jsGrid.locale("fr"); $("#jsGrid").jsGrid({ height: "70%", width: "100%", filtering: true, editing: true, inserting: true, sorting: true, paging: true, autoload: true, pageSize: 15, pageButtonCount: 5, controller: db, fields: [ { name: "Name", title: "Nom", type: "text", width: 150, validate: "required" }, { name: "Age", title: "Âge", type: "number", width: 50, validate: { validator: "range", param: [18,80] } }, { name: "Address", title: "Adresse", type: "text", width: 200, validate: { validator: "rangeLength", param: [10, 250] } }, { name: "Country", title: "Pays", type: "select", items: db.countries, valueField: "Id", textField: "Name" }, { name: "Married", title: "Marié", type: "checkbox", sorting: false }, { type: "control" } ] }); }); $(function() { $("#jsGrid").jsGrid({ height: "80%", width: "100%", autoload: true, paging: true, pageLoading: true, pageSize: 15, pageIndex: 2, controller: { loadData: function(filter) { var startIndex = (filter.pageIndex - 1) * filter.pageSize; return { data: db.clients.slice(startIndex, startIndex + filter.pageSize), itemsCount: db.clients.length }; } }, fields: [ { name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married" } ] }); $("#pager").on("change", function() { var page = parseInt($(this).val(), 10); $("#jsGrid").jsGrid("openPage", page); }); }); $(function() { $("#jsGrid").jsGrid({ height: "80%", width: "100%", filtering: true, editing: true, sorting: true, paging: true, autoload: true, pageSize: 15, pageButtonCount: 5, controller: db, fields: [ { name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married", sorting: false }, { type: "control", modeSwitchButton: false, editButton: false } ] }); $(".config-panel input[type=checkbox]").on("click", function() { var $cb = $(this); $("#jsGrid").jsGrid("option", $cb.attr("id"), $cb.is(":checked")); }); }); $(function() { $("#jsGrid").jsGrid({ height: "90%", width: "100%", autoload: true, paging: true, controller: { loadData: function() { var deferred = $.Deferred(); $.ajax({ url: 'http://api.randomuser.me/?results=40', dataType: 'jsonp', success: function(data){ deferred.resolve(data.results); } }); return deferred.promise(); } }, rowRenderer: function(item) { var user = item; var $photo = $("<div>").addClass("client-photo").append($("<img>").attr("src", user.picture.large)); var $info = $("<div>").addClass("client-info") .append($("<p>").append($("<strong>").text(user.name.first.capitalize() + " " + user.name.last.capitalize()))) .append($("<p>").text("Location: " + user.location.city.capitalize() + ", " + user.location.street)) .append($("<p>").text("Email: " + user.email)) .append($("<p>").text("Phone: " + user.phone)) .append($("<p>").text("Cell: " + user.cell)); return $("<tr>").append($("<td>").append($photo).append($info)); }, fields: [ { title: "Clients" } ] }); String.prototype.capitalize = function() { return this.charAt(0).toUpperCase() + this.slice(1); }; }); $(function() { $("#jsGrid").jsGrid({ height: "50%", width: "100%", autoload: true, confirmDeleting: false, paging: true, controller: { loadData: function() { return db.clients; } }, fields: [ { headerTemplate: function() { return $("<button>").attr("type", "button").text("Delete") .on("click", function () { deleteSelectedItems(); }); }, itemTemplate: function(_, item) { return $("<input>").attr("type", "checkbox") .prop("checked", $.inArray(item, selectedItems) > -1) .on("change", function () { $(this).is(":checked") ? selectItem(item) : unselectItem(item); }); }, align: "center", width: 50 }, { name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 } ] }); var selectedItems = []; var selectItem = function(item) { selectedItems.push(item); }; var unselectItem = function(item) { selectedItems = $.grep(selectedItems, function(i) { return i !== item; }); }; var deleteSelectedItems = function() { if(!selectedItems.length || !confirm("Are you sure?")) return; deleteClientsFromDb(selectedItems); var $grid = $("#jsGrid"); $grid.jsGrid("option", "pageIndex", 1); $grid.jsGrid("loadData"); selectedItems = []; }; var deleteClientsFromDb = function(deletingClients) { db.clients = $.map(db.clients, function(client) { return ($.inArray(client, deletingClients) > -1) ? null : client; }); }; }); $(function() { $("#jsGrid").jsGrid({ height: "70%", width: "100%", autoload: true, rowClass: function(item, itemIndex) { return "client-" + itemIndex; }, controller: { loadData: function() { return db.clients.slice(0, 15); } }, fields: [ { name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married", sorting: false } ], onRefreshed: function() { var $gridData = $("#jsGrid .jsgrid-grid-body tbody"); $gridData.sortable({ update: function(e, ui) { // array of indexes var clientIndexRegExp = /\s*client-(\d+)\s*/; var indexes = $.map($gridData.sortable("toArray", { attribute: "class" }), function(classes) { return clientIndexRegExp.exec(classes)[1]; }); alert("Reordered indexes: " + indexes.join(", ")); // arrays of items var items = $.map($gridData.find("tr"), function(row) { return $(row).data("JSGridItem"); }); console && console.log("Reordered items", items); } }); } }); }); $(function() { $("#jsGrid").jsGrid({ height: "85%", width: "100%", paging: true, pageSize: 15, pageButtonCount: 5, pagerContainer: "#externalPager", pagerFormat: "current page: {pageIndex} {first} {prev} {pages} {next} {last} total pages: {pageCount}", pagePrevText: "<", pageNextText: ">", pageFirstText: "<<", pageLastText: ">>", pageNavigatorNextText: "…", pageNavigatorPrevText: "…", data: db.clients, fields: [ { name: "Name", type: "text", width: 150 }, { name: "Age", type: "number", width: 50 }, { name: "Address", type: "text", width: 200 }, { name: "Country", type: "select", items: db.countries, valueField: "Id", textField: "Name" }, { name: "Married", type: "checkbox", title: "Is Married" } ] }); }); $(function() { var MyDateField = function(config) { jsGrid.Field.call(this, config); }; MyDateField.prototype = new jsGrid.Field({ sorter: function(date1, date2) { return new Date(date1) - new Date(date2); }, itemTemplate: function(value) { return new Date(value).toDateString(); }, insertTemplate: function(value) { return this._insertPicker = $("<input>").datepicker({ defaultDate: new Date() }); }, editTemplate: function(value) { return this._editPicker = $("<input>").datepicker().datepicker("setDate", new Date(value)); }, insertValue: function() { return this._insertPicker.datepicker("getDate").toISOString(); }, editValue: function() { return this._editPicker.datepicker("getDate").toISOString(); } }); jsGrid.fields.myDateField = MyDateField; $("#jsGrid").jsGrid({ height: "90%", width: "100%", inserting: true, editing: true, sorting: true, paging: true, data: db.users, fields: [ { name: "Account", width: 150, align: "center" }, { name: "Name", type: "text" }, { name: "RegisterDate", type: "myDateField", width: 100, align: "center" }, { type: "control", editButton: false, modeSwitchButton: false } ] }); });