easyUI动态生成多级菜单树

最新推荐文章于 2022-07-20 17:11:03 发布

wangshiwen226

最新推荐文章于 2022-07-20 17:11:03 发布

阅读量3.6k

点赞数

分类专栏： easyUI 文章标签： easyui

本文链接：https://blog.csdn.net/Seri_com/article/details/62061103

版权

easyUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>菜单管理</title>
<%@ include file="../head.jsp"%>
<style type="text/css">``
</style>
</head>
<body>
<div class="easyui-layout" style="width: 1200px; height: 650px;">
    <div data-options="region:'west',title:'部门',split:true" style="width: 200px;">
    <ul id="menuTreeManage" class="easyui-tree"animate:true></ul>
   </div>
   <div data-options="region:'center',title:'操作'"style="padding-left: 20px; background: #eee;width: 600px;">
</body>
<script type="text/javascript">

    /*加载子菜单  */
    function showSubMenu(id) {
        var subNode;
        $.ajax({
            type : "POST",
            async : false,
            url : "getSmallMenu",
            data : "id=" + id,
            timeout : 10000,
            success : function(msg) {
                subNode = msg;
            },
            error : function() {
                alert('网络超时，请重试！');
            }
        });
        return subNode;
    }
    /*将从前台传过来的数据进行格式转换  */
    function convert(rows) {
        function exists(rows, parentId) {
            for (var i = 0; i < rows.length; i++) {
                if (rows[i].id == parentId) {
                    return true;
                }
            }
            return false;
        }
        var nodes = [];
        for (var i = 0; i < rows.length; i++) {
            var row = rows[i];
            if (!exists(rows, row.pid)) {
                nodes.push({
                    id : row.id,
                    text : row.name
                });
            }
        }
        var toDo = [];
        for (var i = 0; i < nodes.length; i++) {
            toDo.push(nodes[i]);
        }
        while (toDo.length) {
            var node = toDo.shift();
            for (var i = 0; i < rows.length; i++) {
                var row = rows[i];
                if (row.pid == node.id) {
                    var child = {
                        id : row.id,
                        text : row.name,
                    };
                    if (node.children) {
                        node.children.push(child);
                    } else {
                        node.children = [ child ];
                    }
                    toDo.push(child);
                }
            }
        }
        return nodes;
    }

    /*初始化菜单  */
    function initMenuTree() {
        $('#menuTreeManage').tree({
            url : 'findAllMenu',
            lines : true,
            cascadeCheck : false,
            loadFilter : function(data) {
                $('#cz').datagrid({
                    checkOnSelect :true,
                    rownumbers : true,
                    pagination : true,
                    striped:true,
                    data : data, 
                    columns:[[    
                              {field:'xxx',title:'选择',align:'center',width:20,checkbox:'true'},    
                              {field:'name',title:'菜单名称',align:'center',width:200},    
                              {field:'url',title:'URL',align:'center',width:200},   
                              {field:'_operate',title:'操作',align:'center',width:100,formatter:compile},    
                          ]],

                });
                return convert(data);
            },
            onClick : function(node) {
                var selectTarget = $('#menuTreeManage').tree('getSelected');
                if(!selectTarget.children){
                    $('#menuTreeManage').tree('append', {
                        parent : selectTarget.target,
                        data : JSON.parse(showSubMenu(selectTarget.id)),
                    });
                }
                $('#cz').datagrid({  //单击父菜单后从新加载右边datagrid中菜单，显示子菜单
                    //singleSelect : true,
                    rownumbers : true,
                    pagination : true,
                    striped : true,
                    checkOnSelect :true,
                    data:JSON.parse(showSubMenu(selectTarget.id)),
                    columns:[[    
                              {field:'xxx',title:'选择',align:'center',width:20,checkbox:'true'},    
                              {field:'name',title:'菜单名称',align:'center',width:200},    
                              {field:'url',title:'URL',align:'center',width:200},   
                              {field:'_operate',title:'操作',align:'center',width:100,formatter:compile},    
                          ]],
                });
            }
        });
    }



</script>
</html>

wangshiwen226

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyUI动态生成多级菜单树

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>菜单管理
复制链接

扫一扫