8.1 KiB
8.1 KiB
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
Файл
Сохранить изменения в таблице Сохранить изображение Сбросить
<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) {
$('#id').val(user.id);
$('#name').val(user.name);
$('#age').val(user.age);
},
});
}
// загрузка data изображения
var imageData = null;
$('input[type=file]').on('change', function(){
imageData = this.files;
});
// Добавление пользователя
function CreateUser(userName, userAge, userImage) {
if ($('input[type=file]').val() == "" || $('#name').val()== "" || $('#age').val() == "") {return};
if (imageData == null || imageData['0'].size <= 10000000) { //10мб
$.ajax({
url: 'api/users',
contentType: 'application/json',
method: 'POST',
data: JSON.stringify({
name: userName,
age: userAge,
image: userImage,
}),
success: function (user) {
if (user.id == null) {
user.id = 0
}
reset();
$('table tbody').append(row(user));
},
});
}
}
// Изменение пользователя
function EditUser(userId, userName, userAge, userImage) {
if (imageData == null || imageData['0'].size <= 10000000) { //10мб
$.ajax({
url: 'api/users',
contentType: 'application/json',
method: 'PUT',
data: JSON.stringify({
id: userId,
name: userName,
age: userAge,
image: userImage,
}),
success: function (user) {
reset();
$("tr[data-rowid='" + user.id + "']").replaceWith(row(user));
},
});
}
}
// сброс формы
function reset() {
$('#id').val(0);
$('#name').val("");
$('#age').val("");
}
// Удаление пользователя
function DeleteUser(id) {
$.ajax({
url: 'api/users/' + id,
contentType: 'application/json',
method: 'DELETE',
success: function (user) {
$(
"tr[data-rowid='" +
user.id +
"']"
).remove();
},
});
}
// создание строки для таблицы
var row = function (user) {
return (
"" +
user.id +
'' +
'' +
user.name +
' ' +
user.age +
' ' + '' +
"Изменить | " +
"Удалить"
);
};
// сохранение данных
$('#save').click(function (e) {
e.preventDefault();
var id = $('#id').val();
var name = $('#name').val();
var age = $('#age').val();
var image = $('input[type=file]').val()
image = image.replace("C:\\fakepath\\","")
if (id == 0){
CreateUser(name, age, image);
}
else {
EditUser(id, name, age, image);
}
});
// сброс значений формы
$('#reset').click(function (e) {
e.preventDefault();
reset();
});
// нажимаем на ссылку Изменить
$('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>
</html>
Список пользователей
Сохранить изменения в таблице Сохранить изображение Сбросить
| Id | Имя | возраст | картинка |
|---|