Здравствуйте. У меня имеется следующее задание:
Необходимо создать страницу, выводящую список пользователей в виде таблицы
- колонки: id, имя, возраст, город
Реализовать возможность редактирования данных пользователя в данной таблице со следующим функционалом:
- при клике на имя или возраст вместо текста появляется поле ввода с текстом внутри, после чего можно начинать редактировать. При нажатии Enter или увода фокуса из поля ввода, происходит сохранение данных через вызов Ajax. Поле ввода пропадает и снова остается текст.
- при клике на город, вместо текста появляется выпадающий список городов, выбранным значением является город пользователя. можно выбрать любой другой город или первую запись в списке (Город не указан), нажать Enter и значение изменится, процесс редактирования завершится
Дополнительные условия:
- Данные о пользователях хранятся в таблице users, о городах в таблице cities,таблицы связаны между собой по полю city_id
- Реализовать класс User. Передавая к конструктор в качестве параметра id пользователя, мы должны на выходе получить объект пользователя с заполненными данными.
- В классе User должна быть реализована статичная функция GetAllUsers, которая извлекает всех пользователей из таблицы. Страница со списком пользователей формируется на основе этих данных. Функция должна минимизировать количество обращений к базе данных. Не должно быть количество запросов равное количеству пользователей.
- Изменение данных происходит через объект
Я уже в принципе все сделал, кроме обновления записи в БД с помощью AJAX. Не могу разобраться, как найти к какому пользователю принадлежит ячейка чтобы обновить соответствующую запись. Так же хотелось бы узнать замечания по своему коду. Как не стоило делать? Что нужно поменять?
Код главной страницы
PHP:
скопировать код в буфер обмена
<html> <head> <title>AJAX</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="redact.js"></script> <script type="text/javascript"> </script> </script> </head> <body> <CENTER> <?PHP header( 'Content-Type: text/html; charset=utf-8' ); require_once('users.class.php'); users::getAllUsers(); echo '<table border="1">'; echo '<thead>'; echo '<tr>'; echo '<th>Id</th>'; echo '<th>Фамилия</th>'; echo '<th>Возраст</th>'; echo '<th>Город</th>'; echo '</tr>'; echo '</thead>'; echo '<tbody>'; echo '<tr>'; echo '<td>' . $data['users_id'] . '</td>'; echo '<td onclick="script_(this)" width=100 height=30>' . $data['users_name'] . '</td>'; echo '<td onclick="script_(this)" width=70 height=30>' . $data['users_age'] . '</td>'; echo '<td onclick="script2_(this)" width=150 height=30>' . $data['city'] . '</td>'; echo '</tr>'; } echo '</tbody>'; echo '</table>'; ?> <FORM NAME='FORM1' accept-charset="UTF-8"> Имя: <br> <INPUT type = "text" name = "users_name" align="center"> <br> Возраст: <br> <INPUT type = "text" name = "users_age"><br> Город: <br> <?PHP $i=0; FROM cities") { global $make; $make[$i]=$data1[0]; $i++; } echo '<SELECT id="mySelect" name="mySelect">'; for ($k=0;$k<$i;$k++) echo '<OPTION VALUE=" ' .$make[$k].'">' .$make[$k].' </option>'; echo '</SELECT>'; ?> <br> </CENTER> </FORM> </body> </html>
Файл Users.class.php
PHP:
скопировать код в буфер обмена
<?PHP // Класс для работы с базой данных class users { //*************************************************************** function __construct($id) { $db_host = 'localhost'; $db_name = 'users'; $db_username = 'root'; $db_password = ''; $db_table_to_show = 'users'; $connect_to_db = mysql_connect($db_host, $db_username, $db_password) $qr_result = mysql_query("select * from users where users_id='$id'") global $data1; return $data1; } //*************************************************************** static function getAllUsers(){ // Выбор данных об автомобиле header( 'Content-Type: text/html; charset=utf-8' ); $db_host = 'localhost'; $db_name = 'users'; $db_username = 'root'; $db_password = ''; $db_table_to_show = 'users'; $connect_to_db = mysql_connect($db_host, $db_username, $db_password) global $qr_result; FROM users JOIN cities WHERE cities.city_id = users.city ") //$data = mysql_fetch_array($qr_result); return $qr_result; } } ?>
И файл redact.js, в котором функции обработки ячейки по щелчку.
CODE ( javascript):
скопировать код в буфер обмена
function script_(whf) { if (whf.firstChild.nodeType==3) { name=whf.innerHTML; whf.innerHTML='<input width=100% onblur="Killer(this)" name="my"></input>' whf.firstChild.value=name; my.focus(); } } function script2_(whf) { if (whf.firstChild.nodeType==3) { name=whf.innerHTML; whf.innerHTML= '<select onblur="Killer(this)" name="menu" id="menu" size="1">'+ '</select>' var objSel = document.getElementById("menu"); var obj = document.getElementById("mySelect"); var i=0; //Создаем новый объект Option и заносим его в коллекцию options for (i;i<obj.options.length;i++) { var t = obj.options[i].text; var v = obj.options[i].value; objSel.options[i] = new Option(t, t); } whf.firstChild.value=name; menu.focus(); } } function Killer(whf) { name = whf.value; if (name=='') name='0'; whf.parentNode.innerHTML= name; whf.onblur = null; }
Спасибо за ранее
|