<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 id="tree"></div>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css" />
<div class="gj-margin-top-10">
<div class="gj-float-left">
<form class="display-inline">
<input id="txtQuery" type="text" class="gj-frm-ctrl gj-display-inline-block" />
<button id="btnSearch" type="button" class="gj-btn">Search</button>
<button id="btnClear" type="button" class="gj-btn">Clear</button>
</form>
</div>
<div class="gj-float-right">
<button id="btnAdd" type="button" class="gj-btn">Add New Record</button>
</div>
</div>
<div class="gj-clear-both"></div>
<div class="gj-margin-top-10">
<table id="grid"></table>
</div>
<p>Powered by <a href="http://gijgo.com/grid" target="_blank">jQuery Grid</a> by Gijgo.com</p>
<div id="dialog" class="gj-display-none">
<input type="hidden" id="ID" />
<form>
<div>
<label for="Name" class="gj-bold">Name:</label>
<input type="text" class="gj-frm-ctrl gj-width-240" id="Name">
</div>
<div class="gj-margin-top-10">
<label for="PlaceOfBirth" class="gj-bold">Place Of Birth:</label>
<input type="text" class="gj-frm-ctrl gj-width-240" id="PlaceOfBirth" />
</div>
<div class="gj-margin-top-10">
<button type="button" id="btnSave" class="gj-btn">Save</button>
<button type="button" id="btnCancel" class="gj-btn">Cancel</button>
</div>
</form>
</div>
.gj-btn {
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #000;
border-radius: 3px;
padding: 6px 10px;
cursor: pointer;
}
.gj-frm-ctrl {
display: block;
padding: 6px 12px;
font-size: 14px;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
}
.gj-margin-top-10 {
margin-top: 10px;
}
.gj-float-left {
float: left;
}
.gj-float-right {
float: right;
}
.gj-display-inline {
display: inline;
}
.gj-display-inline-block {
display: inline-block;
}
.gj-bold {
font-weight: bold;
}
.gj-display-none {
display: none;
}
.gj-width-240 {
width: 240px;
}
.gj-clear-both {
clear: both;
}
var data, grid, dialog;
$(document).ready(function() {
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,
columns: [
{ field: 'ID', width: 32 },
{ field: 'Name', sortable: true },
{ field: 'PlaceOfBirth', title: 'Place Of Birth', sortable: true },
{ width: 50, tmpl: '<a href="#">edit</a>', align: 'center', events: { 'click': Edit } },
{ width: 50, tmpl: '<a href="#">delete</a>', align: 'center', 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);
});
});
