Layui 树形菜单使用

最新推荐文章于 2024-03-23 06:17:57 发布

CoderZ9090

最新推荐文章于 2024-03-23 06:17:57 发布

阅读量5.7k

点赞数 1

分类专栏： Java 文章标签：树形菜单、前端

本文链接：https://blog.csdn.net/zhengyanfeng1989/article/details/88568696

版权

Java 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

一：如果你的项目中用到了树形菜单，Layui 也许是一个不错的选择：Layui 官方网站链接。

二：使用简介：

1、前端界面，项目中导入Layui 框架

2、前端界面，使用树形菜单控件，由于是Javaweb项目，这里采用jsp页面，代码如下：

<%--
  Created by IntelliJ IDEA.
  User: zyf
  Date: 2019/3/1
  Time: 18:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/client/clientui/layui/css/layui.css"  media="all">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <jsp:include flush="true" page="/common/header39.jsp"/>
    <title></title>
</head>

<body>


<div style="display: inline-block; width: 320px; height: 100%; padding: 10px; border: 1px solid #ddd; overflow: auto;">
    <ul id="organization"></ul>
</div>

<script src="/client/clientui/layui/layui.js" charset="utf-8"></script>

<script>

    layui.use(['tree', 'layer'], function(){
        var layer = layui.layer
            ,$ = layui.jquery;

        //读取组织架构
        var organizationArray;
        var jsonParam = {obj:'messageSelectService',method:'getOrganizationTree',count:1,param1:'2531'};
        $.fn.feajax(jsonParam,false,'json',function(data) {
            console.log("---json----" + data);
            organizationArray = data;
        });

        layui.tree({
            elem: '#organization' //指定元素
            ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
            ,click: function(item){ //点击节点回调
                //layer.msg('当前节11名称：'+ item.name + '全部参数：'+ JSON.stringify(item));
                updateUsers(JSON.stringify(item));
            }
            ,nodes: organizationArray
        });

    });


    function updateUsers(deptItem) {
        console.log("----------------" + deptItem);
       // window.parent.parent.frames[1].location.href="select_user2.jsp?deptItem=" + deptItem;
        if(deptItem.length>4000){
            return;
        }
        window.parent.frames[1].location.href="select_user.jsp?deptItem=" + deptItem;
    }

    layui.use('form', function(){
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

        //……

        //但是，如果你的HTML是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来手动渲染，跟这类似的还有 element.init();
        form.render();
    });
</script>

</body>
</html>

3、数据加载，后台返回一个树形json丢给前端页面就可以展示树形菜单了，后端代码如下：

    //获取组织架构树
    public ArrayList<Map<String,Object>> getOrganizationTree(String rootDept ){
        ArrayList<Map<String,Object>> organizationArray = new ArrayList<>();
        if (rootDept == null || rootDept.isEmpty()){return organizationArray;}
        DataTable organizationDt = dao.getDataTable(" SELECT * FROM FE_BASE5..SYS_GROUP WHERE SG00 >=  '"+rootDept+"'  AND SG21 = 1 AND SG07 = 1 ORDER BY SG00 " , 1 , Integer.MAX_VALUE);
        if (organizationDt != null && organizationDt.getRow() > 0 ){
            for (int i = 0 ; i<organizationDt.getRow() ; i ++){
                Map<String,Object> organizationMap = new HashMap<>();
                FieldSet organizationFs = organizationDt.getData(i);
                organizationMap.put("name",organizationFs.getString("SG01"));
                organizationMap.put("id",organizationFs.getInt("SG00"));
                organizationMap.put("spread","true");
                ArrayList<Map<String,Object>> tempArray = getSubOrganization(organizationFs);
                if (tempArray != null && tempArray.size()>0){
                    organizationMap.put("children",tempArray);
                }
                organizationArray.add(organizationMap);
            }
        }
        return organizationArray;
    }
    //组织架构树迭代方法
    public ArrayList<Map<String,Object>> getSubOrganization( FieldSet organizationFs){
        DataTable subDt = dao.getDataTable(" SELECT * FROM FE_BASE5..SYS_GROUP WHERE SG04 = '"+organizationFs.getString("SG04")+"/"+ organizationFs.getString("SG01") + "' AND SG21 = 1 AND SG08 < 9  ORDER BY SG08" , 1 , Integer.MAX_VALUE);
        ArrayList<Map<String,Object>> tempArray = new ArrayList<>();
        if (subDt != null && subDt.getRow() > 0){
            for (int j = 0 ; j<subDt.getRow() ; j++){
                Map<String,Object> tempMap = new HashMap<>();
                FieldSet subFs = subDt.getData(j);
                Integer id = subFs.getInt("SG00");
                System.out.println("-------SG00-------" + id);
                tempMap.put("name",subFs.getString("SG01"));
                tempMap.put("id",subFs.getInt("SG00"));
                tempMap.put("spread","true");
                ArrayList<Map<String,Object>> nextOaganizationArray = getSubOrganization(subFs);
                if (nextOaganizationArray != null){
                    tempMap.put("children",nextOaganizationArray);
                }
                tempArray.add(tempMap);
            }
        }
        return tempArray;
    }

4、树形菜单效果图

CoderZ9090

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
Layui 树形菜单使用

一：如果你的项目中用到了树形菜单，Layui 也许是一个不错的选择：Layui 官方网站链接。二：使用简介：1、前端界面，项目中导入Layui 框架2、前端界面，使用树形菜单控件，由于是Javaweb项目，这里采用jsp页面，代码如下：&lt;%-- Created by IntelliJ IDEA. User: zyf Date: 2019/3/1 Ti...
复制链接

扫一扫