Построение дерева иерархии или дерева комментариев

[Admin]

На создание данной темы подвигло предложение пользователя Incognito, предложившего сделать полезную доработку нашей Формы добавления комментариев к темам в сообщении №67 темы Ваша форма "Добавить комментарий к теме:"

Т.к. процесс создания данного дерева не совсем легкий и будет иметь множество вопросов, то создал отдельную тему, посвященную именно построения дерева иерархии для комментариев.

[Incognito]

(15.07.2012 15:57:16)Admin писал(а):  Т.к. процесс создания данного дерева не совсем легкий и будет иметь множество вопросов, то создал отдельную тему, посвященную именно построения дерева иерархии для комментариев.

Жду с нетерпением!!!

[Admin]

Вот и возникла первая проблема:
Если мы используем постраничный вывод комментариев (например, по 10 штук на страницу), то как быть если к какому-либо сообщению есть 10 или более ответов? Либо на 9 сообщение на страничке поступило два ответа?

Просто уже накидал готовый скрипт, но он работает правильно только без разделения комментариев на странички. В случае, если добавить постраничный вывод, то родительский комментарий может оказаться на другой странице и, следовательно, все его дочерние комментарии не отображаются (на страничке становится, к примеру, 7 комментариев а не 10).

Возможно придется переделывать скрипт постраничного вывода, а не хотелось бы.

P.S. Вот создал маленькую тему Построение иерархического дерева из массива. Может кому пригодится.

[Incognito]

Ого!!! А можно ли сделать так чтобы скрипт постраничного вывода информации принимал во внимание (за единицу отсчёта) исключительно родительский комментарий?

P.S... В принципе даже готов отказаться от системы постраничного вывода ради возможности иерархического построения дерева комментариев.

[Admin]

Без постраничной навигации все работает отлично, но вот я еще вспомнил, что у Вас аватарки загружаются из другой базы, а это существенно усложняет работу.

Немного подумав нашел отличное решение по выводу аватарок, которое изложил в соответствующей теме, где мы обсуждали добавление аватарок.

Если тот вариант заработает, то данная проблема с аватарками можно считать решена.

По поводу постраничной навигации все-таки попробую что-нибудь придумать. Пока немного завал с работой, так что немного подождите.

[Incognito]

(16.07.2012 21:45:08)Admin писал(а):  По поводу постраничной навигации все-таки попробую что-нибудь придумать. Пока немного завал с работой, так что немного подождите.

Спасибо! Будем ждать!

[Admin]

Все сделал так, чтобы работало с разбивкой на странички. Разбивка работает по количеству родительских комментариев (самых первых). Если на какой-либо родительский комментарий поступил ответ, то общее количество комментариев для данной страницы увеличится чтобы не разрывать иерархию. Завтра вычищу скрипт от всего лишнего и постараюсь сделать его универсальным.

Пока правда не придумал как нарисовать линии сбоку от комментариев, которые будут соединять комментарии и ответы на них.

На данный момент дерево комментариев выглядит примерно так:



Когда доделаю, то сделаю на своем сайте тоже.

[Incognito]

(18.07.2012 22:40:59)Admin писал(а):  Когда доделаю, то сделаю на своем сайте тоже.

Конечно на своём в первую очередь , ведь это же прикольно! Круть несусветная!! А где кнопка "ответить"? ))
А вот с линиями было бы конечно вообще атас!!! )) Если хотите могу Вам подкинуть примеры скриптов в которых можно подсмотреть часть кода и не мучится с самостоятельным созданием долго. Если не хотите, то тогда удалите мои ссылки на пример:

1.) В этом можно выдернуть для нашего крутой WISIWIG редактор TinyMCE, с поддержкой смайликов QIP - rche.ru/835_kommentarii-na-php-ajax-mysql.html (смотрите Демо).
2.) А вот в этом как раз реализована красивая стрелочка для дочерних комментариев - php-s.ru/comments/commentics/ (тоже советую начать с DEMO).

В обоих примерах можно кстати выдернуть для нашего html разметку для формы добавления комментов: (ну там выронить, по центру, жирный текст, смайлики, вставка ссылки и т.д.) - но это уже на Ваше усмотрение, просто идейка...

[Admin]

Начнем потихоньку. Добавлять коды буду по частям, т.к. так легче выловить косяки.

Для начала начнем с кнопки "Ответить" и формы добавления ответа.

Для этого копируем следующий код себе на страничку:

Код:

<script type="text/javascript">
function defPosition(event) {
var x = y = 0;
if (document.attachEvent != null) {
    x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}
else if (!document.attachEvent && document.addEventListener) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
}
return {x:x, y:y};
}

function comm_on(event,p_id,first_p) {
    var event = event || window.event;
    document.getElementById('hint').style.left = defPosition(event).x - 550 + "px";
    document.getElementById('hint').style.top = defPosition(event).y + 15 + "px";
    document.add_comment.parent_id.value = p_id;
    document.add_comment.first_parent.value = first_p;
    document.getElementById('hint').style.display = 'block'
}

function comm_off() {
    document.getElementById('hint').style.display ="none"
}
</script>

Данный код предназначен для показа/скрытия формы добавления ответа к комментарию, а так же задает положение формы для ответа (в нашем случае чуть ниже и правее самой кнопки "Ответить").

Тут ничего сложного нет, просто добавляем и все.

Далее добавляем саму форму ответа. Изначально она не видна и появляется только при клике на кнопку "Ответить" (о том, как ее добавить напишу в конце, т.к. там не все так просто. Пока для тестирования используйте <span class="size14" onClick="comm_on(0,1,2)">Ответить</span>).

Пример формы:

Код:

<div id="hint" style="position:absolute; display: none;">
<?php echo '<form name="add_comment" method="POST" action="'.$_SESSION[mess_url].'#last">'; ?>
<table border="0" style="border: 1px solid #4874a3; border-radius:8px;" bgcolor="#7799ee" cellspacing="4" align="center">
  <tr>
   <td colspan="2" align="right"><b><font color="red" onClick="comm_off()">Закрыть</font></b><br>
    <?php
    $prov_cod=rand(100,980); $prov_cod_2=rand(1,19);

    echo '<textarea cols="65" rows="5" name="user_text" required>'.$_SESSION[comment_user_text].'</textarea>';
   echo '</td></tr><tr><td width="300">';

    echo '<b>Ваше имя: </b><input type="text" name="mess_login" maxlength="20" value="'.$_SESSION[comment_mess_login].'" required>';

   echo '</td><td align="right">';
    echo '<b>'.$prov_cod.' + '.$prov_cod_2.' = </b>';
    echo '<input type="hidden" name="prov_summa" value="'.md5($prov_cod+$prov_cod_2).'">';
    ?>
    <input type="text" name="contr_cod" maxlength="4" size="4" required>
    <input type="hidden" name="parent_id" value="0">
    <input type="hidden" name="first_parent" value="0">
    <input type="submit" value="Отправить">
   </td>
  </tr>
</table>
</form>
</div>

Данная форма очень похожа на обычную форму добавления комментариев, но в ней появляются дополнительные скрытые поля, ссылка "закрыть" имя самой формы и вся форма помещается в невидимый блок.

[Admin]

Отдельные шаги буду писать в отдельных сообщениях данной темы, чтобы не делать одно сообщение очень огромным.

Первым делом необходимо в MySQL в таблицу, содержащую комментарии, добавить новые столбцы, которые будут необходимы для построения иерархического дерева.
Добавляем после id два столбца: parent_id и first_parent. Тип столбцов - mediumint(9), по умолчанию - 0.

Далее, для того чтобы наши ответы на комментарии правильно добавлялись с соблюдением иерархии (ссылались на родительский комментарий) необходимо заменить запрос добавления комментариев

Код:

$result = mysql_query("insert into comment (date,theme,login,message) values ('".date("Y-m-d H:i:s")."','".$_SESSION[mess_url]."','".$_SESSION[comment_mess_login]."','".$_SESSION[comment_user_text]."')");

на такой:

Код:

if (isset($_POST[parent_id])) $result = mysql_query("insert into comment (parent_id,first_parent,date,theme,login,message) values ('".$_POST[parent_id]."','".$_POST[first_parent]."','".date("Y-m-d H:i:s")."','".$_SESSION[mess_url]."','".$_SESSION[comment_mess_login]."','".$_SESSION[comment_user_text]."')");
  else $result = mysql_query("insert into comment (date,theme,login,message) values ('".date("Y-m-d H:i:s")."','".$_SESSION[mess_url]."','".$_SESSION[comment_mess_login]."','".$_SESSION[comment_user_text]."')");

Что делать дальше напишу завтра.