Skip to content

Commit c5dd67c

Browse files
wenzhixinwenzhixin
committed
Add crud example.
1 parent d9c98a0 commit c5dd67c

File tree

4 files changed

+238
-1
lines changed

4 files changed

+238
-1
lines changed

‎assets/bootstrap-table

‎crud/README.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
## CRUD Bootstrap Table Example
2+
3+
* Install
4+
```
5+
# linux maybe you need sudo
6+
npm install -g json-server
7+
```
8+
9+
* Run
10+
```
11+
json-server -p 3001 db.json
12+
```

‎crud/db.json

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"list": [
3+
{
4+
"id": 1,
5+
"name": "bootstrap-table",
6+
"stargazers_count": 2156,
7+
"forks_count": 633,
8+
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features."
9+
},
10+
{
11+
"id": 2,
12+
"name": "multiple-select",
13+
"stargazers_count": 660,
14+
"forks_count": 260,
15+
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
16+
},
17+
{
18+
"id": 3,
19+
"name": "bootstrap-table-examples",
20+
"stargazers_count": 133,
21+
"forks_count": 107,
22+
"description": "Bootstrap table examples"
23+
},
24+
{
25+
"id": 4,
26+
"name": "bootstrap-show-password",
27+
"stargazers_count": 67,
28+
"forks_count": 28,
29+
"description": "Show/hide password plugin for twitter bootstrap."
30+
},
31+
{
32+
"id": 5,
33+
"name": "blog",
34+
"stargazers_count": 22,
35+
"forks_count": 11,
36+
"description": "my blog"
37+
}
38+
]
39+
}

‎crud/index.html

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CRUD Table</title>
5+
<meta charset="utf-8">
6+
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
7+
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
8+
<link rel="stylesheet" href="../assets/examples.css">
9+
<style>
10+
.update {
11+
color: #333;
12+
margin-right: 5px;
13+
}
14+
.remove {
15+
color: red;
16+
margin-left: 5px;
17+
}
18+
.alert {
19+
padding: 0 14px;
20+
margin-bottom: 0;
21+
display: inline-block;
22+
}
23+
</style>
24+
<script src="../assets/jquery.min.js"></script>
25+
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
26+
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
27+
<script src="../ga.js"></script>
28+
</head>
29+
<body>
30+
<div class="container">
31+
<h1>CRUD Table</h1>
32+
<p class="toolbar">
33+
<a class="create btn btn-default" href="javascript:">Create Item</a>
34+
<span class="alert"></span>
35+
</p>
36+
<table id="table"
37+
data-show-refresh="true"
38+
data-show-columns="true"
39+
data-search="true"
40+
data-query-params="queryParams"
41+
data-toolbar=".toolbar">
42+
<thead>
43+
<tr>
44+
<th data-field="name">Name</th>
45+
<th data-field="stargazers_count">Stars</th>
46+
<th data-field="forks_count">Forks</th>
47+
<th data-field="description">Description</th>
48+
<th data-field="action"
49+
data-align="center"
50+
data-formatter="actionFormatter"
51+
data-events="actionEvents">Action</th>
52+
</tr>
53+
</thead>
54+
</table>
55+
</div>
56+
57+
<div id="modal" class="modal fade">
58+
<div class="modal-dialog">
59+
<div class="modal-content">
60+
<div class="modal-header">
61+
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
62+
<h4 class="modal-title"></h4>
63+
</div>
64+
<div class="modal-body">
65+
<div class="form-group">
66+
<label>Name</label>
67+
<input type="text" class="form-control" name="name" placeholder="Name">
68+
</div>
69+
<div class="form-group">
70+
<label>Stars</label>
71+
<input type="number" class="form-control" name="stargazers_count" placeholder="Stars">
72+
</div>
73+
<div class="form-group">
74+
<label>Forks</label>
75+
<input type="number" class="form-control" name="forks_count" placeholder="Forks">
76+
</div>
77+
<div class="form-group">
78+
<label>Description</label>
79+
<input type="text" class="form-control" name="description" placeholder="Description">
80+
</div>
81+
</div>
82+
<div class="modal-footer">
83+
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
84+
<button type="button" class="btn btn-primary submit">Submit</button>
85+
</div>
86+
</div><!-- /.modal-content -->
87+
</div><!-- /.modal-dialog -->
88+
</div><!-- /.modal -->
89+
<script>
90+
91+
var API_URL = 'http://' + location.host + ':3001/list/';
92+
93+
var $table = $('#table').bootstrapTable({url: API_URL}),
94+
$modal = $('#modal').modal({show: false}),
95+
$alert = $('.alert').hide();
96+
97+
$(function () {
98+
// create event
99+
$('.create').click(function () {
100+
showModal($(this).text());
101+
});
102+
103+
$modal.find('.submit').click(function () {
104+
var row = {};
105+
106+
$modal.find('input[name]').each(function () {
107+
row[$(this).attr('name')] = $(this).val();
108+
});
109+
110+
$.ajax({
111+
url: API_URL + ($modal.data('id') || ''),
112+
type: $modal.data('id') ? 'put' : 'post',
113+
contentType: 'application/json',
114+
data: JSON.stringify(row),
115+
success: function () {
116+
$modal.modal('hide');
117+
$table.bootstrapTable('refresh');
118+
showAlert(($modal.data('id') ? 'Update' : 'Create') + ' item successful!', 'success');
119+
},
120+
error: function () {
121+
$modal.modal('hide');
122+
showAlert(($modal.data('id') ? 'Update' : 'Create') + ' item error!', 'danger');
123+
}
124+
});
125+
});
126+
});
127+
128+
function queryParams(params) {
129+
return {};
130+
}
131+
132+
function actionFormatter(value) {
133+
return [
134+
'<a class="update" href="javascript:" title="Update Item"><i class="glyphicon glyphicon-edit"></i></a>',
135+
'<a class="remove" href="javascript:" title="Delete Item"><i class="glyphicon glyphicon-remove-circle"></i></a>',
136+
].join('');
137+
}
138+
139+
// update and delete events
140+
window.actionEvents = {
141+
'click .update': function (e, value, row) {
142+
showModal($(this).attr('title'), row);
143+
},
144+
'click .remove': function (e, value, row) {
145+
if (confirm('Are you sure to delete this item?')) {
146+
$.ajax({
147+
url: API_URL + row.id,
148+
type: 'delete',
149+
success: function () {
150+
$table.bootstrapTable('refresh');
151+
showAlert('Delete item successful!', 'success');
152+
},
153+
error: function () {
154+
showAlert('Delete item error!', 'danger');
155+
}
156+
})
157+
}
158+
}
159+
};
160+
161+
function showModal(title, row) {
162+
row = row || {
163+
name: '',
164+
stargazers_count: 0,
165+
forks_count: 0,
166+
description: ''
167+
}; // default row value
168+
169+
$modal.data('id', row.id);
170+
$modal.find('.modal-title').text(title);
171+
for (var name in row) {
172+
$modal.find('input[name="' + name + '"]').val(row[name]);
173+
}
174+
$modal.modal('show');
175+
}
176+
177+
function showAlert(title, type) {
178+
$alert.attr('class', 'alert alert-' + type || 'success')
179+
.html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
180+
setTimeout(function () {
181+
$alert.hide();
182+
}, 3000);
183+
}
184+
</script>
185+
</body>
186+
</html>

0 commit comments

Comments
 (0)