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问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

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),应该怎么处理啊?求大神

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

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

Bootstrap+H5做出以下流程图

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

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框架时的分页如何实现

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

图中bootstrap弹窗div的实现

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

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

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

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

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

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 fileinput 初始显示图片如何解决?

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

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;这样不是响应式的;还有什么方法让文字显示在图片上,可以响应式

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

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

Bootstrap fileinput 插件上传图片,后台接收不到uploadExtraData

使用Bootstrap fileinput 插件 进行图片上传,图片保存都很顺利,只是通过uploadExtraData传递的参数,后台接收不到。望指点: 前后端代码如下: ``` <div class= "row" style="height:300px"> <form enctype="multipart/form-data"> <div class="form-group"> <input id="uploadImage" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1"> </div> </form> </div> ``` js: ``` $("#uploadImage").fileinput({ uploadUrl: "#springUrl('/file/upload/upload3.html')", //上传的地址 language : "zh",//设置语言 allowedFileExtensions : ['jpg', 'png','gif'], overwriteInitial: false, maxFileSize: 1000, maxFilesNum: 10, //最大上传文件数限制 initialCaption: "请选择上传图片", dropZoneEnabled: false, uploadExtraData:function(previewId, index) { return {"name": "param"}; }, //allowedFileTypes: ['image', 'video', 'flash'], slugCallback: function(filename) { return filename.replace('(', '_').replace(']', '_'); } }); ``` 试过: uploadExtraData:{name:'asd'} uploadExtraData:{'name':'asd'} 都不行. java: ``` // 上传图片 @ResponseBody @Permission(action = Action.Skip) @RequestMapping("/upload3") public Object uploadFile3(HttpServletRequest request, HttpServletResponse response, String param) throws ServletException, IOException { DiskFileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); System.out.println(param); String name = request.getParameter("name"); boolean flag = true; System.out.println(name); ......... ``` 图片上传正常,可以接收的参数一直是null, 后台的name和param是我传递的key,但是打印出来的一直是null, 求指点,谢谢!!!

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)

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

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

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

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

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

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

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

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

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

相关热词 c# 开发接口 c# 中方法上面的限制 c# java 时间戳 c#单元测试入门 c# 数组转化成文本 c#实体类主外键关系设置 c# 子函数 局部 c#窗口位置设置 c# list 查询 c# 事件 执行顺序
立即提问