jstree树形结构的使用

 

1js和css的下载和引入  

下载地址： http://www.jstree.com/，
api：https://www.jstree.com/api/#/?q=(
事件监听：https://www.jstree.com/api/#/?q=.jstree%20Event&f=deselect_all.jstree

翻译好的参考：https://blog.csdn.net/m0_37355951/article/details/75268296

https://blog.csdn.net/qq_24472595/article/details/70053863#%E6%8F%92%E4%BB%B6

下载后放到项目中
需要引入两个文件：

2前端树形结构实例

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>



    
    
    
    








    

    
    

点击按钮 效果如下图：

3通过后台准备数据，并且形成树形结构的实例

拼接json需要的dto

public  class DtoService {
       public OrganTreeCoreDto getTreeDto() {

        OrganTreeDto organTreeDto = new OrganTreeDto();

        Checkbox checkbox = new Checkbox();
        checkbox.setKeep_selected_style(false);

        String[] pp = new String[2];
        pp[0]="wholerow";
        pp[1]="checkbox";

        TreeData treeData = new TreeData();
        List aa = new ArrayList();
        OrganTreeNode node2 = new OrganTreeNode();
        node2.setIcon("none");
        node2.setId(2);
        node2.setText("node2");
        NodeState state = new NodeState();
        state.setOpened(true);
        state.setSelected(true);
        node2.setState(state);
        aa.add(node2);
        OrganTreeNode node3 = new OrganTreeNode();
        node3.setIcon("none");
        node3.setId(3);
        node3.setText("node3");
        List node1child = new ArrayList();
        OrganTreeNode node1 = new OrganTreeNode();
        node1.setIcon("none");
        node1.setId(1);
        node1.setText("node1");
        node1child.add(node1);
        node3.setChildren(node1child);
        aa.add(node3);

        organTreeDto.setData(aa);
        OrganTreeCoreDto organTreeCoreDto = new OrganTreeCoreDto();
        organTreeCoreDto.setCore(organTreeDto);
        organTreeCoreDto.setPlugins(pp);
        organTreeCoreDto.setCheckbox(checkbox);

        String json = JSON.toJSONString(organTreeCoreDto);
        System.out.println(json);
        return organTreeCoreDto;
    }
}
public class OrganTreeCoreDto {

    private OrganTreeDto core;
    private Checkbox checkbox;
    private  String[] plugins;

    public OrganTreeDto getCore() {
        return core;
    }


    public void setCore(OrganTreeDto core) {
        this.core = core;
    }

    public Checkbox getCheckbox() {
        return checkbox;
    }

    public void setCheckbox(Checkbox checkbox) {
        this.checkbox = checkbox;
    }

    public String[] getPlugins() {
        return plugins;
    }

    public void setPlugins(String[] plugins) {
        this.plugins = plugins;
    }

 
}

public class Checkbox{

    boolean keep_selected_style;

    public boolean isKeep_selected_style() {
        return keep_selected_style;
    }

    public void setKeep_selected_style(boolean keep_selected_style) {
        this.keep_selected_style = keep_selected_style;
    }
}

public class OrganTreeDto {

    private  List data;
    public List getData() {
        return data;
    }
    public void setData(List data) {
        this.data = data;
    }
}

public   class OrganTreeNode {
        int id;
        String text;
        String icon;
        List children;
        NodeState state;

        public int getId() {
            return id;
        }

        public void setId(int id) {
            this.id = id;
        }

        public String getText() {
            return text;
        }

        public void setText(String text) {
            this.text = text;
        }

        public String getIcon() {
            return icon;
        }

        public void setIcon(String icon) {
            this.icon = icon;
        }

        public List getChildren() {
            return children;
        }

        public void setChildren(List children) {
            this.children = children;
        }

        public NodeState getState() {
            return state;
        }

        public void setState(NodeState state) {
            this.state = state;
        }
    }

public class NodeState{
        boolean opened;
        boolean selected;

        public boolean isOpened() {
            return opened;
        }

        public void setOpened(boolean opened) {
            this.opened = opened;
        }

        public boolean isSelected() {
            return selected;
        }

        public void setSelected(boolean selected) {
            this.selected = selected;
        }
    }

public class TreeData{
        List data;
        public List getData() {
            return data;
        } 
        public void setData(List data) {
            this.data = data;
        }
    }

  controller中返回树对应的json
   

 @RequestMapping(value="/trees/testtree.action")
    public String testtree(ModelMap modelMap,ServletResponse response ){
        String s = JSON.toJSONString(new DtoService().getTreeDto());
        modelMap.put("treecontent", s);
        return "reportset/treetest";
    }

 treetest.jsp页面中的处理:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>



    
    
    
    
    
    
    
    
    
    
    
    








    

    
    
    "/>

4 jsTree隐式组件的使用-以搜索为例

 首先需要说明这个组件是隐式的，就是说只有你声明了，才能使用。
声明：就是在用json组装树形结构的时候，需要声明使用该插件
String[] pp = new String[3];
pp[0]="checkbox";
pp[1]="search";// 这里声明 搜索的插件功能
pp[2]="wholerow";
organTreeCoreDto.setPlugins(pp);

Checkbox checkbox = new Checkbox();
checkbox.setKeep_selected_style(false);
organTreeCoreDto.setCheckbox(checkbox

2使用
controller内容
@RequestMapping(value="/reportset/testtree.action")
public String testtree(ModelMap modelMap,ServletResponse response ){
    String s = JSON.toJSONString(treeService.getOrganTree());
    modelMap.put("treecontent", s);
    return "reportset/treetest-exp";
}

树形结构所在jsp页面
引入文件
   
   

   

       
       

       

            确认
       

   

 "/>

效果如下图：