j'sTree （js 实现多级列表，文件目录）详细使用案例+代码

Miyang 发布于2019-08-23 17:58 / 3301人阅读

摘要：如图，要做一个两级的下拉标签，可以用函数实现，但是太麻烦，而且不灵活，查阅资料之后发现，很方便，下面介绍一下的入门，并附上代码。阅读的官方文档之后，你会知道，它有很多实现方式，我下面使用的是请求，从后台获取数据返回给。

如图，要做一个两级的下拉标签，可以用函数实现，但是太麻烦，而且不灵活，查阅资料之后发现，jsTree很方便，下面介绍一下jsTree的入门，并附上代码。
阅读jsTree的官方文档之后，你会知道，它有很多实现方式，我下面使用的是Ajax请求，从后台获取json数据返回给jsTree。

jsTree的官网：https://www.jstree.com/
点击页面的Download按钮，下载并解压之后，将dist下的文件都复制到你自己的项目中

Html代码





<span class="http"><span class="javascript">通信监测</span></span>

后台代码

    @ResponseBody
    public void selectConEqui(Model model, HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        List> router = routerService.selectConEqui();
        response.setContentType("application/json; charset=UTF-8");
        response.getWriter().write(new Gson().toJson(router));

    }

数据库存储格式

sql查询

返回前端的json格式为

注意几点：1.根级parent的值固定设为“#”，其他的不能识别；
2.“parent”，“id",”text“都是固定的命名，且都是小写，如果数据库字段是大写，可以AS为小写；
如果没有这样的数据库结构，也可以通过后台代码将数据改造为上述格式

更多详细的用法，可以参考官方网站

GPU云服务器云服务器多级菜单下拉列表 mkdir创建多级目录 js实现计算器代码 d3.js案例及代码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104459.html

强推！大牛程序员必备的Java日志框架，性能无敌

摘要：本文要来分享给大家程序员最常用的日志框架组件。没有基础的同学也不要着急，这套教程覆盖了目前所有的日志框架，只要你学，就一定用得到，先收藏，以备不时之需。作为一名Java程序员，我们开发了很多Java应用程序，包括桌面应用、WEB应用以及移动应用。然而日志系统是一个成熟Java应用所必不可少的。在开发和调试阶段，日志可以帮...

zebrayoung 2021-11-25 09:43 评论0 收藏0
CSS 的介绍

摘要：第一章宋体的介绍宋体层叠样式表，它是宋体的缩写，作用就是给宋体标签加表现形式样式宋体显示，如字体，图片，列表，位置等。宋体在制作网页时必须是背景图宋体宋体案例第一章的介绍 1.CSS：层叠样式表，它是cascading style sheets的缩写，作用就是给HTML标签加表现形式（样式-显示），如：字体，图片，列表，位置等。在浏览器中可以看到部分： HTML：超文本标记语言...

libxd 2019-04-23 13:13 评论0 收藏0
vue.js中如何导出Excel表格

摘要：有一个项目需求，要求在前端项目中导出表格，经过查找代码确实可以实现，具体实现步骤为安装依赖导入两个下载和，在目录下新建文件夹，里面放入和两个文件在引入这两个文件在组件中使用导出的方法序号昵称姓名上面设置的表格第一行的标题上面的是里对有一个项目需求，要求在前端项目中导出Excel表格，经过查找代码,Vue.js确实可以实现，具体实现步骤为： 1.安装依赖 npm install -S ...

lunaticf 2019-08-23 18:03 评论0 收藏0