模仿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> | '); 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方法中进行赋值之后才显示出来圆圈，问题大概知道出在哪但是不知道如何解决，
如果大家有好的方案，可以评论区留言给我
