前端页面实现树形结构

树形结构的实现

---

第一步导入js

下载地址:https://codeload.github.com/vakata/jstree/legacy.zip/3.3.4
记得引到用到的页面

HTML代码

<div id="dialogRoleAuthority">
        <form id="dlg_Add_Hospital" target="submitFrame" >
        <%--存放树形结构的div--%>
        <div id="menuTree" style="height: 400px;overflow:auto"></div>
        <input type="hidden" value="" id="rid">
        <div>
            <input type="hidden" id="inna">
            <input type="hidden" id="inmes">
        </div>
    </form>
</div>

JS代码

//展示树形的方法
var editRoleAuthModal = function(id){
        $("#rid").val(id);
        $.ajaxSetup({cache:false});
        $.ajax({
            url : contextPath + "/rolePower/power/"+id,
            type : 'get',
            dataType : 'json',
            success : function(result) {
                console.log(result);
                var check = result.checkNodeIds.toString();
                var checkNodeIds = check.split(",");//需要选中的节点ID，为数组
                $('#inmes').val(checkNodeIds);
                $("#menuTree").bind('loaded.jstree', function (e, data) {
                    $("#menuTree").jstree("open_all");
                    $("#menuTree").find("li").each( function () {
                        if (checkNodeIds!=null){
                            for (var i = 0; i < checkNodeIds.length; i++) {
                                if ($(this).attr("id") == checkNodeIds[i]) { //如果节点的ID等于checkNodeIds[i]，表示要选中//alert($(this).attr(“id”));
                                    $("#menuTree").jstree("check_node", $(this));
                                    break;
                                }
                            }}
                    });
                }).jstree({
                    core: {
                        'data': result.data,
                    },
                    plugins: ["themes", "json_data", "ui", "checkbox"],
                })
            }
        });
    }
//提交树形的方法
var getMenuIds = function(){
        var id = $("#rid").val();
        //获取所有默认选中的id
        var menus = $('#menuTree').jstree().get_checked();
        var menuss="";
        var menu;
        if (menus==null||menus==""||menus.length==0){
            menu="null";
        }else{
            for (var i=0;i<menus.length;i++){
                //根据选中的菜单id获取上级id,如果上级id是#,说明是一级菜单,
                // 如果不是那么把选中菜单id的上级id也加入到数组中
                if ($('#menuTree').jstree().get_parent(menus[i])=="#"){
                    menuss+=menus[i]+",";
                }else{
                    menuss+=$('#menuTree').jstree().get_parent(menus[i])+",";
                }
            }
            if (menuss!=null){
                menuss=menuss+menus.toString();
                menu = menuss.split(",")
                for (var j = 0; j<menu.length; j++){
                    if (menu[j]=='#'){
                        menu.splice(j,j+1);
                    }
                }
                menu = unique(menu);//数组去重
            };
        }
        console.log(id+"的顺丰到付"+menu);
        if (menu.length!=0){
            $.ajax({
                type: 'get',
                dataType : 'json',
                url: contextPath + "/rolePower/menus/"+id+"/mes/"+menu,
                success: function (result) {
                    if(result=='success'){
                        $.extMessager.popup("S","修改成功");
                    }else{
                        $.extMessager.popup("E","修改失败");
                    }
                    //重点:提交成功之后,需要删除树形结构,
                    $('#menuTree').jstree().destroy();
                    kg = false;
                    dialogRoleAuthority.dialog("close");
                }
            });
        }
    }
//数组去重复
    function unique(arr) {
        var result = [], hash = {};
        for (var i = 0, elem; (elem = arr[i]) != null; i++) {
            if (!hash[elem]) {
                result.push(elem);
                hash[elem] = true;
            }
        }
        return result;
    }

展示树形获取数据,后台代码

public PowerRes findPower(String URl, Long id){
        PowerRes powerRes = new PowerRes();
        List<SysMMenu> sysMMenus = sysMMenuMapper.selectAll();
        List<SysMenuAuth> sysMenuAuths = sysMenuAuthMapper.selectAll();
        List lists = new ArrayList();
        for (int i=0;i<sysMMenus.size();i++){
            Map map = new HashedMap();
            map.put("id",sysMMenus.get(i).getId().toString());
            //如果是一级菜单
            if (sysMMenus.get(i).getmMenuId()==null){
                map.put("parent","#");
                map.put("icon","http://"+URl+"/images/tree_icon.png");
            }else {
                map.put("parent",sysMMenus.get(i).getmMenuId().toString());
                map.put("icon","http://"+URl+"/images/tree_icon.png");
            }
            map.put("text",sysMMenus.get(i).getMenuName().toString());
            lists.add(map);
        }
        for (int i=0;i<sysMenuAuths.size();i++){
            Map map = new HashedMap();
            map.put("id",sysMenuAuths.get(i).getCode().toString());
            map.put("parent",sysMenuAuths.get(i).getMenuId().toString());
            map.put("text",sysMenuAuths.get(i).getName().toString());
            lists.add(map);
        }
        powerRes.setData(lists);
        List<SysRoleMenu> sysRoleMenus = sysRoleMenuMapper.selectByMRole(id);
        List<SysRoleAuth> sysRoleAuths = sysRoleAuthMapper.selectByMRole(id);
        //把需要选中的菜单id拼成一个字符串
        StringBuffer sb = new StringBuffer();
        for (int i=0;i<sysRoleMenus.size();i++){
            if (sysMMenuMapper.selectMenu(sysRoleMenus.get(i).getmMenuId())==0 && sysMenuAuthMapper.selectMenu(sysRoleMenus.get(i).getmMenuId())==0){
                sb.append(sysRoleMenus.get(i).getmMenuId()+",");
            }
        }
        for (int i=0;i<sysRoleAuths.size();i++){
            sb.append(sysRoleAuths.get(i).getAuthCode()+",");
        }
        powerRes.setCheckNodeIds(sb.toString());
        return powerRes;
    }

数据库设计

CREATE TABLE `sys_m_menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `menu_name` varchar(45) DEFAULT NULL COMMENT '菜单名',
  `request_url` varchar(100) DEFAULT NULL COMMENT '请求地址--bmc系统特殊对待',
  `show_order` int(11) NOT NULL DEFAULT '1' COMMENT '排序',
  `comments` varchar(200) DEFAULT NULL COMMENT '注释',
  `m_menu_id` int(11) DEFAULT NULL COMMENT '上级菜单ID',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `create_user` int(11) DEFAULT NULL COMMENT '创建者',
  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
  `update_user` int(11) DEFAULT NULL COMMENT '更新者',
  `menu_enname` varchar(100) DEFAULT NULL COMMENT '菜单英文名',
  PRIMARY KEY (`id`),
  KEY `fk_sys_m_menu_m_menu1_idx` (`m_menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=1042 DEFAULT CHARSET=utf8 COMMENT='菜单表';

CREATE TABLE `sys_role_menu` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `m_role_id` int(11) NOT NULL COMMENT '角色ID',
  `m_menu_id` int(11) NOT NULL COMMENT '菜单ID',
  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
  `create_user` int(11) DEFAULT NULL COMMENT '创建者',
  PRIMARY KEY (`id`),
  KEY `fk_sys_role_menu_m_role1_idx` (`m_role_id`),
  KEY `fk_sys_role_menu_m_menu1_idx` (`m_menu_id`)
) ENGINE=InnoDB AUTO_INCREMENT=10000214 DEFAULT CHARSET=utf8 COMMENT='角色菜单关系表';

遇到的问题

如果通过角色id来查找对应的菜单需要加载多次树形结构,而树形结构代码只能加载一次,所以展示一次树形结构之后就要删掉,否则会出现树形结构数据不变的情况.
设计数据库菜单表时,首先要先展示所有的菜单,然后根据菜单角色关联表,来显示需要选择的菜单