项目中的评论页面与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 οnclick="openCommentBox(this)" replyid="${(item.questionId)!'0'}"> <a href="javascript:;" class="text-muted">回复</a> </span>
							              <span class="shrink" οnclick="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" οnclick="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"  οnclick="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:;" οnclick="getQuestionList('prev');" target="_self"> « </a></li>
              							<#list pageSliders as item>
	              							<li class=" <#if "${page}" == "${item_index+1}">active</#if> "><a href="javascript:;" οnclick="getQuestionList(this);" target="_self">${item_index+1}</a></li>
	              					    </#list>		
              							<li><a href="javascript:;" οnclick="getQuestionList('next');" target="_self"> » </a></li>
              							<li><a style="height:32px;"><input type="text" style="height:22px;" name="custompage" size="1" title="输入页码,按回车快速跳转" value="1" οnkeydοwn=" 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 οnclick="replyZhangKai(this)" answerid="${answer.answerId}"> <a href="javascript:;" class="text-muted">回复</a> </span>
										  <span class="replyshrink" οnclick="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" οnclick="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"  οnclick="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>






  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值