资讯专栏INFORMATION COLUMN

j'sTree (js 实现多级列表,文件目录)详细使用案例+代码

Miyang / 3098人阅读

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

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

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

Html代码





通信监测







    
    
    
    
    
    

后台代码

    @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为小写;
如果没有这样的数据库结构,也可以通过后台代码将数据改造为上述格式

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

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

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

相关文章

  • 强推!大牛程序员必备的Java日志框架,性能无敌

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

    zebrayoung 评论0 收藏0
  • CSS 的介绍

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

    libxd 评论0 收藏0
  • vue.js中如何导出Excel表格

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

    lunaticf 评论0 收藏0
  • linux常用指令

    摘要:查看目录下有什么文件信息查看当前目录下有什么文件或通过详细内容形式查看目录下的文件内容目录查看指定目录下文件名字信息目录以详细列表形式查看指定目录下文件名字信息查看全部文件,包括隐藏文件以详细列表形式查看全部文件,包括隐藏文件查 查看目录下有什么文件信息 ls //list查看当前目录下有什么文件ls -l或ls ll //list -list 通过详...

    Jeff 评论0 收藏0
  • ❤️万字总结《Linux系统常用命令》❤️——常用的Linux操作指令详解及案例!(建议收藏)

    现在的企业有90%甚至更过是使用Linux操作系统, 所以不管是开发还是运维, 不会点Linux知识肯定是无法进入到企业里工作. 而且, 全球500强超级计算机几乎都是使用Linux操作系统, 这也是Linux操作系统实力的见证, 接下来跟大家分享几个工作中常用的Linux操作命令 Linux系统常用命令 目录文件相关命令pwd 显示工作目录ls 显示目录内容du 显示目录或文件大小find...

    Turbo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<