先上圖,看一下需要完成的列表頁的效果:
以區域樹結構列表為例子,大致就是要完成這個效果
做這個需求之前,我大致閱讀了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> | '); actions.push('<a href="${ctx}/article/articleCategory/form?channelId='+row.channelId+'&id='+row.id+'" class="btnList" title="修改">修改 | '); actions.push('<a href="${ctx}/article/articleCategory/delete?id='+row.id+'" class="btnList" title="刪除" data-confirm="${text("本操作會刪除本類別及下屬子類別,是否繼續?")}">刪除 '); <% } %> return actions.join(''); }} ], treeGrid: true, // 啟用樹結構表格 defaultExpandLevel: 0, // 默認展開的層次 expandNodeClearPostData: 'title', // 展開節點清理請求參數數據(一般設置查詢條件的字段屬性,否則在查詢后,不能展開子節點數據) // 加載成功后執行事件 ajaxSuccess: function(data){ } }); </script>
最后,這樣的思路雖然大致實現了樹結構列表,但是會有一個錯誤,至今沒有解決:
本來應該上級父類是箭頭,最下級子類是圓圈,而我的全部都是箭頭,點一下之后發送到后台controller方法中進行賦值之后才顯示出來圓圈,問題大概知道出在哪但是不知道如何解決,
如果大家有好的方案,可以評論區留言給我