OA--树结构展示

这里写图片描述

jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>后台管理</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="../../css/admin.css" />
<script type="text/javascript" src="../../easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="../../js/admin.js"></script>

</head>
<body class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:true,split:true" style="height: 80px; background: #666;">
    <div class="logo">后台管理†</div>
        <div class="logout">
            您好， ### | <a href="#">退出</a>
        </div>
    </div>
    <div data-options="region:'west',split:true,title:'系统菜单'" style="width: 15%">
        <div id="menuAccordion"></div>
    </div>
    <div data-options="region:'center',title:'工作区'">
        <div id="tabs" class="easyui-tabs" data-options="fit:true">
            <div id="deskTop" title="我的桌面" style="padding: 10px;">
                <p style="font-size: 14px">11111111111111</p>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </div>
        </div>
        <div id="mm" class="easyui-menu" style="display: none;">
            <div id="mm-tabclose" data-options="iconCls:'icon-application_delete'">关闭当前</div>
            <div id="mm-tabcloseother" data-options="iconCls:'icon-server_delete'">关闭其他</div>
            <div id="mm-tabcloseall" data-options="iconCls:'icon-folder_delete'">关闭全部</div>
        </div>
    </div>
</body>
</html>

$(function() {
    initAccordion();
    initTabsMenu();
});

function initTabsMenu() {
    $('#tabs').tabs({
        onContextMenu : function(e, title, index) {
            //取消右键默认项
            e.preventDefault();

            $('#mm').menu('show', {
                //菜单跟随
                left : e.pageX,
                top : e.pageY
            }).data("index", index);
            $("#mm").menu({
                onClick : function(item) {
                    closeTab(this, item.id);
                }
            });
        }
    });
}
//选中相应按钮,关闭相应tab
function closeTab(menu, type) {
    var allTabs = $("#tabs").tabs('tabs');
    var len = allTabs.length;
    var index = $(menu).data("index");

    if ('mm-tabclose' == type) {
        var closable = $('#tabs').tabs('getTab', index).panel('options').closable;
        if (closable) {
            $("#tabs").tabs("close", index);
        }
    } else if ('mm-tabcloseall' == type) {
        var closableindex = 0;

        for (var i = 0; i < len; i++) {
            var closable = $('#tabs').tabs('getTab', closableindex).panel(
                    'options').closable;

            if (closable) {
                $('#tabs').tabs('close', closableindex);
            } else {
                closableindex++;
            }
        }
    } else if ('mm-tabcloseother' == type) {
        var closableindex = 0;
        var focusIndex = index;

        for (var i = 0; i < len; i++) {
            var closable = $('#tabs').tabs('getTab', closableindex).panel(
                    'options').closable;

            if (index != i && closable) {
                $('#tabs').tabs('close', closableindex);

                if (index > i) {
                    focusIndex--;
                }
            } else {
                closableindex++;
            }
        }

        // 使触发关闭其他的tab被选中
        $('#tabs').tabs('select', focusIndex);
    }
}

//添加tab
function addTab(title, href, icon) {
    var tt = $('#tabs');
    // 如果tab已经存在,则选中该tab,否则增加新tab
    if (tt.tabs('exists', title)) {
        tt.tabs('select', title);
    } else {
        //如果是子节点，添加tab
        if (href) {
            tt.tabs('add', {
                title : title,
                // href: href,
                content : createFrame(title, href),
                closable : true,
                cache : true,
                iconCls : icon || 'icon-application'
            });
        }
    }
}

function createFrame(title, href) {
    var content = '<div style="overflow:hidden;width:100%;height:100%"><iframe name="'
            + title
            + '" src="'
            + href
            + '" frameborder="0" scrolling="no" width="100%" height="100%"></iframe></div>';
    return content;
}
//初始化accordion
function initAccordion() {
    // 初始化accordion
    $("#menuAccordion").accordion({
        fit : true,
        border : false,
        animate : true
    });
    // 生成主菜单
    $.ajax({
                type : "GET",
                url : "/menu/getMenus.do",
                data : {"parentID" : "System"},
                success : function(data) {
                    // 循环创建手风琴的项
                    var i = 0;
                    $.each(data,function(i, e) {
                        var id = e.id;
                        $('#menuAccordion').accordion('add',{
                        title : e.text,
                        content : "<ul id='tree"+ id + "' ></ul>",
                        selected : i++ == 0 ? true: false,
                        iconCls : e.iconCls
                        });

                    // i++;
                    // 创建树的项
                        $.ajax({
                            type : "GET",
                            url : "/menu/getMenus.do",
                            data : {"parentID" : id},
                            success : function(data) {
                                $("#tree" + id).tree(
                                    {
                                    data : data,
                                    animate : true,

                                onClick : function(node) {
                                          if (node.url) {
                                                addTab( node.text,node.url,node.iconCls);
                                              }},
                                onDblClick : function(node) {
                                                if (!node.url) {
                                                $(this).tree(node.state == 'closed' ? 'expand': 'collapse',node.target);
                                    // 在修改完该节点是否展开之后，要修改node的state属性，不然下次就无法折叠上
                                    node.state = node.state == 'closed' ? 'open': 'closed';
                                            }
                                            }
                                    });
                                }
                             });
                        });
                }
        });
}

返回的数据json

[{"children":[{"children":[],"iconCls":"icon-save","id":"4","text":"菜单管理","url":"toMenuManager.do"},{"children":[],"iconCls":"icon-save","id":"5","text":"用户管理","url":"toUserManager.do"},{"children":[],"iconCls":"icon-save","id":"6","text":"角色管理","url":"toRoleManager.do"}],"iconCls":"icon-save","id":"1","text":"系统设置","url":"toUserManager.do"},{"children":[{"children":[],"iconCls":"icon-save","id":"7","text":"地区设置"},{"children":[],"iconCls":"icon-save","id":"8","text":"行业类别设置"},{"children":[],"iconCls":"icon-save","id":"9","text":"员工设置"},{"children":[],"iconCls":"icon-save","id":"10","text":"科目设置","url":"toAccount.do"},{"children":[],"iconCls":"icon-save","id":"11","text":"组织架构","url":"toDepartment.do"}],"iconCls":"icon-save","id":"2","text":"基础设置","url":"toUserManager.do"},{"children":[{"children":[{"children":[],"iconCls":"icon-save","id":"22","text":"财务经费设置","url":"toFinanceSet.do"},{"children":[],"iconCls":"icon-save","id":"23","text":"预算追加申请","url":"toAddBudgetApply.do"}],"iconCls":"icon-save","id":"21","text":"配置管理"},{"children":[{"children":[],"iconCls":"icon-save","id":"25","text":"所有部门经费查询","url":"toAllDepartmentFinanceQuery.do"},{"children":[],"iconCls":"icon-save","id":"26","text":"费用项目汇总","url":"toFinanceAccountSum.do"},{"children":[],"iconCls":"icon-save","id":"27","text":"部门经费查询","url":"toDepartmentFinanceQuery.do"}],"iconCls":"icon-save","id":"24","text":"费用预算"}],"iconCls":"icon-save","id":"20","text":"财务管理"}]

后台

public void getMenus(String parentID,ModelMap modelMap, HttpServletRequest request,HttpServletResponse response) {
        //获取用户登录的UserID
        int uid= (Integer) sessionProvider.getAttribute(request, "uid", response);
        //权限id数组
        Integer[] pids= (Integer[]) sessionProvider.getAttribute(request, "pids", response);
        //获取菜单集合
        if(parentID ==null){
            parentID="System";
        }

        String tree = treeService.getTree(parentID, uid);
        ResponseUtils.renderJson(response, tree);

    }

public class TreeServiceImpl implements TreeService{
    @Autowired
    private TreeDao treeDao;

    //生成tree的json字符串
    public String getTree(Integer uid) {
        //获取根节点
        List<Tree> Trees = treeDao.getByPid("0",uid);
        List<Tree> bulidTree =this.bulidTree(Trees,uid);
        JSONObject jo=new JSONObject();
        jo.put("bulidTree", bulidTree);

//        StringUtil.StringToJson(jo.toString());

        return StringUtil.StringToJson(jo.toString());
    }


    public String getTree(String parentID,Integer uid) {
        //获取根节点
        List<Tree> Trees = treeDao.getByid(parentID,uid);
        List<Tree> bulidTree =this.bulidTree(Trees,uid);
        JSONObject jo=new JSONObject();
        jo.put("bulidTree", bulidTree);

//        StringUtil.StringToJson(jo.toString());

        return StringUtil.StringToJson(jo.toString());
    }

    //获取root节点的子节点
    public      List<Tree>  bulidTree(List<Tree> root,Integer uid){
        for (int i=0;i<root.size();i++) {
         //如果该节点是父节点，将该节点当做root节点，递归bulidTree
            try {
                List<Tree> sonTrees = treeDao.getByPid(root.get(i).getId(),uid);
                bulidTree(sonTrees,uid);
                root.get(i).setChildren(sonTrees);
            } catch (Exception e) {
                // 没有获取到数据
                e.printStackTrace();
                continue;
            }
        }
        return  root;
    }
}

    public static String StringToJson(String str) {
        String objectName="\"bulidTree\":";
        str=str.replaceAll(objectName, "");
        int index= str.lastIndexOf("}");
        str=str.substring(1, index);
        return str;
}

posted on 2017-09-04 19:45 2637282556 阅读(202) 评论(0) 编辑收藏举报