Layui----动态树-阿里云开发者社区

🦁介绍

🦁动态树是什么

LayUI的动态树（Dynamic Tree）是LayUI框架中提供的一种功能强大且易于使用的组件，用于在网页中展示具有层级结构的数据，LayUI是一款基于jQuery的前端开发框架，动态树是LayUI框架中提供的一个组件，用于在网页中展示具有层级结构的数据，如树形菜单。动态树组件可以实现数据的展开和折叠、节点的选中和取消选中等功能，并提供了丰富的事件和方法，方便开发者对树节点进行操作和控制。通过动态树组件，开发者可以方便地实现树状结构的数据展示和交互操作，提升用户体验。通常用于创建树形菜单或文件目录等场景。

动态树组件提供了丰富的功能和选项，使开发者能够方便地创建和交互树状结构的数据。下面是动态树组件的一些主要特点和功能：

🦁数据格式灵活：动态树组件支持各种数据格式，如数组、JSON对象等。开发者可以根据需求选择最适合的数据格式来创建树形结构。

🦁数据异步加载：动态树可以通过异步加载方式获取数据，特别适用于大型数据量或需要从后端动态获取数据的情况。可以通过设置异步数据源来实现数据的动态加载。

🦁节点操作：动态树组件提供了一系列方法和事件，用于操作树节点。可以添加、删除、修改节点，展开、折叠节点，选择、取消选择节点等。

🦁样式自定义：可以通过设置节点的图标、颜色等样式，自定义节点的外观。同时也支持自定义节点的模板，使开发者可以灵活地展示节点的内容。

🦁事件监听：动态树组件提供了多个事件，可以监听节点的点击、展开、折叠等操作，以及其他自定义事件。通过事件监听，可以实现与节点交互的逻辑。

🦁扩展性：动态树组件支持扩展，可以根据实际需求扩展自定义功能，比如添加拖拽、搜索、排序等功能。

总的来说，LayUI的动态树组件为开发者提供了方便易用的工具，用于创建和操作树形结构的数据。它的灵活性和丰富的功能使开发者能够轻松地构建交互性强、用户友好的树状菜单或目录结构。

🦁 作用

LayUI的动态树组件在前端开发中具有很多作用和用途，下面详细说明几个主要的作用：

🦁 创建树形菜单：动态树组件可用于创建具有层级结构的树形菜单。树形菜单在很多网站和应用中常见，它可以有效组织和展示大量的菜单选项。通过动态树组件，可以轻松地创建多级菜单，并提供展开、折叠、选中等交互操作，方便用户浏览和选择菜单项。

🦁 构建文件目录：动态树可以用于构建文件目录结构。在一些文件管理系统、文档管理系统或网盘应用中，通常需要以树形结构展示文件夹和文件的层级关系。动态树组件可以帮助开发者实现文件目录的显示和操作，支持文件夹的展开、文件的选中等功能。

🦁 实现层级数据展示：有时候需要展示具有层级关系的数据，例如组织架构图、分类目录等。动态树组件可以将数据以树状结构的形式展示出来，使用户可以清晰地看到数据之间的层级关系，提供更好的信息展示效果。

🦁 动态加载大数据量：在一些数据量较大的场景下，使用动态加载的方式可以提升页面性能和用户体验。动态树组件支持异步数据加载，可以根据需要在用户交互时动态获取数据，避免一次性加载大量数据造成页面卡顿或加载时间过长的问题。

🦁 交互操作和数据筛选：动态树组件提供了丰富的节点操作方法和事件，可以实现节点的展开、折叠、选中等交互操作。同时，可以根据节点的属性或其他条件对树节点进行筛选，以显示符合条件的节点，方便用户快速定位和操作。

🦁案列及步骤

🦁数据库：

首先要准备好要展示在动态树上面的数据

🦁树形导航栏

我们先建一个java文件，里面包含了所有的方法以及属性

🦁Treevo

package com.zking.util;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
public class TreeVo<T> {
  /**
   * 节点ID
   */
  private String id;
  /**
   * 显示节点文本
   */
  private String text;
  /**
   * 节点状态，open closed
   */
  private Map<String, Object> state;
  /**
   * 节点是否被选中 true false
   */
  private boolean checked = false;
  /**
   * 节点属性
   */
  private Map<String, Object> attributes;
  /**
   * 节点的子节点
   */
  private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();
  /**
   * 父ID
   */
  private String parentId;
  /**
   * 是否有父节点
   */
  private boolean hasParent = false;
  /**
   * 是否有子节点
   */
  private boolean hasChildren = false;
  public String getId() {
    return id;
  }
  public void setId(String id) {
    this.id = id;
  }
  public String getText() {
    return text;
  }
  public void setText(String text) {
    this.text = text;
  }
  public Map<String, Object> getState() {
    return state;
  }
  public void setState(Map<String, Object> state) {
    this.state = state;
  }
  public boolean isChecked() {
    return checked;
  }
  public void setChecked(boolean checked) {
    this.checked = checked;
  }
  public Map<String, Object> getAttributes() {
    return attributes;
  }
  public void setAttributes(Map<String, Object> attributes) {
    this.attributes = attributes;
  }
  public List<TreeVo<T>> getChildren() {
    return children;
  }
  public void setChildren(List<TreeVo<T>> children) {
    this.children = children;
  }
  public boolean isHasParent() {
    return hasParent;
  }
  public void setHasParent(boolean isParent) {
    this.hasParent = isParent;
  }
  public boolean isHasChildren() {
    return hasChildren;
  }
  public void setChildren(boolean isChildren) {
    this.hasChildren = isChildren;
  }
  public String getParentId() {
    return parentId;
  }
  public void setParentId(String parentId) {
    this.parentId = parentId;
  }
  public TreeVo(String id, String text, Map<String, Object> state, boolean checked, Map<String, Object> attributes,
                  List<TreeVo<T>> children, boolean isParent, boolean isChildren, String parentID) {
    super();
    this.id = id;
    this.text = text;
    this.state = state;
    this.checked = checked;
    this.attributes = attributes;
    this.children = children;
    this.hasParent = isParent;
    this.hasChildren = isChildren;
    this.parentId = parentID;
  }
  public TreeVo() {
    super();
  }
}

🦁BuildTree

package com.zking.util;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class BuildTree {
  /**
   * 默认-1为顶级节点
   * @param nodes
   * @param <T>
   * @return
   */
  public static <T> TreeVo<T> build(List<TreeVo<T>> nodes) {
    if (nodes == null) {
      return null;
    }
    List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();
    for (TreeVo<T> children : nodes) {
      String pid = children.getParentId();
      if (pid == null || "0".equals(pid)) {
        topNodes.add(children);
        continue;
      }
      for (TreeVo<T> parent : nodes) {
        String id = parent.getId();
        if (id != null && id.equals(pid)) {
          parent.getChildren().add(children);
          children.setHasParent(true);
          parent.setChildren(true);
          continue;
        }
      }
    }
    TreeVo<T> root = new TreeVo<T>();
    if (topNodes.size() == 1) {
      root = topNodes.get(0);
    } else {
      root.setId("000");
      root.setParentId("0");
      root.setHasParent(false);
      root.setChildren(true);
      root.setChecked(true);
      root.setChildren(topNodes);
      root.setText("顶级节点");
      Map<String, Object> state = new HashMap<>(16);
      state.put("opened", true);
      root.setState(state);
    }
    return root;
  }
  /**
   * 指定idparam为顶级节点
   * @param nodes
   * @param idParam
   * @param <T>
   * @return
   */
  public static <T> List<TreeVo<T>> buildList(List<TreeVo<T>> nodes, String idParam) {
    if (nodes == null) {
      return null;
    }
    List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();
    for (TreeVo<T> children : nodes) {
      String pid = children.getParentId();
      if (pid == null || idParam.equals(pid)) {
        topNodes.add(children);
        continue;
      }
      for (TreeVo<T> parent : nodes) {
        String id = parent.getId();
        if (id != null && id.equals(pid)) {
          parent.getChildren().add(children);
          children.setHasParent(true);
          parent.setChildren(true);
          continue;
        }
      }
    }
    return topNodes;
  }
}

🦁dao方法

🦁BaseDao

package com.zking.util;
import java.lang.reflect.Field;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
 * 所有Dao层的父类 BookDao UserDao OrderDao ...
 * 
 * @author Administrator
 *
 * @param <T>
 */
public class BaseDao<T> {
  /**
   * 适合多表联查的数据返回
   * @param sql
   * @param pageBean
   * @return
   * @throws SQLException
   * @throws InstantiationException
   * @throws IllegalAccessException
   */
  public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean)
      throws SQLException, InstantiationException, IllegalAccessException {
    List<Map<String, Object>> list = new ArrayList<>();
    Connection con = DBAccess.getConnection();
    PreparedStatement pst = null;
    ResultSet rs = null;
    /*
     * 是否需要分页？ 无需分页（项目中的下拉框，查询条件教员下拉框，无须分页） 必须分页（项目中列表类需求、订单列表、商品列表、学生列表...）
     */
    if (pageBean != null && pageBean.isPagination()) {
      // 必须分页（列表需求）
      String countSQL = getCountSQL(sql);
      pst = con.prepareStatement(countSQL);
      rs = pst.executeQuery();
      if (rs.next()) {
        pageBean.setTotal(String.valueOf(rs.getObject(1)));
      }
      // 挪动到下面，是因为最后才处理返回的结果集
      // -- sql=SELECT * FROM t_mvc_book WHERE bname like '%圣墟%'
      // -- pageSql=sql limit (page-1)*rows,rows 对应某一页的数据
      // -- countSql=select count(1) from (sql) t 符合条件的总记录数
      String pageSQL = getPageSQL(sql, pageBean);// 符合条件的某一页数据
      pst = con.prepareStatement(pageSQL);
      rs = pst.executeQuery();
    } else {
      // 不分页（select需求）
      pst = con.prepareStatement(sql);// 符合条件的所有数据
      rs = pst.executeQuery();
    }
    // 获取源数据
    ResultSetMetaData md = rs.getMetaData();
    int count = md.getColumnCount();
    Map<String, Object> map = null;
    while (rs.next()) {
      map = new HashMap<>();
      for (int i = 1; i <= count; i++) {
//        map.put(md.getColumnName(i), rs.getObject(i));
        map.put(md.getColumnLabel(i), rs.getObject(i));
      }
      list.add(map);
    }
    return list;
  }
  /**
   * 
   * @param sql
   * @param attrs
   *            map中的key
   * @param paMap
   *            jsp向后台传递的参数集合
   * @return
   * @throws SQLException
   * @throws NoSuchFieldException
   * @throws SecurityException
   * @throws IllegalArgumentException
   * @throws IllegalAccessException
   */
  public int executeUpdate(String sql, String[] attrs, Map<String, String[]> paMap) throws SQLException,
      NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException {
    Connection con = DBAccess.getConnection();
    PreparedStatement pst = con.prepareStatement(sql);
    for (int i = 0; i < attrs.length; i++) {
      pst.setObject(i + 1, JsonUtils.getParamVal(paMap, attrs[i]));
    }
    return pst.executeUpdate();
  }
  /**
   * 批处理
   * @param sqlLst
   * @return
   */
  public static int executeUpdateBatch(String[] sqlLst) {
    Connection conn = null;
    PreparedStatement stmt = null;
    try {
      conn = DBAccess.getConnection();
      // 设置不自动提交
      conn.setAutoCommit(false);
      for (String sql : sqlLst) {
        stmt = conn.prepareStatement(sql);
        stmt.executeUpdate();
      }
      conn.commit();
    } catch (Exception e) {
      try {
        conn.rollback();
      } catch (SQLException e1) {
        e1.printStackTrace();
        throw new RuntimeException(e1);
      }
      e.printStackTrace();
      throw new RuntimeException(e);
    } finally {
      DBAccess.close(conn, stmt, null);
    }
    return sqlLst.length;
  }
  /**
   * 通用的增删改方法
   * 
   * @param book
   * @throws Exception
   */
  public int executeUpdate(String sql, T t, String[] attrs) throws Exception {
    // String[] attrs = new String[] {"bid", "bname", "price"};
    Connection con = DBAccess.getConnection();
    PreparedStatement pst = con.prepareStatement(sql);
    // pst.setObject(1, book.getBid());
    // pst.setObject(2, book.getBname());
    // pst.setObject(3, book.getPrice());
    /*
     * 思路： 1.从传进来的t中读取属性值 2.往预定义对象中设置了值
     * 
     * t->book f->bid
     */
    for (int i = 0; i < attrs.length; i++) {
      Field f = t.getClass().getDeclaredField(attrs[i]);
      f.setAccessible(true);
      pst.setObject(i + 1, f.get(t));
    }
    return pst.executeUpdate();
  }
  /**
   * 通用分页查询
   * 
   * @param sql
   * @param clz
   * @return
   * @throws Exception
   */
  public List<T> executeQuery(String sql, Class<T> clz, PageBean pageBean) throws Exception {
    List<T> list = new ArrayList<T>();
    Connection con = DBAccess.getConnection();
    ;
    PreparedStatement pst = null;
    ResultSet rs = null;
    /*
     * 是否需要分页？ 无需分页（项目中的下拉框，查询条件教员下拉框，无须分页） 必须分页（项目中列表类需求、订单列表、商品列表、学生列表...）
     */
    if (pageBean != null && pageBean.isPagination()) {
      // 必须分页（列表需求）
      String countSQL = getCountSQL(sql);
      pst = con.prepareStatement(countSQL);
      rs = pst.executeQuery();
      if (rs.next()) {
        pageBean.setTotal(String.valueOf(rs.getObject(1)));
      }
      // 挪动到下面，是因为最后才处理返回的结果集
      // -- sql=SELECT * FROM t_mvc_book WHERE bname like '%圣墟%'
      // -- pageSql=sql limit (page-1)*rows,rows 对应某一页的数据
      // -- countSql=select count(1) from (sql) t 符合条件的总记录数
      String pageSQL = getPageSQL(sql, pageBean);// 符合条件的某一页数据
      pst = con.prepareStatement(pageSQL);
      rs = pst.executeQuery();
    } else {
      // 不分页（select需求）
      pst = con.prepareStatement(sql);// 符合条件的所有数据
      rs = pst.executeQuery();
    }
    while (rs.next()) {
      T t = clz.newInstance();
      Field[] fields = clz.getDeclaredFields();
      for (Field f : fields) {
        f.setAccessible(true);
        f.set(t, rs.getObject(f.getName()));
      }
      list.add(t);
    }
    return list;
  }
  /**
   * 将原生SQL转换成符合条件的总记录数countSQL
   * 
   * @param sql
   * @return
   */
  private String getCountSQL(String sql) {
    // -- countSql=select count(1) from (sql) t 符合条件的总记录数
    return "select count(1) from (" + sql + ") t";
  }
  /**
   * 将原生SQL转换成pageSQL
   * 
   * @param sql
   * @param pageBean
   * @return
   */
  private String getPageSQL(String sql, PageBean pageBean) {
    // (this.page - 1) * this.rows
    // pageSql=sql limit (page-1)*rows,rows
    return sql + " limit " + pageBean.getStartIndex() + "," + pageBean.getRows();
  }
}

🦁perission

package com.zking.dao;
import java.util.ArrayList;
import java.util.List;
import com.zking.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;
public class PermissionDao extends BaseDao<Permission>{
  public List<Permission> list(Permission permission,PageBean pagebean) throws Exception {
    String sql="select * from t_easyui_permission where 1=1";
    return super.executeQuery(sql, Permission.class, pagebean);
  }
  //将这些平级数据转换成父子关系的数据
  public List<TreeVo<Permission>> menus(Permission permission,PageBean pagebean) throws Exception{
    //创建一个父子关系的集合  TreeVo
    List<TreeVo<Permission>> tvList = new ArrayList<TreeVo<Permission>>();
    //获取平级数据
    List<Permission> list = this.list(permission, pagebean);
    for (Permission per : list) {
      TreeVo<Permission> tv=new TreeVo<>();
      //将per对象转成tv对象，因为tv对象才有children
      tv.setId(per.getId()+"");
      tv.setText(per.getName());
      tv.setParentId(per.getPid()+"");
      tvList.add(tv);
    }
    return BuildTree.buildList(tvList, "-1");//这个地方填写一级菜单的id
  }
}

🦁后台servlet

package com.zking.web;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.zking.dao.PermissionDao;
import com.zking.entity.Permission;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;
public class PermissionAction extends ActionSupport implements ModelDriver<Permission>{
  private Permission permission=new Permission();
  private PermissionDao pd=new PermissionDao();
  public void menus(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    //调用方法
    List<TreeVo<Permission>> menus = pd.menus(null, null);
    //回显给前台
    ResponseUtil.writeJson(resp, menus);
  }
  @Override
  public Permission getModel() {
    return permission;
  }
}

🦁前台代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
  <%@include file="common/header.jsp" %>
  <!-- <script type="text/javascript" src="js/index.js"></script> -->
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->
      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
        <i class="layui-icon layui-icon-spread-left"></i>
      </li>
      <!-- Top导航栏 -->
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
      <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">nav groups</a>
        <dl class="layui-nav-child">
          <dd><a href="">menu 11</a></dd>
          <dd><a href="">menu 22</a></dd>
          <dd><a href="">menu 33</a></dd>
        </dl>
      </li>
    </ul>
    <!-- 个人头像及账号操作 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
          tester
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">Your Profile</a></dd>
          <dd><a href="">Settings</a></dd>
          <dd><a href="login.jsp">Sign out</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
      <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li> 
      </ul>
    </div>
  </div>
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
  </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
layui.use(['element', 'layer', 'util'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  $.ajax({
    url:"${pageContext.request.contextPath }/permission.action?methodName=menus",
    dataType:'json',
      success:function(data){
      /* console.log(data); */
      /* 定义标签要拼接的文本内容  */
      let datacontent = '';
        console.log(data);
      $.each(data,function(i,n){
        datacontent += ' <li class="layui-nav-item layui-nav-itemed">';
        datacontent +='<a class="" href="javascript:;">'+n.text+'</a>';
        /* 判断是否有子节点有就进行子菜单增加，没有就不加 */
        if(n.hasChildren){
          datacontent +='<dl class="layui-nav-child">';
          /* 循环所有的子节点  n.children*/
          $.each(n.children,function(index,node){
            datacontent += '<dd><a href="javascript:;">'+node.text+'</a></dd>';
          })
          datacontent += ' </dl> ';
        }
        datacontent += ' </li> ';
      })
      /* 重置里面的文本内容 */
      $("#menu").html(datacontent);
      //渲染
      element.render('menu');
    }
  });
  });
</script>
</body>
</html>

Layui----动态树

🦁介绍