​x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <title>Bootstrap 4 Table</title>
5
    <meta charset="utf-8" />
6
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
7
    <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
8
    <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
9
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
10
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
11
</head>
12
<body>
13
    <div class="container-fluid">
14
        <div class="row">
15
            <div class="col-9">
16
                <form class="form-inline">
17
                    <input id="txtName" type="text" placeholder="Name..." class="form-control mb-2 mr-sm-2 mb-sm-0" />
18
                    <input id="txtPlaceOfBirth" type="text" placeholder="Place Of Birth..." class="form-control mb-2 mr-sm-2 mb-sm-0" />
19
                  
20
                    <button id="btnSearch" type="button" class="btn btn-default">Search</button> &nbsp;
21
                    <button id="btnClear" type="button" class="btn btn-default">Clear</button>
22
                </form>
23
            </div>
24
            <div class="col-3">
25
                <button id="btnAdd" type="button" class="btn btn-default pull-right">Add New Record</button>
26
            </div>
27
        </div>
28
        <div class="row" style="margin-top: 10px">
29
            <div class="col-12">
30
                <table id="grid"></table>
31
            </div>
32
        </div>
33
    </div>
34
​
35
    <div id="dialog" style="display: none">
36
        <input type="hidden" id="ID" />
37
        <form>
38
            <div class="form-group">
39
                <label for="Name">Name</label>
40
                <input type="text" class="form-control" id="Name">
41
            </div>
42
            <div class="form-group">
43
                <label for="PlaceOfBirth">Place Of Birth</label>
44
                <input type="text" class="form-control" id="PlaceOfBirth" />
45
            </div>
46
            <button type="button" id="btnSave" class="btn btn-default">Save</button>
47
            <button type="button" id="btnCancel" class="btn btn-default">Cancel</button>
48
        </form>
49
    </div>
50
​
51
    <script type="text/javascript">
52
        var grid, dialog;
53
        function Edit(e) {
54
            $('#ID').val(e.data.id);
55
            $('#Name').val(e.data.record.Name);
56
            $('#PlaceOfBirth').val(e.data.record.PlaceOfBirth);
57
            dialog.open('Edit Player');
58
        }
59
        function Save() {
60
            var record = {
61
                ID: $('#ID').val(),
62
                Name: $('#Name').val(),
63
                PlaceOfBirth: $('#PlaceOfBirth').val()
64
            };
65
            $.ajax({ url: '/Players/Save', data: { record: record }, method: 'POST' })
66
                .done(function () {
67
                    dialog.close();
68
                    grid.reload();
69
                })
70
                .fail(function () {
71
                    alert('Failed to save.');
72
                    dialog.close();
73
                });
74
        }
75
        function Delete(e) {
76
            if (confirm('Are you sure?')) {
77
                $.ajax({ url: '/Players/Delete', data: { id: e.data.id }, method: 'POST' })
78
                    .done(function () {
79
                        grid.reload();
80
                    })
81
                    .fail(function () {
82
                        alert('Failed to delete.');
83
                    });
84
            }
85
        }
86
        $(document).ready(function () {
87
            grid = $('#grid').grid({
88
                primaryKey: 'ID',
89
                dataSource: '/Players/Get',
90
                uiLibrary: 'bootstrap4',
91
                columns: [
92
                    { field: 'ID', width: 48 },
93
                    { field: 'Name', sortable: true },
94
                    { field: 'PlaceOfBirth', title: 'Place Of Birth', sortable: true },
95
                    { title: '', field: 'Edit', width: 42, type: 'icon', icon: 'fa fa-pencil', tooltip: 'Edit', events: { 'click': Edit } },
96
                    { title: '', field: 'Delete', width: 42, type: 'icon', icon: 'fa fa-remove', tooltip: 'Delete', events: { 'click': Delete } }
97
                ],
98
                pager: { limit: 5, sizes: [2, 5, 10, 20] }
99
            });
100
            dialog = $('#dialog').dialog({
101
                uiLibrary: 'bootstrap4',
102
                iconsLibrary: 'fontawesome',
103
                autoOpen: false,
104
                resizable: false,
105
                modal: true
106
            });
107
            $('#btnAdd').on('click', function () {
108
                $('#ID').val('');
109
                $('#Name').val('');
110
                $('#PlaceOfBirth').val('');
111
                dialog.open('Add Player');
112
            });
113
            $('#btnSave').on('click', Save);
114
            $('#btnCancel').on('click', function () {
115
                dialog.close();
116
            });
117
            $('#btnSearch').on('click', function () {
118
                grid.reload({ name: $('#txtName').val(), placeOfBirth: $('#txtPlaceOfBirth').val() });
119
            });
120
            $('#btnClear').on('click', function () {
121
                $('#txtName').val('');
122
                $('#txtPlaceOfBirth').val('');
123
                grid.reload({ name: '', placeOfBirth: '' });
124
            });
125
        });
126
    </script>
127
</body>
128
</html>
129
​