java+bootstrap实现树状图

图片说明

图片说明

请教各位,第一张图是数据结构,第二个是要做成的原型。我自己不知道怎么设计这个树状图的类,请指点一下!

1个回答

可以写一个Tree的类
public class Tree extends BaseDomain {

private String id;

private String key;

private String icon;

private String title;

private String value;

private String text;

private String code;


private String mtype;

private String type;

/**
 * 部门的特殊个别字段
 * 1.部门 / 2.岗位 的编码
 */
private String number;

private Double order;
private Double sort;

private String href;

private String component;

private List<Tree<T>> children;

private String parentId;

private boolean hasParent = false;

private boolean hasChildren = false;

private Date createTime;

private Date modifyTime;

public void initChildren(){
    this.children = new ArrayList<>();
}

    }
在写一个工具类
public class TreeUtil {

protected TreeUtil() {

}

private final static String TOP_NODE_ID = "0";

/**
 * 用于构建菜单
 *
 * @param nodes nodes
 * @param <T>   <T>
 * @return <T> Tree<T>
 */
public static <T> Tree<T> build(List<Tree<T>> nodes) {
    if (nodes == null) {
        return null;
    }
    List<Tree<T>> topNodes = new ArrayList<>();
    nodes.forEach(node -> {
        String pid = node.getParentId();
        if (pid == null || TOP_NODE_ID.equals(pid)) {
            topNodes.add(node);
            return;
        }
        for (Tree<T> n : nodes) {
            String id = n.getId();
            if (id != null && id.equals(pid)) {
                if (n.getChildren() == null)
                    n.initChildren();
                n.getChildren().add(node);
                node.setHasParent(true);
                n.setHasChildren(true);
                n.setHasParent(true);
                return;
            }
        }
        if (topNodes.isEmpty())
            topNodes.add(node);
    });


    Tree<T> root = new Tree<>();
    root.setId("0");
    root.setParentId("");
    root.setHasParent(false);
    root.setHasChildren(true);
    root.setChildren(topNodes);
    root.setText("root");
    return root;
}

}
写完了这两个在写业务层
一个构建书的方法
private void buildTrees(List> trees, List menus, List ids) {
menus.forEach(menu -> {
ids.add(menu.getId().toString());
Tree tree = new Tree<>();
tree.setId(menu.getId().toString());
tree.setKey(tree.getId());
tree.setParentId(menu.getParentId().toString());
tree.setText(menu.getName());
tree.setTitle(tree.getText());
tree.setIcon(menu.getIcon());
tree.setComponent(menu.getComponent());
tree.setCreateTime(menu.getCreateTime());
tree.setCreateTime(menu.getCreateTime());
tree.setHref(menu.getHref());
tree.setSort(menu.getSort());
tree.setCode(menu.getCode());
tree.setMtype(menu.getMtype());
trees.add(tree);
});
}

        Map<String, Object> result = new HashMap<>();
        List<Dept> depts = findDepts(dept, request);
        List<Tree<Dept>> trees = new ArrayList<>();
        buildTrees(trees, depts);
        Tree<Dept> deptTree = TreeUtil.build(trees);

        result.put("rows", deptTree);
        result.put("total", depts.size());
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
java+bootstrap实现树状图

![图片说明](https://img-ask.csdn.net/upload/201905/29/1559098129_361422.png) ![图片说明](https://img-ask.csdn.net/upload/201905/29/1559098095_293323.png) 请教各位,第一张图是数据结构,第二个是要做成的原型。我自己不知道怎么设计这个树状图的类,请指点一下!

利用bootstrap制作柱状图

使用Oracle数据库,现有resume表,其中字段有一个diploma为学历,diploma表为学历表,字段为diploma_id,diploma_name 我现在想统计resume表中学历的人数,刚开始想用 Select count(diploma)from resume group by diploma,但是这么统计,前台没法处理,于是就写成了 Select count(diploma),diploma from resume group by diploma,然后这个显示的图如下![图片说明](https://img-ask.csdn.net/upload/201701/15/1484447459_170596.jpg) 我想做成这种的![图片说明](https://img-ask.csdn.net/upload/201701/15/1484447513_124994.jpg),应该怎么处理啊?求大神

Bootstrap+H5做出以下流程图

![图片说明](https://img-ask.csdn.net/upload/201708/21/1503289637_116581.jpg) 求码

java前端用的bootstrap,有没有好的办法实现视频上传视频上传和播放功能????

java前端用的bootstrap,有没有好的办法实现视频上传视频上传和播放功能????

bootstrap分页功能实现

bootstrap可否实现分页原理是什么,可以将后台查询出的数据全部返回到前台直接进行分页吗

bootstrap里怎么做图片的横向滚动呢?

bootstrap里怎么做图片的横向滚动呢? 我看到的基本都是竖的,怎么修改呢?

bootstrap怎么实现鼠标悬停在img上面之后切换照片

向各位大佬请教: <div class="tab-pane fade in active" id="home"> <img alt="xxxx" id="shouye_image1" src="assets/imgs/home/gis_u16.png" width=100% height=100%> </div> 当鼠标悬停在img上面的时候,我想要切换另外一张图片,鼠标移出的时候又显示原来的图片,应该怎么实现?望各位大佬不吝赐教。

bootstrap 图片布局问题

bootstrap 怎么在不改变原图片大小的前提下实现居中,两边多出的部分隐藏

图中bootstrap弹窗div的实现

普通的弹窗,我已经会了,目前不明白的是图上这种弹窗,点击下一步,跳到另外一个div中去。最好有类似的代码![图片说明](https://img-ask.csdn.net/upload/201804/10/1523353333_917595.png)

如何用bootstrap实现步骤箭头按钮样式

![图片说明](https://img-ask.csdn.net/upload/201710/02/1506954721_740530.png)

用bootstrap框架时的分页如何实现

现在想在前台页面用bootstrap实现分页功能,但是bootstrap用的不熟练,大神们有没有bootstrap分页功能实现的代码或者是给我指导指导,拜托了!

bootstrap中图片轮播怎么设置图片大小

现有几张尺寸不一的图片作为轮播,怎么设置让图片自适应一个已定义好的div,也就是说, 大的图片自动缩小或剪裁,小的图片剪裁放大,这怎么能做到l呢?

bootstrap table怎么想java传参数

这是js ``` function load1() { var state=parent.$("input[name='state']:checked").val(); alert(state) $('#exampleTable') .bootstrapTable( { method : 'get', // 服务器数据的请求方式 get or post url : prefix + "/list", // 服务器数据的加载地址 queryParams:function(params){//向后台传值 return{ offset:params.offset, limit:params.limit, state:parent.$("input[name='state']:checked").val() } }, // showRefresh : true, // showToggle : true, // showColumns : true, iconSize : 'outline', toolbar : '#exampleToolbar', striped : true, // 设置为true会有隔行变色效果 dataType : "json", // 服务器返回的数据类型 pagination : true, // 设置为true会在底部显示分页条 // queryParamsType : "limit", // //设置为limit则会发送符合RESTFull格式的参数 singleSelect : false, // 设置为true将禁止多选 // contentType : "application/x-www-form-urlencoded", // //发送到服务器的数据编码类型 pageSize : 10, // 如果设置了分页,每页数据条数 pageNumber : 1, // 如果设置了分布,首页页码 //search : true, // 是否显示搜索框 showColumns : false, // 是否显示内容下拉框(选择显示的列) sidePagination : "server", // 设置在哪里进行分页,可选值为"client" 或者 "server" queryParams : function(params) { return { //说明:传入后台的参数包括offset开始索引,limit步长,sort排序列,order:desc或者,以及所有列的键值对 limit: params.limit, offset:params.offset, name:$('#searchName').val() // username:$('#searchName').val() }; }, // //请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,例如 toolbar 中的参数 如果 // queryParamsType = 'limit' ,返回参数必须包含 // limit, offset, search, sort, order 否则, 需要包含: // pageSize, pageNumber, searchText, sortName, // sortOrder. // 返回false将会终止请求 } ``` 这是java ``` @ResponseBody @RequestMapping("/list") public PageUtils list(@RequestParam Map<String, Object> params,String state){ System.out.println(state); //查询列表数据 Query query = new Query(params); List<WagesDO> wagesList = wagesService.list(query); int total = wagesService.count(query); PageUtils pageUtils = new PageUtils(wagesList, total); return pageUtils; } ``` 这样写在java接受到的是state为null,这是为什么y

BootStrap可视化工具是如何实现的?

``` 我也想写一套自己的可视化工具,但是没有什么思路 ```

bootstrap upload file app多选图片怎么实现 ?

在app中打开网页添加一张图片后,再选择添加,后面添加的会覆盖前一次添加的,这个怎么处理?

bootstrap 如何让文字显示图片上

<div class="row clearfix"> <div class="col-md-12 column"> <img class="img-responsive" src="images/help.png" /> <div class="row clearfix"> <div class="col-md-4 column"> </div> <div class="col-md-4 column"> </div> <div class="col-md-4 column"> <p>文字显示</p> </div> </div> </div> </div> 文字总是显示在图片的下面,除了margin-top:-100px;这样不是响应式的;还有什么方法让文字显示在图片上,可以响应式

实现将bootstrap-fileinput插件中获取图片并base64编码

实现的效果想在线图片base64编码器那种的,求大神讲解过程

bootstrap file-input 图片批量上传问题

我用该bootstrap file-input插件的时候,多个图片上传出现以下情况,大侠求助: ![图片说明](https://img-ask.csdn.net/upload/201601/16/1452928240_59764.jpg) ![图片说明](https://img-ask.csdn.net/upload/201601/16/1452928251_749072.png)

Bootstrap fileinput 初始显示图片如何解决?

![图片说明](https://img-ask.csdn.net/upload/201703/20/1489990305_601089.png)

Vue+现在UI框架如何实现横向树状图?

求各位大佬指点![图片说明](https://img-ask.csdn.net/upload/201912/30/1577673245_644859.jpg) 类似于这种效果,不过子菜单和父级菜单有点击展开和关闭的效果

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

课程主要面向嵌入式Linux初学者、工程师、学生 主要从一下几方面进行讲解: 1.linux学习路线、基本命令、高级命令 2.shell、vi及vim入门讲解 3.软件安装下载、NFS、Samba、FTP等服务器配置及使用

我以为我对Mysql事务很熟,直到我遇到了阿里面试官

太惨了,面试又被吊打

Python代码实现飞机大战

文章目录经典飞机大战一.游戏设定二.我方飞机三.敌方飞机四.发射子弹五.发放补给包六.主模块 经典飞机大战 源代码以及素材资料(图片,音频)可从下面的github中下载: 飞机大战源代码以及素材资料github项目地址链接 ————————————————————————————————————————————————————————— 不知道大家有没有打过飞机,喜不喜欢打飞机。当我第一次接触这个东西的时候,我的内心是被震撼到的。第一次接触打飞机的时候作者本人是身心愉悦的,因为周边的朋友都在打飞机, 每

Python数据分析与挖掘

92讲视频课+16大项目实战+源码+¥800元课程礼包+讲师社群1V1答疑+社群闭门分享会=99元 &nbsp; 为什么学习数据分析? &nbsp; &nbsp; &nbsp; 人工智能、大数据时代有什么技能是可以运用在各种行业的?数据分析就是。 &nbsp; &nbsp; &nbsp; 从海量数据中获得别人看不见的信息,创业者可以通过数据分析来优化产品,营销人员可以通过数据分析改进营销策略,产品经理可以通过数据分析洞察用户习惯,金融从业者可以通过数据分析规避投资风险,程序员可以通过数据分析进一步挖掘出数据价值,它和编程一样,本质上也是一个工具,通过数据来对现实事物进行分析和识别的能力。不管你从事什么行业,掌握了数据分析能力,往往在其岗位上更有竞争力。 &nbsp;&nbsp; 本课程共包含五大模块: 一、先导篇: 通过分析数据分析师的一天,让学员了解全面了解成为一个数据分析师的所有必修功法,对数据分析师不在迷惑。 &nbsp; 二、基础篇: 围绕Python基础语法介绍、数据预处理、数据可视化以及数据分析与挖掘......这些核心技能模块展开,帮助你快速而全面的掌握和了解成为一个数据分析师的所有必修功法。 &nbsp; 三、数据采集篇: 通过网络爬虫实战解决数据分析的必经之路:数据从何来的问题,讲解常见的爬虫套路并利用三大实战帮助学员扎实数据采集能力,避免没有数据可分析的尴尬。 &nbsp; 四、分析工具篇: 讲解数据分析避不开的科学计算库Numpy、数据分析工具Pandas及常见可视化工具Matplotlib。 &nbsp; 五、算法篇: 算法是数据分析的精华,课程精选10大算法,包括分类、聚类、预测3大类型,每个算法都从原理和案例两个角度学习,让你不仅能用起来,了解原理,还能知道为什么这么做。

如何在虚拟机VM上使用串口

在系统内核开发中,经常会用到串口调试,利用VMware的Virtual Machine更是为调试系统内核如虎添翼。那么怎么搭建串口调试环境呢?因为最近工作涉及到这方面,利用强大的google搜索和自己

程序员的兼职技能课

获取讲师答疑方式: 在付费视频第一节(触摸命令_ALL)片头有二维码及加群流程介绍 限时福利 原价99元,今日仅需39元!购课添加小助手(微信号:csdn590)按提示还可领取价值800元的编程大礼包! 讲师介绍: 苏奕嘉&nbsp;前阿里UC项目工程师 脚本开发平台官方认证满级(六级)开发者。 我将如何教会你通过【定制脚本】赚到你人生的第一桶金? 零基础程序定制脚本开发课程,是完全针对零脚本开发经验的小白而设计,课程内容共分为3大阶段: ①前期将带你掌握Q开发语言和界面交互开发能力; ②中期通过实战来制作有具体需求的定制脚本; ③后期将解锁脚本的更高阶玩法,打通任督二脉; ④应用定制脚本合法赚取额外收入的完整经验分享,带你通过程序定制脚本开发这项副业,赚取到你的第一桶金!

MFC一站式终极全套课程包

该套餐共包含从C小白到C++到MFC的全部课程,整套学下来绝对成为一名C++大牛!!!

C++语言基础视频教程

C++语言基础视频培训课程:本课与主讲者在大学开出的程序设计课程直接对接,准确把握知识点,注重教学视频与实践体系的结合,帮助初学者有效学习。本教程详细介绍C++语言中的封装、数据隐藏、继承、多态的实现等入门知识;主要包括类的声明、对象定义、构造函数和析构函数、运算符重载、继承和派生、多态性实现等。 课程需要有C语言程序设计的基础(可以利用本人开出的《C语言与程序设计》系列课学习)。学习者能够通过实践的方式,学会利用C++语言解决问题,具备进一步学习利用C++开发应用程序的基础。

北京师范大学信息科学与技术学院笔试10复试真题

北京师范大学信息科学与技术学院笔试,可以更好的让你了解北师大该学院的复试内容,获得更好的成绩。

深度学习原理+项目实战+算法详解+主流框架(套餐)

深度学习系列课程从深度学习基础知识点开始讲解一步步进入神经网络的世界再到卷积和递归神经网络,详解各大经典网络架构。实战部分选择当下最火爆深度学习框架PyTorch与Tensorflow/Keras,全程实战演示框架核心使用与建模方法。项目实战部分选择计算机视觉与自然语言处理领域经典项目,从零开始详解算法原理,debug模式逐行代码解读。适合准备就业和转行的同学们加入学习! 建议按照下列课程顺序来进行学习 (1)掌握深度学习必备经典网络架构 (2)深度框架实战方法 (3)计算机视觉与自然语言处理项目实战。(按照课程排列顺序即可)

网络工程师小白入门--【思科CCNA、华为HCNA等网络工程师认证】

本课程适合CCNA或HCNA网络小白同志,高手请绕道,可以直接学习进价课程。通过本预科课程的学习,为学习网络工程师、思科CCNA、华为HCNA这些认证打下坚实的基础! 重要!思科认证2020年2月24日起,已启用新版认证和考试,包括题库都会更新,由于疫情原因,请关注官网和本地考点信息。题库网络上很容易下载到。

Python界面版学生管理系统

前不久上传了一个控制台版本的学生管理系统,这个是Python界面版学生管理系统,这个是使用pycharm开发的一个有界面的学生管理系统,基本的增删改查,里面又演示视频和完整代码,有需要的伙伴可以自行下

软件测试2小时入门

本课程内容系统、全面、简洁、通俗易懂,通过2个多小时的介绍,让大家对软件测试有个系统的理解和认识,具备基本的软件测试理论基础。 主要内容分为5个部分: 1 软件测试概述,了解测试是什么、测试的对象、原则、流程、方法、模型;&nbsp; 2.常用的黑盒测试用例设计方法及示例演示;&nbsp; 3 常用白盒测试用例设计方法及示例演示;&nbsp; 4.自动化测试优缺点、使用范围及示例‘;&nbsp; 5.测试经验谈。

Tomcat服务器下载、安装、配置环境变量教程(超详细)

未经我的允许,请不要转载我的文章,在此郑重声明!!! 请先配置安装好Java的环境,若没有安装,请参照我博客上的步骤进行安装! 安装Java环境教程https://blog.csdn.net/qq_40881680/article/details/83585542 Tomcat部署Web项目(一)·内嵌https://blog.csdn.net/qq_40881680/article/d...

2019数学建模A题高压油管的压力控制 省一论文即代码

2019数学建模A题高压油管的压力控制省一完整论文即详细C++和Matlab代码,希望对同学们有所帮助

图书管理系统(Java + Mysql)我的第一个完全自己做的实训项目

图书管理系统 Java + MySQL 完整实训代码,MVC三层架构组织,包含所有用到的图片资源以及数据库文件,大三上学期实训,注释很详细,按照阿里巴巴Java编程规范编写

linux下利用/proc进行进程树的打印

在linux下利用c语言实现的进程树的打印,主要通过/proc下的目录中的进程文件,获取status中的进程信息内容,然后利用递归实现进程树的打印

微信小程序开发实战之番茄时钟开发

微信小程序番茄时钟视频教程,本课程将带着各位学员开发一个小程序初级实战类项目,针对只看过官方文档而又无从下手的开发者来说,可以作为一个较好的练手项目,对于有小程序开发经验的开发者而言,可以更好加深对小程序各类组件和API 的理解,为更深层次高难度的项目做铺垫。

[已解决]踩过的坑之mysql连接报“Communications link failure”错误

目录 前言 第一种方法: 第二种方法 第三种方法(适用于项目和数据库在同一台服务器) 第四种方法 第五种方法(项目和数据库不在同一台服务器) 总结 前言 先给大家简述一下我的坑吧,(我用的是mysql,至于oracle有没有这样的问题,有心的小伙伴们可以测试一下哈), 在自己做个javaweb测试项目的时候,因为买的是云服务器,所以数据库连接的是用ip地址,用IDE开发好...

人工智能-计算机视觉实战之路(必备算法+深度学习+项目实战)

系列课程主要分为3大阶段:(1)首先掌握计算机视觉必备算法原理,结合Opencv进行学习与练手,通过实际视项目进行案例应用展示。(2)进军当下最火的深度学习进行视觉任务实战,掌握深度学习中必备算法原理与网络模型架构。(3)结合经典深度学习框架与实战项目进行实战,基于真实数据集展开业务分析与建模实战。整体风格通俗易懂,项目驱动学习与就业面试。 建议同学们按照下列顺序来进行学习:1.Python入门视频课程 2.Opencv计算机视觉实战(Python版) 3.深度学习框架-PyTorch实战/人工智能框架实战精讲:Keras项目 4.Python-深度学习-物体检测实战 5.后续实战课程按照自己喜好选择就可以

2019 AI开发者大会

2019 AI开发者大会(AI ProCon 2019)是由中国IT社区CSDN主办的AI技术与产业年度盛会。多年经验淬炼,如今蓄势待发:2019年9月6-7日,大会将有近百位中美顶尖AI专家、知名企业代表以及千余名AI开发者齐聚北京,进行技术解读和产业论证。我们不空谈口号,只谈技术,诚挚邀请AI业内人士一起共铸人工智能新篇章!

机器学习初学者必会的案例精讲

通过六个实际的编码项目,带领同学入门人工智能。这些项目涉及机器学习(回归,分类,聚类),深度学习(神经网络),底层数学算法,Weka数据挖掘,利用Git开源项目实战等。

Python数据分析师-实战系列

系列课程主要包括Python数据分析必备工具包,数据分析案例实战,核心算法实战与企业级数据分析与建模解决方案实战,建议大家按照系列课程阶段顺序进行学习。所有数据集均为企业收集的真实数据集,整体风格以实战为导向,通俗讲解Python数据分析核心技巧与实战解决方案。

YOLOv3目标检测实战系列课程

《YOLOv3目标检测实战系列课程》旨在帮助大家掌握YOLOv3目标检测的训练、原理、源码与网络模型改进方法。 本课程的YOLOv3使用原作darknet(c语言编写),在Ubuntu系统上做项目演示。 本系列课程包括三门课: (1)《YOLOv3目标检测实战:训练自己的数据集》 包括:安装darknet、给自己的数据集打标签、整理自己的数据集、修改配置文件、训练自己的数据集、测试训练出的网络模型、性能统计(mAP计算和画出PR曲线)和先验框聚类。 (2)《YOLOv3目标检测:原理与源码解析》讲解YOLOv1、YOLOv2、YOLOv3的原理、程序流程并解析各层的源码。 (3)《YOLOv3目标检测:网络模型改进方法》讲解YOLOv3的改进方法,包括改进1:不显示指定类别目标的方法 (增加功能) ;改进2:合并BN层到卷积层 (加快推理速度) ; 改进3:使用GIoU指标和损失函数 (提高检测精度) ;改进4:tiny YOLOv3 (简化网络模型)并介绍 AlexeyAB/darknet项目。

2021考研数学张宇基础30讲.pdf

张宇:博士,全国著名考研数学辅导专家,教育部“国家精品课程建设骨干教师”,全国畅销书《张宇高等数学18讲》《张宇线性代数9讲》《张宇概率论与数理统计9讲》《张宇考研数学题源探析经典1000题》《张宇考

三个项目玩转深度学习(附1G源码)

从事大数据与人工智能开发与实践约十年,钱老师亲自见证了大数据行业的发展与人工智能的从冷到热。事实证明,计算机技术的发展,算力突破,海量数据,机器人技术等,开启了第四次工业革命的序章。深度学习图像分类一直是人工智能的经典任务,是智慧零售、安防、无人驾驶等机器视觉应用领域的核心技术之一,掌握图像分类技术是机器视觉学习的重中之重。针对现有线上学习的特点与实际需求,我们开发了人工智能案例实战系列课程。打造:以项目案例实践为驱动的课程学习方式,覆盖了智能零售,智慧交通等常见领域,通过基础学习、项目案例实践、社群答疑,三维立体的方式,打造最好的学习效果。

DirectX修复工具V4.0增强版

DirectX修复工具(DirectX Repair)是一款系统级工具软件,简便易用。本程序为绿色版,无需安装,可直接运行。 本程序的主要功能是检测当前系统的DirectX状态,如果发现异常则进行修复

期末考试评分标准的数学模型

大学期末考试与高中的考试存在很大的不同之处,大学的期末考试成绩是主要分为两个部分:平时成绩和期末考试成绩。平时成绩和期末考试成绩总分一般为一百分,然而平时成绩与期末考试成绩所占的比例不同会导致出现不同

Vue.js 2.0之全家桶系列视频课程

基于新的Vue.js 2.3版本, 目前新全的Vue.js教学视频,让你少走弯路,直达技术前沿! 1. 包含Vue.js全家桶(vue.js、vue-router、axios、vuex、vue-cli、webpack、ElementUI等) 2. 采用笔记+代码案例的形式讲解,通俗易懂

c语言项目开发实例

十个c语言案例 (1)贪吃蛇 (2)五子棋游戏 (3)电话薄管理系统 (4)计算器 (5)万年历 (6)电子表 (7)客户端和服务器通信 (8)潜艇大战游戏 (9)鼠标器程序 (10)手机通讯录系统

相关热词 c# dbml文件 修改 c#遍历tree c# 能够控制单片机 c#对象写入数据库 c# 添加activex c#2005 json c# 数据库在云端 c# 字符串移位加密 c#禁用滚轮 c#实体类list去重复
立即提问