其他分享
首页 > 其他分享> > 如何用前端框架来做一个树状图列表

如何用前端框架来做一个树状图列表

作者:互联网

  相信很多小伙伴在看到树状图都很头疼,因为大部分的树形列表都是要去数据库动态查询数据,然后显示出来的,会跟着数据库字段变化而变化.

 

 在我点击左侧树状图,右侧空白区域会动态的刷新出不同页面的内容

 

 

以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