редактируемая таблица

Aden · August 16, 2011

Ребята помоги разобраться с созданием редактируемой таблицы. Нужно создать таблицу с редактируемыми ячейками. По щелчку на ячейку открывалась форма редактирования в самой ячейке,для первого столбца получается, а как сделать для другого не знаю...

index.php


<?php
require_once("scripts/dbdata.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>WebListEditor</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="scripts/libs/prototype.js"></script>
<script type="text/javascript" src="scripts/libs/scriptaculous.js?load=effects,controls"></script>
<script type="text/javascript" src="scripts/tasks.js"></script>
</head>

<body>

<?php $con = connect(); ?>
<div id="content">
<?php
$res = mysql_query("SELECT * FROM listitems");
if ($res === FALSE) {
	echo "Ошибка при отправке запроса к БД:".mysql_error();
}
elseif (mysql_num_rows($res) == 0) {
	echo "<div id=\"noItems\">Записей нет</div>";
}
else {
?>
<p><b>Справочник пользователей:</b></p>
<ul id="list">
<?php
	$i = 0;
	while ($item = mysql_fetch_array($res, MYSQL_ASSOC)) {
		$i++;

?>

<li id="listNum_<?php echo $i - 1; ?>">

<table width="70" border="1">

  <tr>
<td width="70">

<div class='itemNum'><?php echo $i; ?></div>
</td>
<td width="120">
<div class='itemValue' onclick='closeOtherEditors(<?php echo $i - 1; ?>)'
id="itemId_<?php echo $item['id']; ?>"><?php echo $item['item']; ?></div>
</td>
<td>
<div class='utemValue' onclick='closeOtherEditors(<?php echo $i - 1; ?>)'
id="utemId_<?php echo $utem['id']; ?>"><?php echo $item['utem']; ?></div>
</td>
</tr>
</table>
</a>
<script type="text/javascript">
editors.push(addEditor("itemId_<?php echo $item['id'];?>",
	"<?php echo $item['id'];?>"));
</script>
</li>
<?php
	}
?>
</ul>
<?php
}
?>
</div>
<?php
mysql_free_result($res);
mysql_close($con);
?>
<form action="#" id="add_item_form">
<p>
<label for="item_value"></label>
<input type="text" id="item_value" size="20" />
<input type="text" id="utem_value" size="20" />
<input type="button" value="Добавить" onclick="addItem()" />
</p>
</form>
</body>
</html>

task.js

//глобальный массив для хранения редакторов
var editors = [];

//эта функция создает редактор для заданного элемента
function addEditor(item, id) {
	return new Ajax.InPlaceEditor(item,
		"scripts/updateitem.php",
		{

			highlightcolor: "#ffffff",
			size: "4",
			savingText: "Сохраняю...",
			callback: function(form, value) {
				return "value=" + value + "&id=" + id;
			}
		});
}
////////////
function addEditor(utem, id) {
	return new Ajax.InPlaceEditor(utem,
		"scripts/updateitem.php",
		{

			highlightcolor: "#ffffff",
			size: "4",
			savingText: "Сохраняю...",
			callback: function(form, value) {
				return "value=" + value + "&id=" + id;
			}
		});
}





///////////////


//эта функция добавляет элемент в список
function addItem() {
	//читаем введенное в форму значение
	var v = $('item_value').value;
	//формируем строку с параметрами запроса
	var pars = $H({value:v}).toQueryString();
	//выполняем запрос
	new Ajax.Request(
		"scripts/additem.php",
		{method:"post", parameters:pars, onSuccess:parseAddItemResponse}
	);
}

//эта функция вызывается если запрос на добавление нового
//элемента в список был выполнен
function parseAddItemResponse(transport) {
	var data = eval('(' + transport.responseText + ')');
	//проверяем были ли ошибки
	if (data.error_mes == null) {
		//удаляем сообщение об ошибке (если оно осталось после
		//предыдущего вызова)
		var errMes = $('err_mes');
		if (errMes != null) {
			Element.remove(errMes);
		}
		//удаляем строку "нет записей" (если она есть)
		var noItems = $('noItems');
		if (noItems != null) {
			Element.remove(noItems);
		}
		//вставляем полученный результат в конец списка
		var list = $('list');
		if (list == null) {
			var content = $('content');
			var newItem = new Insertion.Bottom(content, "<ul id=\"list\"></ul>");
			list = $('list');
		}
		//вставляем новый элемент в конец списка
		new Insertion.Bottom(list,
			"<li id='listNum_" + (editors.length) + "'><div class='itemNum'>" +
			(editors.length + 1) + "</div>" +
			"<div class='itemValue' " +
			"onclick='closeOtherEditors(" + editors.length +
			")' id='itemId_" + data.id + "'>" +
			data.value + "</div>" +
			"<a href='#' class='deleteLink' onclick='deleteItem(" +
			data.id + ")'><img src='css/images/delete.gif'" +
			"alt='Удалить' title='Удалить' /></a></li>");
		//создаем редактор для нового элемента и добавляем его в массив
		editors.push(addEditor("itemId_" + data.id, data.id));
		//подсвечиваем вставленный элемент
		var items = $$('#list li');
		new Effect.Highlight(items.last(),
			{startcolor:"#FDFFB9", endcolor:"#FFFFFF", duration:2.0});
	}
	else {
		//выводим сообщение об ошибке
		var form = $('add_item_form');
		new Insertion.After(form, "<div id=\"err_mes\">" +
			data.error_mes + "</div>");
	}
}

//эта функция удаляет элемент списка
function deleteItem(id) {
	var pars = $H({itemid:id}).toQueryString();
	new Ajax.Request(
		"scripts/delete.php",
		{method:"post", parameters:pars,
		onSuccess:function(transport) {
			var data = eval('(' + transport.responseText + ')');
			//удаляем элемент из списка
			var listElem = $('itemId_' + data.deletedId).parentNode.getAttribute('id');
			Element.remove(listElem);
			var listNum = listElem.substring(8);
			//обновляем номера у всех остальных записей
			var nodes = $$('#list li');
			nodes.each(
				function(node, index) {
					if (index >= listNum) {
						node.setAttribute('id', 'listNum_' + index);
						var innerNodes = $A(node.getElementsByTagName('div'));
						innerNodes[0].innerHTML = index + 1;
						innerNodes[1].setAttribute("onclick", "closeOtherEditors(" + index + ")");
					}
				}
			);
			//удаляем редактор из массива
			editors.splice(listNum,1);
		}}
	);
}

function closeOtherEditors(curEditor) {
	editors.each(
		function(editor, index) {
			if (index != curEditor) {
				editor.leaveEditMode();
			}
		}
	);
}

Int · August 16, 2011

НИЧЁСЕ! Просто в яваскрипте пробеги по всем ячейкам циклом, каждой сделай по onlick замену innerHTML на input или textarea с нужным name (можно брать из id ячейки или генерировать счётчиком). Кода будет на порядок меньше, если не на два. Ещё и жеквери зачем-то приплёл.

Aden · August 16, 2011

Так что нужно изменить, добавить?

ruslan.savenok · August 16, 2011

Я там не нашел метода edit ячейки, вот примерный набросок



function editableTable() {
  // ваша таблица
  var $table = $('table'),
      $td = $table.find('td');

  // вешаем ивент клика на ячейки 
  $td.click(function () {
    // создает инпут и кешируем значение ячейки
    var $input = $('<input>'),
        $data = $(this).text();

    // заменяем innerHTML ячейки на инпут
    $(this).html($input);
    // фокус на инпут
    $input.focus();

    // по onblur инпута
    $input.blur(function () {
      // шлем ajax запрос на сервак

      // тут надо бы анимашку что пошел запрос на сервак

      // а тут я бы проверил отличается ли новая дата от кэша $data
      $(this).html($input.val());

      $.ajax({
        url: 'обарботчик на сервере',
        // по саксесу
        success: function(data){
          // убираем анимашку
        }
      });
    });


  });
}

Edited August 16, 2011 by ruslan.savenok

Aden · August 17, 2011

что значит url: 'обработчик на сервер'.

Может есть пример, хоть на одной ячейке таблицы.

Int · August 17, 2011

Это значит, что после убирания мыши сервер что-то должен сделать с введёнными данными.

ruslan.savenok · August 17, 2011

что значит url: 'обработчик на сервер'.
Может есть пример, хоть на одной ячейке таблицы.

Если вы не знаете JS иphp то не лезьте туда и дайте эту задачу специалисту.

Это вам не сайты на jooml-e собирать.

Edited August 17, 2011 by ruslan.savenok

Sign In

редактируемая таблица

Question

Aden

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Int

Link to comment

Share on other sites

Aden

Link to comment

Share on other sites

ruslan.savenok

Link to comment

Share on other sites

Aden

Link to comment

Share on other sites

Int

Link to comment

Share on other sites

ruslan.savenok

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information