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

2022-07-29 19:37:05 阅读：156 来源： 互联网

标签：树状 layui 前端 List 列表 featureInfos data id

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

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

以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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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