模仿jeesite框架寫一個樹結構的列表頁面(一般的數據表結構)


先上圖,看一下需要完成的列表頁的效果:

以區域樹結構列表為例子,大致就是要完成這個效果

 

  做這個需求之前,我大致閱讀了jeesite官方文檔( https://jeesite.gitee.io/docs/)關於樹表結構的文檔(帶有樹表兩個字的都看了看),查看了jeesite框架中自帶的頁面實例,又查看了項目中一些運用了樹結構的頁面以及后台代碼。

按照文檔走,我搞不出來這個東西。。。,為什么別的頁面用得好好的呢???最后發現,我的數據表結構有點問題,jeesite的這個樹結構如果要直接使用的話,需要數據庫表結構是符合jeesite所規定的結構。

直接上圖:這是區域表的表結構,其他運用了樹結構的表也跟它的結構一樣

 

而我的表:

 那這可如何是好。

 

 

我向公司麗姐請教了這個問題,很快麗姐有了一個方案,那就是模仿數據庫表結構建立相似的實體類,並且寫一個方法為屬性賦值

把這些樹表結構中的關鍵字段全都聲明到你自己的實體類中,然后寫一個獲取樹表數據列表的方法:

/**
 * 查詢樹表數據
 */
@RequiresPermissions("article:articleCategory:view")
@RequestMapping(value = "listData")
@ResponseBody
public List<ArticleCategory> listData(ArticleCategory articleCategory,HttpServletRequest request, HttpServletResponse response) {
   /*模擬樹結構表的數據*/
   if (StringUtils.isBlank(articleCategory.getParentCode())) {
      articleCategory.setParentId(0);
   }
   if(StringUtils.isNotBlank(articleCategory.getParentCode())){
      articleCategory.setParentId(Integer.parseInt(articleCategory.getParentCode()));
   }
   if (StringUtils.isNotBlank(articleCategory.getId())
         || StringUtils.isNotBlank(articleCategory.getTitle())){
      articleCategory.setParentId(null);//setParentId(null)
   }
   List<ArticleCategory> list = articleCategoryService.findList(articleCategory);
   if(list!=null&&list.size()>0){
      for(ArticleCategory category:list){
         category.setTreeLevel(category.getClassLayer()-1);
         category.setTreeSort(category.getSortId());
         //查詢是否有子節點
         ArticleCategory where = new ArticleCategory();
         where.setParentId(Integer.parseInt(category.getId()));
         List<ArticleCategory> child = articleCategoryService.findList(where);
         if(child==null||child.size()<=0){
            category.setTreeLeaf("1");
         }else{
            category.setTreeLeaf("0");
         }
         ArticleCategory parent = articleCategoryService.get(category.getParentId().toString());
         category.setParent(parent);
         if(parent==null){
            category.setParentCodes("0,");
         }else{
            category.setParentCodes("0"+parent.getClassList());
         }
         category.setParentCode(category.getParentId().toString());
      }
   }
   return list;
}

 前端列表頁面:

<script>
    // 初始化DataGrid對象
    $('#dataGrid').dataGrid({
        searchForm: $("#searchForm"),

        columnModel: [

            {header:'類別名稱', name:'title', index:'a.title', width:150, align:"left", frozen:true, formatter: function(val, obj, row, act){
                return '( '+row.id+' ) '+'<a href="${ctx}/article/articleCategory/form?id='+row.id+'" class="btnList" data-title="編輯區域">'+(val||row.id)+'</a>';
            }},
         {header:'調用別名', name:'callIndex', index:'a.callIndex', width:200, align:"left"},
            {header:'主鍵', name:'id', editable:true, hidden:true,edittype:'text',},
            {header:'排序', name:'sortId', width:63, align:"center", formatter: function(val, obj, row, act){
                var html = [];
                <% if(hasPermi('sys:menu:edit')){ %>
                    html.push('<input type="hidden" name="ids" value="'+row.id+'"/>');
                    html.push('<input name="sorts" type="text" value="'+row.sortId+'" style="width:50px;height:19px;margin:0;padding:0;text-align:center;border:1px solid #ddd">');
                <% }else{ %>
                    html.push(row.sortId);
                <% } %>
                return html.join('');
            }},

         {header:'操作', name:'actions', width:130, sortable:false, title:false, formatter: function(val, obj, row, act){
                var actions = [];
                <% if(hasPermi('sys:area:edit')){ %>
                    actions.push('<a href="${ctx}/article/articleCategory/form?channelId='+row.channelId+'&parentId='+row.id+'" class="btnList" title="添加子類">添加子類</a>&nbsp;&nbsp;|&nbsp;&nbsp;');
                    actions.push('<a href="${ctx}/article/articleCategory/form?channelId='+row.channelId+'&id='+row.id+'" class="btnList" title="修改">修改&nbsp;|&nbsp;');
                    actions.push('<a href="${ctx}/article/articleCategory/delete?id='+row.id+'" class="btnList" title="刪除" data-confirm="${text("本操作會刪除本類別及下屬子類別,是否繼續?")}">刪除&nbsp;');
                <% } %>
                return actions.join('');
            }}
        ],

        treeGrid: true,          // 啟用樹結構表格
        defaultExpandLevel: 0, // 默認展開的層次
        expandNodeClearPostData: 'title', // 展開節點清理請求參數數據(一般設置查詢條件的字段屬性,否則在查詢后,不能展開子節點數據)  // 加載成功后執行事件

        ajaxSuccess: function(data){

        }
    });
</script>
最后,這樣的思路雖然大致實現了樹結構列表,但是會有一個錯誤,至今沒有解決:

本來應該上級父類是箭頭,最下級子類是圓圈,而我的全部都是箭頭,點一下之后發送到后台controller方法中進行賦值之后才顯示出來圓圈,問題大概知道出在哪但是不知道如何解決,
如果大家有好的方案,可以評論區留言給我



免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM