前端頁面實現樹形結構

樹形結構的實現

---

第一步導入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來查找對應的菜單需要加載多次樹形結構,而樹形結構代碼只能加載一次,所以展示一次樹形結構之後就要刪掉,否則會出現樹形結構數據不變的情況.
設計數據庫菜單表時,首先要先展示所有的菜單,然後根據菜單角色關聯表,來顯示需要選擇的菜單