Редактируемые ячейки таблицы в компоненте Joomla

  Многие пишут свои компоненты, часто возникает необходимость редактировать записи в базе данных. Например если подключится к базе пользователей можно быстро найти скажем нарушителя спокойствия на сайте и принять меры. Данный пример это основа, его можно доработать и об этих доработках буду писать постепенно. Можно добавить фильтрацию по колонкам нажимая на название полей в шапке, накидать кучу полей для авто поиска информации.

В примере мы остановимся в примере на двух полях, но можно обойтись и одним. Будем  заниматься подбором поля инн и фирмы. Результат выводить в виде таблицы. Как это будет выглядеть как  отображено на фото ниже.

 Для чистоты кода мы создадим отдельный файл в корне сайта или откроем любую вьюшку любого компонента Joomla, лучше установить какой нибудь чистый компонент хелло. Итак очистим файл от всего, что нам мешает, команда странная решайте сами.  Первым делом вставим вещи которые мы менять не будем это слили css, подлюxение jquery(как это сделать поищите в гугле), чистсую таблицу, ну вроде все. Должно получится так:

<h2>Редактирование данных рекламодателей</h2>

<p><b> ENTER</b> - сохраняет поля редактирования</p>

<p><b> Esc</b> - отменяет редактирование и нечего не сохраняет</p>
<br>
<table>
<tr>
<td>
<p>
<b>Фирма:</b><br>
<input type="text" size="40" id="firma" class="sarch">
</p>
</td>
<td>
<p>
<b>ИНН:</b><br>
<input type="text" size="40" id="inn" class="sarch">
</p>
</td>
</tr>
</table>
<br>

<style>
#editInput{ }
#searchProfile .odd{
background: none repeat scroll 0 0 #E5F1F4;
}
#searchProfile .even{
background: none repeat scroll 0 0 #F8F8F8;
}
#searchProfile{
border: 1px solid !important;
width: 900px;
}
#searchProfile th{
background-color: #2E6AB1;
font-weight: bold;
color: white;
text-align: center;
}
#searchProfile td{
padding: 2px;
text-align: right;
border-bottom: 1px solid !important;
border-left: 1px solid !important;
}
#searchProfile td:hover{
cursor: pointer;
background: none repeat scroll 0 0 #fff;
}
</style>

 Теперь переместимся пониже и вставим следующий код в котором мы разместим все обработки нашей формы:

<script type="text/javascript">
jQuery(document).ready(function() {

//здесь будем писать все обработки

});
</script>

 Как сделать авто поиск я опишу попозже, думаю что лучше его всё таки написать, мы же перейдем сразу к таблице. У нас на экране таблица после авто поиска по нужным полям. Таблица устроена таким образом, что при генерации таблицы, tr имеет атрибут rel содержащий id записи в базе, а все td ячейки имеют класс равный названию поля ячейки в базе данных. В итоге все колонки имеют один класс и разный id по строке, своя крест на крест мы получаем ячейку.

генерация таблицы

$tr[] = '<tr rel="' . $v->profile_id . '" ' . ($n % 2 == 1 ? ' class="even" ' : ' class="odd" ') . ' >
<td class="name">' . $v->name . '</td>
<td class="inn">' . $v->inn . '</td>
<td class="firma">' . $v->firma . '</td>
<td class="passport">' . $v->passport . '</td>
<td class="street">' . $v->street . '</td> 
<td class="phoneMobi">' . $v->phoneMobi . '</td>
<td class="phoneDom">' . $v->phoneDom . '</td>
</tr>';

Заметьте что все ячейки нашей таблицы не имеют своего id но имеют свой класс, этим мы и воспользуемся. При нажатии на ячейку мы проверим на лету есть ли у неё id , если её нет то эта ячейка наш клиент для редактирования. кажется я внес сумятицу? забежав в перед паровоза, но сейчас вы все поймёте. Если это наш клиент мы присваиваем ему id  = updatetd, что означает что именно эта ячейка будет редактироваться. Теперь зная  подопытного мы получаем чем заполнена наша ячейка, очищаем её и вставляем input заполненный существующим значением ячейки, как это выглядит смотрим на фото выше. Вроде все просто давайте вставим следующий код:

$('#searchProfile td:not([id])').live("click", function(e) {
$(this).attr('id', 'updatetd')
var t = e.target || e.srcElement;
var elm_name = t.tagName.toLowerCase();
if (elm_name == 'input') {
return false;
}
$('#editInput').remove();
$('#editInput').remove();
var colonname = $(this).attr('class');
var id = $(this).attr('class');//название поля
var val = $(this).text().trim();//существующий текст
if (id == 'firma' || id == 'inn') {
$(this).html("<input id='editInput' type='text' value='" + $(this).text() + "' class='" + colonname + "' />");
$('#editInput').focus();
$('#editInput').blur(function() {
var val = $(this).val();
$(this).parent().empty().text(val);//заполняем ячеку новым текстом
$('#updatetd').removeAttr('id')
});
}

});//клик по ячейке

Теперь перейдем к сохранению наших изменений или отмене. Удобно в таких случаях вешать все на клавиши enter и esc. В следующем коду вы получаем значение из поля input и передаем его в наш скрипт php. При этом мы обращаемся к tr родителю нашей ячейки и получаем id записи в базе, берем класс редактируемой ячейки который равен полю редактируемой ячейки в базе сайта. Пр нажатии отмены мы просто возвращаем значение из инпута в ячейку без сохранения в базе.

код получения данных и обработки нажатия клавиш:

$(window).keydown(function(event) {
if (event.keyCode == 13) {
var id = $($('#searchProfile #editInput').parents().get(1)).attr('rel');
var value = $('#searchProfile #editInput').val();
var tdname = $('#searchProfile #editInput').attr('class');
// alert('сохраняю ' + id + '-' + value + '-' + tdname);
var url = "<?php echo CController::createUrl("redaktirovanie/save"); ?>";
$.post(
url,
{
id: id,
value: value,
tdname: tdname
},
function(result) { //обновляю и получю новую сторку в таблице
//alert(result.text);
$('#updatetd').text(value);
$('#editInput').remove(); //удалю форму редактирваония
$('#updatetd').removeAttr('id');//для удаления фона отработанной ячейки
},
"json"
);

}
if (event.keyCode == 27) {
var value = $('#searchProfile #editInput').val();
$('#updatetd').text(value);
$('#updatetd').removeAttr('id');//убираю подсветку ячейки
$('#editInput').remove();
}
});//сохранение или отмена

код получения данных из скрипта выше и запись в базу:

//сохранение
function actionSave() {
$pole = trim($_POST['tdname']);
$poletext = trim($_POST['value']);
$idzapis = (int) $_POST['id'];
if ($idzapis != 0) {
$model = new Profile();
$attributes = array($pole => $poletext);
Profile::model()->updateByPk($idzapis, $attributes);
}
$text = $pole . ' -' . $poletext . '- ' . $idzapis;
$result = array('text' => $text);
print json_encode($result);
}

 На что стоит обратить в этом примере, все значения лучше обрабатывать через trim() чтобы обрезать лишние пробелы на всякий случай.

• < Назад
• Вперёд >