项目中的评论页面与js记录

页面：questionList.ftl

<!-- 问答列表 -->

<div class="comments">
<div class="media">
<ul class="media-list">
<#if (paginator.contents)?has_content>
<#list paginator.contents as item>
<li class="${item.questionId} media" style="border-bottom: 3px solid #eee;">
<div class="thread" style="margin-top:15px;margin-bottom:15px;padding-bottom:10px;border-bottom: 1px solid #eee;">
<div class="thread-header">
<a class="user-link user-avatar-link pull-right thread-author-avatar" href="/user/${item.userId}">
<#if item.avatar?has_content>
<img src="${item.avatar}">
<#else>
<img src="/resources/assets/img/default/avatar.png">
</#if>
</a>
<h2 class="thread-title">
<span class="label label-info">问</span>
${item.title}
</h2>
<div class="thread-metas">
By <a class="link-muted" href="/user/${item.userId}">${item.nickname}</a>
<span class="bullet mhs">•</span>
${prettyTime(item.dateAdded?string("yyyy-MM-dd HH:mm:ss"), "yyyy-MM-dd HH:mm:ss")}
</div>
</div>
<div class="thread-body">
<span style="font-family:Verdana;line-height:26px;background-color:#FFFFFF;">
${item.content}
</span>
</div>

<div class="answerBtn text-muted text-normal" style="margin-bottom:15px;">
<span class="glyphicon glyphicon-share-alt"></span>
<span onclick="openCommentBox(this)" replyid="${(item.questionId)!'0'}"> <a href="javascript:;" class="text-muted">回复</a>　</span>
<span class="shrink" onclick="hideCommentBox()"><a href="javascript:;" class="text-muted">收起</a>　</span>
<#if currentUser?has_content >
<#if "${currentUser.userId}"==item.userId >
<span class="glyphicon glyphicon-trash text-muted"></span>
<span><a href="javascript:;" class="text-muted" qid="${item.questionId}" data-url="/secure/course/thread/question/${item.questionId}/delete" onclick="deleteQuestion(this);" >删除</a>　</span>
</#if>
</#if>
<span>${(item.answerCount)!'0'}个回复　</span>
</div>

<!-- 回复框 -->
<div class="answerBox text-muted text-normal" style="display:none">
<form id="thread-post-form" class="thread-post-form form-vertical" method="post" action="/secure/course/${courseId}/thread/${item.questionId}/post" data-auto-submit="false" novalidate="novalidate" data-widget-cid="widget-0">
<div class="answerContent-panel form-group">
<textarea class="form-control answerContent" id="answerContent_${(item.questionId)!'0'}" name="answerContent" data-display="回复内容"></textarea>
</div>
<div class="answerBtn-panel form-group">
<div class="controls clearfix">
<#if currentUser?has_content >
<a href="javascript:;" qid="${(item.questionId)}" count="${item_index}" class="btn btn-primary pull-right" onclick="getanswerList(this);" >发布</a>
<#else>
<a class="btn btn-primary pull-right" href="#modal" data-toggle="modal" data-url="/ajaxlogin/modal">发布</a>
</#if>
</div>
</div>

</form>
</div>

</div>

<!-- 回复记录 -->
<div class="media-body" id="${(item.questionId)}" data-url="/course/${(item.courseId)}/thread/${(item.questionId)}/answer" style="padding-left:20px;">
<!-- 评论化问答 -->
<script>
jQuery(document).ready(function(){
var qid="${item.questionId}";
var url=$("#"+qid).attr("data-url");
$.get(url, function(data){
$("#"+qid).html(data);
});
});
</script>
</div> <!-- 回复记录 -->

</li>

</#list>
<#else>
<div class="col-md-8 col-md-offset-4">
还没有人问答
</div>
</#if>
</ul>
</div>

<#-- 分页链接 -->
<input type="hidden" class="page" name="page" value="${page}" >
<input type="hidden" class="pageSize" name="pageSize" value="${pageSize}" >
<input type="hidden" class="courseId" name="courseId" value="${courseId}" >
<input type="hidden" class="totalPages" name="totalPages" value="${totalPages}" >

<#if (paginator.totalPages > 1) >
<div class="col-md-8 col-md-offset-4">
<ul class="pagination">
<li><a href="javascript:;" onclick="getQuestionList('prev');" target="_self"> « </a></li>
<#list pageSliders as item>
<li class=" <#if "${page}" == "${item_index+1}">active</#if> "><a href="javascript:;" onclick="getQuestionList(this);" target="_self">${item_index+1}</a></li>
</#list>
<li><a href="javascript:;" onclick="getQuestionList('next');" target="_self"> » </a></li>
<li><a style="height:32px;"><input type="text" style="height:22px;" name="custompage" size="1" title="输入页码，按回车快速跳转" value="1" onkeydown=" if(event.keyCode==13){getSkipPage(this.value);}" > <span> / ${totalPages} 页 </span> </a></li>
</ul>
</div>
</#if>
</div>

<script src="/resources/kindeditor-4.1.7/kindeditor-min.js"></script>
<script src="/resources/kindeditor-4.1.7/lang/zh_CN.js"></script>
<script src="/resources/js/bootstrap-notify.js"></script>

<script>

jQuery(document).ready(function(){

//KindEditor.remove(".answerContent");
/*if ($("textarea.answerContent").length) {
var editor = KindEditor.create('textarea.answerContent', {
resizeType : 0,
allowPreviewEmoticons : false,
allowImageUpload : true,
uploadJson : '/secure/kindeditor/upload',
allowFileManager : false,
afterChange: function(){
this.sync();
},
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'link','source']
});
}*/
});

//ajax分页
function getQuestionList(obj){
var page=$(".page").val();
var totalPages= $(".totalPages").val();

if('next'==obj){
++page;
}else if('prev'==obj){
--page;
}else{
page=$(obj).text();
}

if(0>=page){
alert('这已经是首页');
return;
}else if(page>totalPages){
alert('已经超过最后一页了！');
return;
}

//alert(page);
var sUrl = "/course/${courseId}/thread/comment?page="+page;
$.ajax({
type:"get",
url:sUrl,
data:page,
success:function(data){
KindEditor.remove(".answerContent");
$("#questionList_panel").html(data);//回填数据
},
error:function(data){}
});
}

//ajax分页--跳页
function getSkipPage(obj){
var page=obj;
var totalPages= $(".totalPages").val();

if(0>=page){
alert('这已经是首页');
return;
}else if(page>totalPages){
alert('已经超过最后一页了！');
return;
}

//alert(page);
var sUrl = "/course/${courseId}/thread/comment?page="+page;
$.ajax({
type:"get",
url:sUrl,
data:page,
success:function(data){
KindEditor.remove(".answerContent");//清空之前的kindEditor
$("#questionList_panel").html(data);//回填数据
},
error:function(data){}
});
}

//发布回复列表
function getanswerList(obj){
var AUrl = $(obj).parents(".thread-post-form").attr("action");
var content = $(obj).parents(".answerBtn-panel").prev().children(".answerContent").val();
var qid=$(obj).attr("qid");
var count=$(obj).attr("count");
var page=$(".page").val();
var pageSize=$(".pageSize").val();

var arraycount=parseInt(count);
//alert(arraycount);
if(content==""){
Notify.danger("回复内容不能为空");
return;
}
$.post(AUrl,{answerContent:content},function(data){
Notify.success("发布成功");
//KindEditor.instances[arraycount].html("");
KindEditor.remove("#answerContent_"+qid);
//KindEditor("#answerContent_"+qid).val("");
$(".answerBox").hide();
$(".shrink").hide();
$("#"+qid).html(data);
});

}

//删除问题
function deleteQuestion(obj){
var dataUrl = $(obj).attr("data-url");
var qid=$(obj).attr("qid");
if(confirm("确定要删除吗？")){
$.post(dataUrl,{},function(){
Notify.success("删除成功");
$(obj).parents("."+qid).remove();
});
}
}

//删除答案
function deleteAnswer(obj){
var dataUrl = $(obj).attr("data-url");
var aid=$(obj).attr("aid");
if(confirm("确定要删除吗？")){
$.post(dataUrl,{},function(){
Notify.success("删除成功");
$(obj).parents("."+aid).remove();
});
}
}

</script>

<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
$(".answerBox").hide();
$(".shrink").hide();
});

function openCommentBox(obj){
$(".answerBox").hide();
$(".shrink").hide();
$(obj).next(".shrink").show();
$(obj).parents(".answerBtn").next(".answerBox").toggle();
//console.debug($("#answerContent_"+$(obj).attr("replyid")));
var editor = KindEditor.create("#answerContent_"+$(obj).attr("replyid"), {
resizeType : 0,
allowPreviewEmoticons : false,
allowImageUpload : true,
uploadJson : '/secure/kindeditor/upload',
allowFileManager : false,
afterChange: function(){
this.sync();
},
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'link','source']
});
editor.html("");

}

function hideCommentBox(){
$(".answerBox").hide();
$(".shrink").hide();
}

</script>


answerList页面：
<#-- 回复列表 -->

<#-- 函数 -->
<#include "/macros/macros.ftl" >

<ul class="thread-post-list media-list">
<#if answerList?has_content>
<#list answerList as answer>
<li id="post-30" class="${answer.answerId} thread-post media clearfix">
<a class="user-link user-avatar-link pull-left media-object" href="/user/${(answer.userId)!''}">
<#if answer.avatar?has_content>
<img src="${(answer.avatar)!''}">
<#else>
<img src="/resources/assets/img/default/avatar.png">
</#if>
</a>

<div class="thread-post-body media-body">
<div class="replyAnswerBtn media-heading">
<a href="/user/${(answer.userId)!''}" class="text-info" > ${(answer.nickname)!''}

<span class="text-muted">
<#if isTeacher(instructors, "${answer.userId}") > (老师)<#else> </#if>
<#if "${question.userId}"==answer.userId >(题主) <#else> </#if>
</span>

</a>
<#if answer.parentUserId?has_content>
<span class="text-muted">回复:</span>
<a href="/user/${(answer.parentUserId)!''}" class="text-info" > ${(answer.parentNickname)!''} </a>
</#if>

<span class="bullet">•</span>
<span class="text-muted"> ${prettyTime(answer.dateAdded?string("yyyy-MM-dd HH:mm:ss"), "yyyy-MM-dd HH:mm:ss")}</span>
<span class="bullet">•</span>

<span class="glyphicon glyphicon-share-alt"></span>
<span onclick="replyZhangKai(this)" answerid="${answer.answerId}"> <a href="javascript:;" class="text-muted">回复</a>　</span>
<span class="replyshrink" onclick="replyshouqi()"><a href="javascript:;" class="text-muted">收起</a>　</span>

<#if currentUser?has_content >
<#if "${currentUser.userId}"==answer.userId >
<span class="bullet">•</span>
<span class="glyphicon glyphicon-trash"></span>
<span><a href="javascript:;" class="text-muted" aid="${answer.answerId}" data-url="/secure/course/thread/answer/${answer.answerId}/delete" onclick="deleteAnswer(this);">删除</a>　</span>
</#if>
</#if>
</div>

<div class="thread-post-content"><span style="color:#222222;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:22.100000381469727px;">${(answer.content)!''}</span></div>
<!-- 回复框 -->
<div class="replyAnswerBox text-muted text-normal" style="margin-top:10px;display:none">
<form id="reply-post-form" class="reply-post-form form-vertical" method="post" action="/secure/course/${answer.courseId}/thread/${answer.questionId}/post" data-auto-submit="false" novalidate="novalidate" data-widget-cid="widget-0">
<div class="replyAnswerContent-panel form-group">
<textarea class="form-control replyAnswerContent" id="replyAnswerContent_${answer.answerId}" name="replyAnswerContent" data-display="回复内容" rows="5" style="width:100%;"></textarea>
</div>
<div class="replyAnswerBtn-panel form-group">
<div class="controls clearfix">
<#if currentUser?has_content >
<a href="javascript:;" qid="${(answer.questionId)}" parentId="${(answer.userId)}" parentName="${(answer.nickname)}" class="btn btn-primary pull-right" onclick="getReplyAnswerList(this);" >发布</a>
<#else>
<a class="btn btn-primary pull-right" href="#modal" data-toggle="modal" data-url="/ajaxlogin/modal">发布</a>
</#if>
</div>
</div>

</form>
</div>

</div>
</li>
</#list>
</#if>
</ul>

<script type="text/javascript">

// 收缩展开效果
$(document).ready(function(){
$(".replyAnswerBox").hide();
$(".replyshrink").hide();
});

function replyZhangKai(obj){
$(".replyAnswerBox").hide();
$(".replyshrink").hide();
$(obj).next(".replyshrink").show();
$(obj).parents(".replyAnswerBtn").nextAll(".replyAnswerBox").toggle();

KindEditor.create("#replyAnswerContent_"+$(obj).attr("answerid"), {
resizeType : 0,
allowPreviewEmoticons : false,
allowImageUpload : true,
uploadJson : '/secure/kindeditor/upload',
allowFileManager : false,
afterChange: function(){
this.sync();
},
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'link','source']
});
}

function replyshouqi(){
$(".replyAnswerBox").hide();
$(".replyshrink").hide();
}

//发布子回复列表
function getReplyAnswerList(obj){
var AUrl = $(obj).parents(".reply-post-form").attr("action");
var content = $(obj).parents(".replyAnswerBtn-panel").prev().children(".replyAnswerContent").val();
var qid=$(obj).attr("qid");
var parentId=$(obj).attr("parentId");
var parentName=$(obj).attr("parentName");

if(content==""){
Notify.danger("回复内容不能为空");
return;
}
$.post(AUrl,{parentUserId:parentId,parentNickName:parentName,answerContent:content},function(data){
Notify.success("保存成功");
$(".replyAnswerBox").hide();
$("#"+qid).html(data);
});

}

</script>