Easyui动态tree

最新推荐文章于 2020-07-24 19:54:21 发布

原创最新推荐文章于 2020-07-24 19:54:21 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Easyui动态tree

May技术点专栏收录该内容

2 篇文章

订阅专栏

本文介绍了两种方法来实现在Easyui中动态加载Tree数据。方法一详细阐述了从实体类、VO类、控制层到Mybatis的实现过程，并在动态tree中获取tabs选项卡的方法。方法二讲解了如何在前台页面处理，控制层和服务层中实现节点的展开与折叠，以及如何在状态为closed时默认折叠所有节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一

前台

<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">1</div>
    <div data-options="region:'west',title:'West',split:true" style="width:200px;">
        <%--tree--%>
        <ul id="myTree"></ul>
    </div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">3</div>
</body>
<script>
    $(function(){
        $('#myTree').tree({
            url:"tree.do"
        });
    })
</script>

实体类

package com.mr.easyui.model;

import lombok.Data;

/**
 * Created by ZHANGXIN on 2019/1/15.
 */
@Data
public class Easyui {

    /*id：节点ID，对加载远程数据很重要。
    text：显示节点文本。
    state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
    checked：表示该节点是否被选中。
    attributes: 被添加到节点的自定义属性。
    children: 一个节点数组声明了若干节点。*/
    private Integer id;
    private String text;
    private String state;
    private String checked;
    private String iconCls;
    private Integer pid;    //版本号机制

}

}

vo类

package com.mr.easyui.model.vo;

import com.mr.easyui.model.Easyui;
import lombok.Data;

import java.util.List;

/**
 * Created by ZHANGXIN on 2019/1/15.
 */
@Data
public class EasyuiVo extends Easyui {
    private List<EasyuiVo> children;
}

控制层方法

@ResponseBody
    @RequestMapping("tree")
    public List<EasyuiVo> tree(){
        List<EasyuiVo> list =easyuiService.treeList();
        return list;
    }

service实现类

package com.mr.easyui.service.impl;

import com.mr.easyui.mapper.EasyuiMapper;
import com.mr.easyui.model.vo.EasyuiVo;
import com.mr.easyui.service.EasyuiService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * Created by ZHANGXIN on 2019/1/15.
 */
@Service
public class EasyuiServiceImpl implements EasyuiService {
    @Autowired
    private EasyuiMapper easyuiMapper;

    @Override
    public List<EasyuiVo> treeList() {
        //获取到根节点的数据
        List<EasyuiVo> trees = easyuiMapper.treeList(0);
        //调用方法，加载子节点
        getChildrenUtil(trees);

        return trees;

    }

    public void getChildrenUtil(List<EasyuiVo> trees){//1、2、3
        for (int i = 0; i < trees.size(); i++) {
            EasyuiVo easyuiVo = trees.get(i);
            List<EasyuiVo> treeVOS = easyuiMapper.treeList(easyuiVo.getId());//获取到4、5
            easyuiVo.setChildren(treeVOS);
            //通过4、5加载子节点
            getChildrenUtil(treeVOS);//去获取6、7
        }
        //return trees;
    }

}

Mybatis

	<select id="treeList" resultType="easyuiVo">
      select * from t_tree where pid = #{pid}
    </select>

动态tree 获取tabs选项卡

1.实体添加url字段

private String url;

vo实体新增一个map

package com.mr.easyui.model.vo;

import com.mr.easyui.model.Easyui;
import lombok.Data;

import java.util.List;
import java.util.Map;

/**
 * Created by ZHANGXIN on 2019/1/15.
 */
@Data
public class EasyuiVo extends Easyui {
    private List<EasyuiVo> children;
    //用来获取rul
    private Map<String,String> attributes; 
}

service 实现类

递归循环调用时， //获取路径，最后在存放在vo的map中

package com.mr.easyui.service.impl;

import com.mr.easyui.mapper.EasyuiMapper;
import com.mr.easyui.model.vo.EasyuiVo;
import com.mr.easyui.service.EasyuiService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * Created by ZHANGXIN on 2019/1/15.
 */
@Service
public class EasyuiServiceImpl implements EasyuiService {
    @Autowired
    private EasyuiMapper easyuiMapper;

    @Override
    public List<EasyuiVo> treeList() {
        //获取到根节点的数据
        List<EasyuiVo> trees = easyuiMapper.treeList(0);
        //调用方法，加载子节点
        getChildrenUtil(trees);

        return trees;

    }
    //递归调用
    public void getChildrenUtil(List<EasyuiVo> trees){//1、2、3
        for (int i = 0; i < trees.size(); i++) {
            EasyuiVo easyuiVo = trees.get(i);

            //获取路径，最后在存放在vo的map中
            Map<String,String> attributes=new HashMap<>();
            attributes.put("url",easyuiVo.getUrl());
            easyuiVo.setAttributes(attributes);



            List<EasyuiVo> treeVOS = easyuiMapper.treeList(easyuiVo.getId());//获取到4、5
            easyuiVo.setChildren(treeVOS);
            //通过4、5加载子节点
            getChildrenUtil(treeVOS);//去获取6、7
        }
        //return trees;
    }

}

前台jsp页面

<%--
  Created by IntelliJ IDEA.
  User: ZHANGXIN
  Date: 2019/1/15
  Time: 19:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path=request.getContextPath();String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<html>
<head>
    <base href="<%=basePath%>">
    <!-- 引入easyui  css样式  只需引入easyui.css   其中就包含了其他的内容-->
    <link rel="stylesheet" href="js/jquery-easyui-1.6.11/themes/default/easyui.css">
    <!-- 引入小图标 -->
    <link rel="stylesheet" href="js/jquery-easyui-1.6.11/themes/icon.css">

    <!-- 引入jQuery -->
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <!-- 引入easyui -->
    <script  src="js/jquery-easyui/jquery.easyui.min.js" ></script>
    <!-- 样式转化为中文 -->
    <script  src="js/jquery-easyui-1.6.11/locale/easyui-lang-zh_CN.js"></script>
    <title>标题</title>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">1</div>
    <div data-options="region:'west',title:'West',split:true" style="width:200px;">
        <%--tree--%>
        <ul id="myTree"></ul>
    </div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
        <div id="myTable" class="easyui-tabs" fit=true>
            <div title="Tab1" style="padding:20px;display:none;">
                欢迎
            </div>
        </div>
    </div>
</body>
<script>
    $(function(){
        $('#myTree').tree({
            url:"tree.do",
           // 在用户点击一个节点的时候触发。
            onClick: function(node){
                /*console.log(node.attributes.url);  //获取url
                console.log(node.text); //获取标题*/
                addTabs(node.text,node.attributes.url);
            }
        });
    })

    //增加选项卡
    function addTabs(title,url){
    	if(url!=""){
	        //exists which 表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。
	        //通过标题查看是否存在该选项卡
	        var ex =  $('#myTable').tabs('exists',title);
	        if(ex){//存在
	            //select which 选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
	            //选中
	            $('#myTable').tabs('select',title);
	        }else{
	            $('#myTable').tabs('add',{
	                title: title,
	                content:'<iframe style="width:100%;height:100%;position:relative;" src="'+url+'" frameborder="0" scrolling="true" ></iframe>',
	                closable:true,
	                tools:[{
	                    iconCls:'icon-mini-refresh',
	                    handler:function(){
	                        //获取选项卡
	                        var tab = $('#myTable').tabs("getSelected");
	                        /* 刷新选项卡 */
	                        $('#myTable').tabs('update', {
	                            tab: tab,
	                            options: {
	                            }
	                        });
	                    }
	                }]
	            });
	        }
      }
    }
    //增加选项卡
</script>
</html>

方法二

当数据库的state 为closed时，默认所有节点都是折叠的。
当点击展开按钮的时候，会自动发送一个请求。

$('#myTree2').tree({
            url:"tree2.do"
 });

默认会将该节点的id值传递到后台；
在这里插入图片描述

前台页面方法

<%--
  Created by IntelliJ IDEA.
  User: ZHANGXIN
  Date: 2019/1/15
  Time: 19:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String path=request.getContextPath();String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<html>
<head>
    <base href="<%=basePath%>">
    <!-- 引入easyui  css样式  只需引入easyui.css   其中就包含了其他的内容-->
    <link rel="stylesheet" href="js/jquery-easyui-1.6.11/themes/default/easyui.css">
    <!-- 引入小图标 -->
    <link rel="stylesheet" href="js/jquery-easyui-1.6.11/themes/icon.css">

    <!-- 引入jQuery -->
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <!-- 引入easyui -->
    <script  src="js/jquery-easyui/jquery.easyui.min.js" ></script>
    <!-- 样式转化为中文 -->
    <script  src="js/jquery-easyui-1.6.11/locale/easyui-lang-zh_CN.js"></script>
    <title>标题</title>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'North Title',split:true" style="height:100px;">1</div>
    <div data-options="region:'west',title:'West',split:true" style="width:200px;">
        <div id="aa" class="easyui-accordion" fit=true>
            <div title="方法一" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
                <%--tree--%>
                <ul id="myTree"></ul>
            </div>
            <div title="方法二" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
                <%--tree--%>
                <ul id="myTree2"></ul>
            </div>
        </div>

    </div>
    <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
        <div id="myTable" class="easyui-tabs" fit=true>
            <div title="Tab1" style="padding:20px;display:none;">
                欢迎
            </div>
        </div>
    </div>
</body>
<script>
    $(function(){
        $('#myTree').tree({
            url:"tree.do",
           // 在用户点击一个节点的时候触发。
            onClick: function(node){
                /*console.log(node.attributes.url);  //获取url
                console.log(node.text); //获取标题*/
                addTabs(node.text,node.attributes.url);
            }
        });
        $('#myTree2').tree({
            url:"tree2.do"
        });
    })

    //增加选项卡
    function addTabs(title,url){
    	if(url!=""){
	        //exists which 表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。
	        //通过标题查看是否存在该选项卡
	        var ex =  $('#myTable').tabs('exists',title);
	        if(ex){//存在
	            //select which 选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。
	            //选中
	            $('#myTable').tabs('select',title);
	        }else{
	            $('#myTable').tabs('add',{
	                title: title,
	                content:'<iframe style="width:100%;height:100%;position:relative;" src="'+url+'" frameborder="0" scrolling="true" ></iframe>',
	                closable:true,
	                tools:[{
	                    iconCls:'icon-mini-refresh',
	                    handler:function(){
	                        //获取选项卡
	                        var tab = $('#myTable').tabs("getSelected");
	                        /* 刷新选项卡 */
	                        $('#myTable').tabs('update', {
	                            tab: tab,
	                            options: {
	                            }
	                        });
	                    }
	                }]
	            });
	        }
	       }
    }
    //增加选项卡
</script>
</html>

控制层

/**
     *
     * defaultValue： 默认的值为0
     * required：
     *          true：默认的，必须传递的参数
     *          false：不是必须传递的
     * @param id
     * @return
     */
    @ResponseBody
    @RequestMapping("tree2")
    public List<EasyuiVo> tree2(@RequestParam(defaultValue = "0",required = false) int id){

        List<EasyuiVo> list =easyuiService.treeList2(id);
        return list;
    }

service层实现类

 /**
     * 方法二
     * @param id
     * @return
     */
    @Override
    public List<EasyuiVo> treeList2(int id) {
        return easyuiMapper.treeList(id);
    }