關於遞歸調用,實現樹形菜單的樣式

一:需求

  現有以需求就是把某一個帖子的所有評論展現出來。java

二:分析

  關於對帖子的評論分爲主評論和子評論,主評論就是對帖子的直接評論,子評論就是對評論的評論。ide

三:思路

  先獲取某一個帖子的所有主評論,遞歸判斷是否有子評論,獲取子評論。post

四:編碼

  實體類:ui

 1 import java.util.Date;
 2 import java.util.List;
 3 
 4 import com.fasterxml.jackson.annotation.JsonFormat;
 5 
 6 import lombok.Data;
 7 @Data
 8 public class BsChannelPostReply {
 9     private long replyId;
10     private String niceName;
11     @JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8") 
12     private Date replyDate;
13     private String content;
14     private long directRepliedId;//回覆的直接評論的replyId
15     private List<BsChannelPostReply> children;//下面的子評論
16 }

  

  獲取主評論列表,和遞歸所有子評論:編碼

 1 @Override
 2     @Datasource(value="community")//切換數據源
 3     public List<BsChannelPostReply> getMainReply(int postId) {
 4         // TODO Auto-generated method stub
 5         List<BsChannelPostReply> listMain=dao.getMainReply(postId);//獲取主評論
 6         if(listMain.size()>=0){//若是主評論不爲空
 7             for (BsChannelPostReply bsChannelPostReply : listMain) {
 8                 bsChannelPostReply.setChildren(getMainReplyChildren(bsChannelPostReply.getReplyId()));//加載子評論
 9             }
10         }
11         return listMain;
12     }
13 
14     @Override
15     @Datasource(value="community")//切換數據源
16     public List<BsChannelPostReply> getMainReplyChildren(long replyId) {
17         // TODO Auto-generated method stub
18         List<BsChannelPostReply> listChildren=dao.getMainReplyChildren(replyId);//根據當前的replayId獲取當前級子評論列表
19             if(listChildren.size()>=0){
20             for (BsChannelPostReply bsChannelPostReply : listChildren) {
21                 bsChannelPostReply.setChildren(getMainReplyChildren(bsChannelPostReply.getReplyId()));//在判斷當前子評論是否還有子評論,遞歸調用,直到沒有子評論
22             }
23         }
24         return listChildren;
25     }

 

五:效果

  根據這樣的遞歸調用就能夠實現理論上的獲取無極限的子評論列表。url

 6:前臺代碼以及遞歸獲取選中的評論及子評論

 1 <div style="width: 100%">
 2         <input type="button" id="del" value="刪除評論" class="easyui-linkbutton"/>
 3             <table title="相關評論" class="easyui-treegrid" style="width:100%;height:350px"
 4             data-options="
 5                 url: '/channelPost/getChannelPostActReply?postId=${post.postId}',
 6                 method: 'get',
 7                 rownumbers: true,
 8                 idField: 'replyId',
 9                 treeField: 'content',
10                 singleSelect:false
11             " id="dg2">
12         <thead>
13             <tr>
14                 <th data-options="field:'content'" width="70%">內容</th>
15                 <th data-options="field:'niceName'" width="10%" align="right">暱稱</th>
16                 <th data-options="field:'replyDate'" width="20%">時間</th>
17             </tr>
18         </thead>
19     </table>
20     </div>

 

 1 $("#del").click(function(){
 2          var selRow = $('#dg2').datagrid('getSelections');
 3          replys.splice(0,replys.length);
 4         if(selRow.length>=1){
 5             getreplys(selRow);
 6         }else{
 7             alert("請選擇要刪除的評論!");
 8         }
 9         replys=dedupe(replys);
10         for ( var i = 0; i <replys.length; i++){
11             console.log(replys[i]);
12         }
13      });
14      
15      function getreplys (selRow){//遞歸獲取選中的評論和子評論
16         for(var i=0;i<selRow.length;i++){
17             replys.push(selRow[i].replyId);
18             if(selRow[i].children.length>=1){
19                 getreplys(selRow[i].children);
20             }else{
21             }
22         }
23      }
24      $(function(){//申明全局變量
25          window.replys=new Array();
26      });
27      function dedupe(array){//去重
28          return Array.from(new Set(array));
29         }
相關文章
相關標籤/搜索