-----博客评论楼生成------
效果图：
代码示例：
数据做成这样： {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>
效果：
