如何用前端框架来做一个树状图列表
作者:互联网
相信很多小伙伴在看到树状图都很头疼,因为大部分的树形列表都是要去数据库动态查询数据,然后显示出来的,会跟着数据库字段变化而变化.
在我点击左侧树状图,右侧空白区域会动态的刷新出不同页面的内容
以layui前端框架为示例,给各位展示树状图的实现
前端HTML、CSS 以及 layui框架的js代码
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>车型维护——树状图</title> <link rel="stylesheet" href="/layui/css/layui.css" media="all"> <link rel="stylesheet" href="/style/admin.css" media="all"> <style> #demo-test{ display: flex; } #tree{ width:200px; } </style> </head> <body> <div class="layui-body layui-fluid" id="demo-test" style="display: flex;flex-direction: row"> <div class="layui-card" style="margin-right:20px;" id="tree"> <div id="test1"></div> </div>
//这里的div 是展示点击后显示别的HTML网页会放入这个div里 <div style="width:100%;display:inline-block;" id="featureInfoTable"></div> </div> </body> <script src="/layui/layui.js"></script> <!--<script src="/layui/jquery-3.6.0.min.js"></script>--> <script> layui.config({ base: '/layuiadmin/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 })./*use(['index', 'contlist', 'table'], function(){ var table = layui.table ,form = layui.form; //监听搜索 form.on('submit(LAY-app-contlist-search)', function(data){ var field = data.field; //执行重载 table.reload('LAY-app-content-list', { where: field }); });*/ //这里是使用树形组件需要的函数,不懂的可以去layui官方文档里的树形组件查看 use(['tree','laydate','table','upload'], function(){ var tree = layui.tree ,$ = layui.$; $.ajax({ 'type':'post', 'dataType':'json', 'url':'/getFeature', data:{}, success:function (data) { tree.render({ elem: '#tree' //绑定元素 // ,id:'id' // ,showCheckbox:false ,data: data ,field:'featureName' //要动态显示的字段,要与实体类里的一致 ,isJump: true // ,showLine:true ,onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩 ,click: function(obj) { // console.log(obj.data); //得到当前点击的节点数据 // console.log(obj.state); //得到当前节点的展开状态:open、close、normal // console.log(obj.elem); //得到当前节点元素 loadTypeOf(obj); } }); } });
//这里的函数为携带id以及名称,跳转别的页面 function loadTypeOf(obj) { var url="intoTypeOF?id="+obj.data.tmVehicleFeatureId+"&type="+obj.data.featureType; $("#featureInfoTable").load(url) } }); </script> </html>
Controller视图层
//点击左侧树状图跳转 @RequestMapping("getFeature") @ResponseBody public Object getFeature(){ return groupService.getFeatureInfo(); } /** * 通过id获取子数据 * @param id * @return */ @RequestMapping("getFeatureList") @ResponseBody public Object getFeatureList(Integer id){ return groupService.getFeatureList(id); }
service
//树状图 根据id 先查询父节点 List<Feature> getFeatureInfo(); //树状图 根据id 查询子节点 List<Feature> getFeatureList(Integer id);
service实现类(最重要的部分,因为这里要用递归来实现)
@Override public List<Feature> getFeatureInfo() { List<Feature> featureInfos = new ArrayList<>(); List<Feature> featureInfo = groupMapper.getFeatureInfo(0); featureInfos=getListCityInfo(featureInfo); return featureInfos; } private List<Feature> getListCityInfo(List<Feature> featureInfos){ for (int i = 0; i < featureInfos.size(); i++) { List<Feature> firstmenus = groupMapper.getFeatureInfo(featureInfos.get(i).getTmVehicleFeatureId()); // featureInfos.get(i).SetTitle(featureInfos.get(i).getFeatureName()); if(firstmenus != null && firstmenus.size()>0){ List<Feature> list2= groupMapper.getFeatureInfo(featureInfos.get(i).getTmVehicleFeatureId()); featureInfos.get(i).setChildren(list2); getListCityInfo(featureInfos.get(i).getChildren()); } } return featureInfos; } @Override public List<Feature> getFeatureList(Integer id) { return groupMapper.getFeatureInfo(id); }
mapper层
//树状图 父节点与子节点都用一个方法去查询 List<Feature> getFeatureInfo(@Param("id") Integer id);
这里layui 框架有个title属性,是默认显示树状图的名字,所以要在实体类里定义一个title
private String title; private String featureNo; //这个字段是你想要动态显示的名字 public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getFeatureNo() { return featureNo; } public void setFeatureNo(String featureNo) { //把你想动态显示的名字,放进title里. layui框架会默认帮你显示 this.setTitle(featureNo); this.featureNo = featureNo == null ? null : featureNo.trim(); }
标签:树状,layui,前端,List,列表,featureInfos,data,id 来源: https://www.cnblogs.com/yyk-/p/16533244.html