208 lines
7.2 KiB
HTML
208 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width"
|
||
/>
|
||
<title>Список пользователей</title>
|
||
<link
|
||
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
|
||
rel="stylesheet"
|
||
/>
|
||
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<h2>Список дел</h2>
|
||
<form name="userForm">
|
||
<input type="hidden" name="id" value="0" />
|
||
<div class="form-group">
|
||
<label for="name">Название:</label>
|
||
<input class="form-control" name="name" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="date">Дата:</label>
|
||
<input class="form-control" name="date" />
|
||
</div>
|
||
<div class="panel-body">
|
||
<button
|
||
type="submit"
|
||
class="btn btn-sm btn-primary"
|
||
>
|
||
Добавить
|
||
</button>
|
||
<a id="reset" class="btn btn-sm btn-primary"
|
||
>Стереть</a
|
||
>
|
||
</div>
|
||
</form>
|
||
<table
|
||
class="table table-condensed table-striped table-bordered"
|
||
>
|
||
<thead>
|
||
<tr>
|
||
<th>Id</th>
|
||
<th>Название</th>
|
||
<th>Дата</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
|
||
<script>
|
||
// Получение всех пользователей
|
||
function GetUsers() {
|
||
$.ajax({
|
||
url: '/api/users',
|
||
type: 'GET',
|
||
contentType: 'application/json',
|
||
success: function (users) {
|
||
var rows = '';
|
||
$.each(users, function (
|
||
index,
|
||
user
|
||
) {
|
||
// добавляем полученные элементы в таблицу
|
||
rows += row(user);
|
||
});
|
||
$('table tbody').append(rows);
|
||
},
|
||
});
|
||
}
|
||
// Получение одного пользователя
|
||
function GetUser(id) {
|
||
$.ajax({
|
||
url: '/api/users/' + id,
|
||
type: 'GET',
|
||
contentType: 'application/json',
|
||
success: function (user) {
|
||
var form =
|
||
document.forms['userForm'];
|
||
form.elements['id'].value = user.id;
|
||
form.elements['name'].value =
|
||
user.name;
|
||
form.elements['date'].value =
|
||
user.date;
|
||
},
|
||
});
|
||
}
|
||
// Добавление пользователя
|
||
function CreateUser(userName, userDate) {
|
||
$.ajax({
|
||
url: 'api/users',
|
||
contentType: 'application/json',
|
||
method: 'POST',
|
||
data: JSON.stringify({
|
||
name: userName,
|
||
date: userDate,
|
||
}),
|
||
success: function (user) {
|
||
reset();
|
||
$('table tbody').append(row(user));
|
||
},
|
||
});
|
||
}
|
||
// Изменение пользователя
|
||
function EditUser(userId, userName, userDate) {
|
||
$.ajax({
|
||
url: 'api/users',
|
||
contentType: 'application/json',
|
||
method: 'PUT',
|
||
data: JSON.stringify({
|
||
id: userId,
|
||
name: userName,
|
||
date: userDate,
|
||
}),
|
||
success: function (user) {
|
||
reset();
|
||
$(
|
||
"tr[data-rowid='" +
|
||
user.id +
|
||
"']"
|
||
).replaceWith(row(user));
|
||
},
|
||
});
|
||
}
|
||
|
||
// сброс формы
|
||
function reset() {
|
||
var form = document.forms['userForm'];
|
||
form.reset();
|
||
form.elements['id'].value = 0;
|
||
}
|
||
|
||
// Удаление пользователя
|
||
function DeleteUser(id) {
|
||
$.ajax({
|
||
url: 'api/users/' + id,
|
||
contentType: 'application/json',
|
||
method: 'DELETE',
|
||
success: function (user) {
|
||
console.log(user);
|
||
$(
|
||
"tr[data-rowid='" +
|
||
user.id +
|
||
"']"
|
||
).remove();
|
||
},
|
||
});
|
||
}
|
||
// создание строки для таблицы
|
||
var row = function (user) {
|
||
return (
|
||
"<tr data-rowid='" +
|
||
user.id +
|
||
"'><td>" +
|
||
user.id +
|
||
'</td>' +
|
||
'<td>' +
|
||
user.name +
|
||
'</td> <td>' +
|
||
user.date +
|
||
'</td>' +
|
||
"<td><a class='editLink' data-id='" +
|
||
user.id +
|
||
"'>Изменить</a> | " +
|
||
"<a class='removeLink' data-id='" +
|
||
user.id +
|
||
"'>Удалить</a></td></tr>"
|
||
);
|
||
};
|
||
// сброс значений формы
|
||
$('#reset').click(function (e) {
|
||
e.preventDefault();
|
||
reset();
|
||
});
|
||
|
||
// отправка формы
|
||
$('form').submit(function (e) {
|
||
e.preventDefault();
|
||
var id = this.elements['id'].value;
|
||
var name = this.elements['name'].value;
|
||
var date = this.elements['date'].value;
|
||
if (id == 0) CreateUser(name, date);
|
||
else EditUser(id, name, date);
|
||
});
|
||
|
||
// нажимаем на ссылку Изменить
|
||
$('body').on('click', '.editLink', function () {
|
||
var id = $(this).data('id');
|
||
GetUser(id);
|
||
});
|
||
// нажимаем на ссылку Удалить
|
||
$('body').on(
|
||
'click',
|
||
'.removeLink',
|
||
function () {
|
||
var id = $(this).data('id');
|
||
DeleteUser(id);
|
||
}
|
||
);
|
||
|
||
// загрузка пользователей
|
||
GetUsers();
|
||
</script>
|
||
</body>
|
||
</html> |