-----博客评论楼生成------

效果图：

 

 代码示例：

数据做成这样：
{1: {'nid': 1, 'content': '写得好', 'partent_id': None, 'child': [{'nid': 3, 'content': '真的好', 'partent_id': 1, 'child': [{'nid': 4, 'content': '一般般', 'partent_id': 3, 'child': []}]}]}, 2: {'nid': 2, 'content': '不怎么样', 'partent_id': None, 'child': []}, 3: {'nid': 3, 'content': '真的好', 'partent_id': 1, 'child': [{'nid': 4, 'content': '一般般', 'partent_id': 3, 'child': []}]}, 4: {'nid': 4, 'content': '一般般', 'partent_id': 3, 'child': []}, 5: {'nid': 5, 'content': '什么鬼', 'partent_id': None, 'child': []}}
 

#解
    comment_list = models.Comment.objects.all().values('reply_id','nid','content')#数据库 查询数据，以字典形式查询
    msg_list_dict2={}#定义一个空字典
    for item1 in comment_list:
        # print(item1)
        item1['child']=[]#添加一个child  的key
        item1['partent_id']=item1['reply_id']  #将回复的ID设置成partent_id
        del item1['reply_id'] # reply_id 已经没用了，所以删除掉
        msg_list_dict2[item1['nid']]=item1 #将整条记录赋给KEY为ID的值
-----现在是这样：
{1: {'child': [], 'nid': 1, 'content': '写得好', 'partent_id': None}, 2: {'child': [], 'nid': 2, 'content': '不怎么样', 'partent_id': None}, 3: {'child': [], 'nid': 3, 'content': '真的好', 'partent_id': 1}, 4: {'child': [], 'nid': 4, 'content': '一般般', 'partent_id': 3}, 5: {'child': [], 'nid': 5, 'content': '什么鬼', 'partent_id': None}}
result=[]#将 child里面添加自己的孩子数据
    for item1 in comment_list:
        pid=item1['partent_id']
        if pid:
            msg_list_dict2[pid]['child'].append(item1) #
        else:
            result.append(item1)

    from utils.comment import comment_tree #调用comment 处理数据 ，可在前端展示

    ret=comment_tree(comment_list)

    print(msg_list_dict2)

    return render(request,'comment.html',{'ret':ret,'result':result})

urils.comment.py文件代码示例：

def comment_tree(comment_list):
    """
    获取梯级评论
    :param comment_list:
    :return:
    """
    wrapper="<div class='comment'>"
    for row in comment_list:
        inner="<div class='content'>%s</div>"%(row['content'])
        wrapper+=inner
        if row['child']:
            wrapper+=comment_tree(row['child'])

    wrapper+='</div>'

    return wrapper

前端展示：

{#{% extends 'layout.html' %}#}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>content</title>
</head>
<body>

<div>
{% for con in content %}
{{ con.articledetail__content }}
{% endfor %}
</div>
<div id="commentArea">

</div>


<script src="/static/jquery-3.2.1.js"></script>
<script>


//    自定义方法format
    String.prototype.Format=function (arg) {
        /*
        console.log(this,arg)//this 就是asf(当前字符串), arg是参数(Format方法传入的参数 ）
                例如有一个字符串是这样：
                    this 就是 " i am {name} ,age {age}
                    arg 就是 '{name} {age}'
        return 111; 格式化之后获取的新内容
        */
        var temp=this.replace(/\{(\w+)\}/g,function (k,kk) {
                                                /* k 匹配到的是 {asf},然后kk再对上一次进行匹配得到的是asf,然后arg字典返回了一个,=*/
            return arg[kk];

        });
        return temp;
    };

//    v='{asf}';
//    v.Format;
  $(function () {
    $.ajax({
        url:'/comments',
        type:'GET',
        dataType:'JSON',
        success:function (arg) {
            if (arg.status){
                var comment=commentTree(arg.data);
                $('#commentArea').append(comment);
            }else{
                alter(arg.msg)
            }
        }
        })
    });

    function commentTree(commentList) {
        /*
        * commentList 是上面通过ajax 从后端获取的评论结果，
        *
        * */
        var comment_str="<div class='comment'>";
        $.each(
            commentList,function (k,row) {
                 /*k 是索引，row是字典里的值*/
                var temp="<div class='content'>{content}</div>".Format({content:row.content})
                comment_str+=temp;
                if (row.child.length()>0){
                    comment_str+=commentTree(row.child);
                }
            });

            comment_str+='</div>';
            return comment_str;
    }

/*
1、在前端调用对象方法时，通过调用类的prototype中的方法，可以像上面一样扩展

2、还可以写正则表达式 如：/\w+/ 加g则是表示全部，
3、还有个replace 方法，通过的方法是  ''.replace('tony','ha')
''.replace(/(\w+)/g,function(k,kk){return 结果;}) 这个结果就是替换的结果
 */
</script>
</body>
</html>
View Code

效果：

 

posted @ 2017-07-23 10:15  tonycloud  阅读(265)  评论(0)    收藏  举报