摘要: 我要实现的就是下图的这种样式,原理需要在评论表添加两个主要字段 id 和 pid ,其他字段随意添加,比如文章id、回复时间、回复内容、回复人什么的。其中pid就是当前...
我要实现的就是下图的这种样式,
原理
需要在评论表添加两个主要字段 id 和 pid ,其他字段随意添加,比如文章id、回复时间、回复内容、回复人什么的。
其中pid就是当前已经回复过的评论的id。
从上图可以看出,里面每一层的pid就是就是他上一层评论的id。仔细观察下上面的布局。是不是很像PHP中的多维数组?如果你能想到,那么就简单了。
实现方法
前台 这个比较简单 就是div嵌div。然后设置div的border和margin padding就行了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | < div class = "comment" > 评论1 < div class = "comment" > 评论3 < div class = "comment" > 评论2 < div class = "comment" > 评论4 </ div > </ div > </ div > < div class = "comment" > 评论5 </ div > </ div > < div class = "comment" > 评论6 </ div > |
2、后台 用到了两次递归,首先用递归把数据库中的结果重组下,重组之后,然后用递归输出上面的那种前台代码即可。
直接读出表中的所有评论。可以得到如下数组
Php代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | Array ( [0] => Array ( [id] => 1 [pid] => [content] => 评论1 ) [1] => Array ( [id] => 2 [pid] => [content] => 评论2 ) [2] => Array ( [id] => 3 [pid] => 1 [content] => 评论3回复评论1 ) [3] => Array ( [id] => 4 [pid] => 2 [content] => 评论4回复评论2 ) [4] => Array ( [id] => 5 [pid] => 1 [content] => 评论5回复评论1 ) [5] => Array ( [id] => 6 [pid] => [content] => 评论6 ) ) |
然后我们就需要把这个数组重组成上面的那种留言板形式的
其中$array就是上面读取出来的数组,首先取出pid默认为空的,然后递归,在取出pid为当前评论id的数组
Php代码
1 2 3 4 5 6 7 8 9 10 11 | public static function tree( $array , $child = "child" , $pid = null) { $temp = []; foreach ( $array as $v ) { if ( $v [ 'pid' ] == $pid ) { $v [ $child ] = self::tree( $array , $child , $v [ 'id' ]); $temp [] = $v ; } } return $temp ; } |
重组后,可以得到下面的这个数组,可以看到,这个数组的样式已经和前台评论样式很像了。
Php代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | Array ( [0] => Array ( [id] => 1 [pid] => [content] => 评论1 [child] => Array ( [0] => Array ( [id] => 3 [pid] => 1 [content] => 评论3回复评论1 [child] => Array ( ) ) [1] => Array ( [id] => 5 [pid] => 1 [content] => 评论5回复评论1 [child] => Array ( ) ) ) ) [1] => Array ( [id] => 2 [pid] => [content] => 评论2 [child] => Array ( [0] => Array ( [id] => 4 [pid] => 2 [content] => 评论4回复评论1 [child] => Array ( ) ) ) ) [2] => Array ( [id] => 6 [pid] => [content] => 评论6 [child] => Array () ) ) |
得到上面的数组后 ,再用递归输出即可。
Php代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | public static function traverseArray( $array ) { foreach ( $array as $v ) { echo "<div class = 'comment' style='width: 100%;margin: 10px;background: #EDEFF0; padding: 20px 10px;border: 1px solid #777;'>"; echo $v [ 'content' ]; if ( $v [ 'child' ]) { self::traverseArray( $v [ 'child' ]); } echo "</div>" ; } } |
原理就是这样 ,就是重组下数组,然后遍历输出就行了。