GIJGO
Examples
Documentation
Report a Bug
Download
Ajax Sourced Data
Local Data Source
HTML Sourced Data
Bootstrap 3
Bootstrap 4
Material Design
Angular 6
Formatting Sample
Template
Iniline Editing
Nested Grids
Connected Grids
Grid Localization
Grouping
Responsive Design 1
Responsive Design 2
Gijgo.com
Grid
Examples
HTML Sourced Data
Manage HTML Sourced Data
This example shows CRUD operations, sorting, paging and filtering with html (dom) sourced data
Preview
Front-End Code
Edit
<!DOCTYPE html> <html> <head> <title>Manage HTML Sourced Data</title> <meta charset="utf-8" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css" /> <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <link href="/Content/demo.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script> </head> <body> <div class="gj-margin-top-10"> <div class="gj-float-left"> <form class="display-inline"> <input id="txtName" type="text" placeholder="Name..." class="gj-textbox-md gj-display-inline-block gj-width-200" /> <input id="txtPlaceOfBirth" type="text" placeholder="Place Of Birth..." class="gj-textbox-md gj-display-inline-block gj-width-200" /> <button id="btnSearch" type="button" class="gj-button-md">Search</button> <button id="btnClear" type="button" class="gj-button-md">Clear</button> </form> </div> <div class="gj-float-right"> <button id="btnAdd" type="button" class="gj-button-md">Add New Record</button> </div> </div> <div class="gj-clear-both"></div> <div class="gj-margin-top-10"> <table id="grid"> <thead> <tr> <th width="56">ID</th> <th data-sortable="true">Name</th> <th data-field="PlaceOfBirth">Place Of Birth</th> <th width="64" data-tmpl="<span class='material-icons gj-cursor-pointer'>edit</span>"align="center" data-events="click: Edit"></th> <th width="64" data-tmpl="<span class='material-icons gj-cursor-pointer'>delete</span>" align="center" data-events="click: Delete"></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Hristo Stoichkov</td> <td>Plovdiv, Bulgaria</td> <td></td> <td></td> </tr> <tr> <td>2</td> <td>Ronaldo Luís Nazário de Lima</td> <td>Rio de Janeiro, Brazil</td> <td></td> <td></td> </tr> <tr> <td>3</td> <td>David Platt</td> <td>Chadderton, Lancashire, England</td> <td></td> <td></td> </tr> <tr> <td>4</td> <td>Manuel Neuer</td> <td>Gelsenkirchen, West Germany</td> <td></td> <td></td> </tr> <tr> <td>5</td> <td>James Rodríguez</td> <td>Cúcuta, Colombia</td> <td></td> <td></td> </tr> <tr> <td>6</td> <td>Dimitar Berbatov</td> <td>Blagoevgrad, Bulgaria</td> <td></td> <td></td> </tr> </tbody> </table> </div> <div id="dialog" class="gj-display-none" width="360" data-auto-open="false" data-modal="true"> <div data-role="body"> <input type="hidden" id="ID" /> <div class=""> <input type="text" class="gj-textbox-md" id="Name" placeholder="Name..."> </div> <div class="gj-margin-top-20"> <input type="text" class="gj-textbox-md" id="PlaceOfBirth" placeholder="Place Of Birth..." /> </div> </div> <div data-role="footer"> <button type="button" id="btnSave" class="gj-button-md">Save</button> <button type="button" id="btnCancel" class="gj-button-md">Cancel</button> </div> </div> <script type="text/javascript"> var grid, dialog; function Edit(e) { $('#ID').val(e.data.record.ID); $('#Name').val(e.data.record.Name); $('#PlaceOfBirth').val(e.data.record.PlaceOfBirth); dialog.open('Edit Player'); } function Delete(e) { if (confirm('Are you sure?')) { grid.removeRow(e.data.id - 1); } } function Save() { if ($('#ID').val()) { var id = parseInt($('#ID').val()); grid.updateRow(id, { 'ID': id, 'Name': $('#Name').val(), 'PlaceOfBirth': $('#PlaceOfBirth').val() }); } else { grid.addRow({ 'ID': grid.count(true) + 1, 'Name': $('#Name').val(), 'PlaceOfBirth': $('#PlaceOfBirth').val() }); } dialog.close(); } $(document).ready(function () { grid = $('#grid').grid({ primaryKey: 'ID', pager: { limit: 5 } }); dialog = $('#dialog').dialog(); $('#btnAdd').on('click', function () { $('#ID').val(''); $('#Name').val(''); $('#PlaceOfBirth').val(''); dialog.open('Add Player'); }); $('#btnSave').on('click', Save); $('#btnCancel').on('click', function () { dialog.close(); }); $('#btnSearch').on('click', function () { grid.reload({ Name: $('#txtName').val(), PlaceOfBirth: $('#txtPlaceOfBirth').val() }); }); $('#btnClear').on('click', function () { $('#srcName').val(''); $('#srcPlaceOfBirth').val(''); grid.reload({ Name: '', PlaceOfBirth: '' }); }); }); </script> </body> </html>