jstree树形结构的使用

野性酷女 2022-01-06 03:21 804阅读 0赞

### 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_m0_37355951_article_details_75268296]

[https://blog.csdn.net/qq\_24472595/article/details/70053863\#%E6%8F%92%E4%BB%B6][https_blog.csdn.net_qq_24472595_article_details_70053863_E6_8F_92_E4_BB_B6]

下载后放到项目中  
需要引入两个文件：  
<script type="text/javascript" src="../resource/jstree/jstree.min.js"></script>  
<link href="../resource/jstree/themes/default/style.min.css" rel="stylesheet">

### 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" %>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>详情</title>
        <script type="text/javascript" src="../resource/js/bootstrap-select.min.js"></script>
        <script type="text/javascript" src="../resource/jstree/jstree.min.js"></script>
    
    <link href="../resource/jstree/themes/default/style.min.css" rel="stylesheet">
    </head>
    
    <script language="javascript">
        function openId(){
            //获取选中的节点
            var jstree = $("#using_json").jstree("get_checked");
            alert(jstree);
            $("#using_json").jstree(JSON.stringify($("#treecontent").val()));
        }
        $(function(){
            $("#using_json").jstree({
                "checkbox": {
                    "keep_selected_style": false
                },
                "core": {
                    "data": [{
                        "icon": "none",
                        "id": 2,
                        "state": {
                            "opened": true,
                            "selected": true
                        },
                        "text": "node2"
                    }, {
                        "children": [{
                            "icon": "none",
                            "id": 1,
                            "text": "node1"
                        }],
                        "icon": "none",
                        "id": 3,
                        "text": "node3",
                        "state": {
                            "opened": true,
                            "selected": true
                        },
                    }]
                },
                "plugins": ["wholerow", "checkbox"]
            })
        });
    </script>
    
    <body style="background-color: #ffffff;">
    <div>
        <div id="using_json"></div>
        <input type="button" value="打开选择的id" onclick="openId();">
        <input type="hidden" id="treecontent"  name="treecontent" value="${treecontent}"/>
    </div>
    </body>
    
    </html>

点击按钮 效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70][]

### 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<OrganTreeNode> aa = new ArrayList<OrganTreeNode>();
            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<OrganTreeNode> node1child = new ArrayList<OrganTreeNode>();
            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<OrganTreeNode> data;
        public List<OrganTreeNode> getData() {
            return data;
        }
        public void setData(List<OrganTreeNode> data) {
            this.data = data;
        }
    }
    
    public   class OrganTreeNode {
            int id;
            String text;
            String icon;
            List<OrganTreeNode> 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<OrganTreeNode> getChildren() {
                return children;
            }
    
            public void setChildren(List<OrganTreeNode> 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<OrganTreeNode> data;
            public List<OrganTreeNode> getData() {
                return data;
            } 
            public void setData(List<OrganTreeNode> 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" %>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>详情</title>
        <link href="../resource/css/font-awesome.css?v=4.4.0" rel="stylesheet">
        <link href="../resource/sweetalert/sweetalert.css" rel="stylesheet">
        <link href="../resource/css/awesome-bootstrap-checkbox.css" rel="stylesheet">
        <script type="text/javascript" src="../fe-res/js/jquery.min.js"></script>
        <script type="text/javascript" src="../fe-res/js/echarts.min.js"></script>
        <script type="text/javascript" src="../resource/js/bootstrap.js"></script>
        <script type="text/javascript" src="../resource/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="../resource/js/bootstrap-select.js"></script>
        <script type="text/javascript" src="../resource/js/bootstrap-select.min.js"></script>
        <script type="text/javascript" src="../resource/jstree/jstree.min.js"></script>
    <link href="../resource/jstree/themes/default/style.min.css" rel="stylesheet">
    </head>
    
    <script language="javascript">
        function openId(){
            //获取选中的节点
            var nodes=$("#using_json").jstree("get_checked");
            alert(nodes);
        }
        $(function(){
            var tree = $("#treecontent").val();
            //由JSON字符串转换为JSON对象，才能展示成树形结构
            var obj = JSON.parse(tree);
            $("#using_json").jstree(obj);
            $('#using_json').on("changed.jstree", function (e, data) {
                console.log(data.selected);
                var nodes=$("#using_json").jstree("get_checked");
                alert(nodes);
            });
        });
    </script>
    
    
    <body style="background-color: #ffffff;">
    <div>
        <div id="using_json"></div>
        <input type="button" value="打开选择的id" onclick="openId();">
        
        <input type="hidden" id="treecontent"  name="treecontent" value="<c:out value="${treecontent}"></c:out>"/>
    </div>
    
    </body>
    </html>

### 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页面  
引入文件  
    <script type="text/javascript" src="../resource/jstree/jstree.min.js"></script>  
    <link href="../resource/jstree/themes/default/style.min.css" rel="stylesheet">

$('\#treecontents').on("changed.jstree", function (e, data) \{  
            console.log(data.selected);  
            var nodes=$("\#treecontents").jstree("get\_checked");  
            $("\#organid").val(nodes);  
        \});

// 输入框绑定搜索事件  
        $('\#organ\_name').keyup(function () \{  
            var v = $('\#organ\_name').val();  
            $('\#treecontents').jstree(true).search(v);  
        \});

\});  
</script>

效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70 1][]

[https_blog.csdn.net_m0_37355951_article_details_75268296]: https://blog.csdn.net/m0_37355951/article/details/75268296
[https_blog.csdn.net_qq_24472595_article_details_70053863_E6_8F_92_E4_BB_B6]: https://blog.csdn.net/qq_24472595/article/details/70053863#%E6%8F%92%E4%BB%B6
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70]: /images/20211228/7952b30e28c04eb6afe2bb82243692ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gyNjA0Mzk2NzM5_size_16_color_FFFFFF_t_70 1]: /images/20211228/5db31d65083d420aabeeb7a1e77f872d.png