"jQuery Grid Bootstrap"
Bootstrap 3.3.0 Snippet by atatanasov

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdn.rawgit.com/atatanasov/gijgo/master/dist/combined/js/gijgo.min.js" type="text/javascript"></script> <link href="https://cdn.rawgit.com/atatanasov/gijgo/master/dist/combined/css/gijgo.min.css" rel="stylesheet" type="text/css" /> <div class="container-full"> <div class="row"> <div class="col-xs-8"> <form class="form-inline"> <div class="form-group"> <input type="text" class="form-control" id="txtQuery" placeholder="Search..."> </div> <button id="btnSearch" type="button" class="btn btn-default">Search</button> <button id="btnClear" type="button" class="btn btn-default">Clear</button> </form> </div> <div class="col-xs-4"> <button id="btnAdd" type="button" class="btn btn-default pull-right">Add New Record</button> </div> </div> <div class="row" style="margin-top: 10px"> <div class="col-xs-12"> <table id="grid"></table> </div> </div> </div> <p> Powered by <a href="http://gijgo.com/grid" target="_blank">jQuery Grid Bootstrap</a> from gijgo.com </p> <div id="dialog" style="hidden"> <input type="hidden" id="ID" /> <form> <div class="form-group"> <label for="Name">Name</label> <input type="text" class="form-control" id="Name"> </div> <div class="form-group"> <label for="PlaceOfBirth">Place Of Birth</label> <input type="text" class="form-control" id="PlaceOfBirth" /> </div> <button type="button" id="btnSave" class="btn btn-default">Save</button> <button type="button" id="btnCancel" class="btn btn-default">Cancel</button> </form> </div>
$(document).ready(function () { var data, grid, dialog; data = [ { 'ID': 1, 'Name': 'Hristo Stoichkov', 'PlaceOfBirth': 'Plovdiv, Bulgaria' }, { 'ID': 2, 'Name': 'Ronaldo Luís Nazário de Lima', 'PlaceOfBirth': 'Rio de Janeiro, Brazil' }, { 'ID': 3, 'Name': 'David Platt', 'PlaceOfBirth': 'Chadderton, Lancashire, England' }, { 'ID': 4, 'Name': 'Manuel Neuer', 'PlaceOfBirth': 'Gelsenkirchen, West Germany' }, { 'ID': 5, 'Name': 'James Rodríguez', 'PlaceOfBirth': 'Cúcuta, Colombia' }, { 'ID': 6, 'Name': 'Dimitar Berbatov', 'PlaceOfBirth': 'Blagoevgrad, Bulgaria' } ]; grid = $('#grid').grid({ dataSource: data, uiLibrary: 'bootstrap', columns: [ { field: 'ID', width: 32 }, { field: 'Name', sortable: true }, { field: 'PlaceOfBirth', title: 'Place Of Birth', sortable: true }, { title: '', field: 'Edit', width: 34, type: 'icon', icon: 'glyphicon-pencil', tooltip: 'Edit', events: { 'click': Edit } }, { title: '', field: 'Delete', width: 34, type: 'icon', icon: 'glyphicon-remove', tooltip: 'Delete', events: { 'click': Delete } } ], pager: { limit: 5 } }); dialog = $('#dialog').dialog({ title: 'Add/Edit Record', autoOpen: false, resizable: false, modal: true }); function Edit(e) { $('#ID').val(e.data.id); $('#Name').val(e.data.record.Name); $('#PlaceOfBirth').val(e.data.record.PlaceOfBirth); $('#dialog').dialog('open'); } 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(); } $('#btnAdd').on('click', function () { $('#ID').val(''); $('#Name').val(''); $('#PlaceOfBirth').val(''); $('#dialog').dialog('open'); }); $('#btnSave').on('click', Save); $('#btnCancel').on('click', function () { dialog.close(); }); $('#btnSearch').on('click', function () { var query, result; query = $('#txtQuery').val(); result = $.grep(data, function (e) { return e.Name.indexOf(query) > -1 || e.PlaceOfBirth.indexOf(query) > -1; }); grid.render(result); }); $('#btnClear').on('click', function () { $('#txtQuery').val(''); grid.render(data); }); });

Related: See More


Questions / Comments: