前端页面实现树形结构
树形结构的实现
第一步导入js
下载地址:https://codeload.github.com/vakata/jstree/legacy.zip/3.3.4
记得引到用到的页面
HTML代码
<div id="dialogRoleAuthority">
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//根据选中的菜单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; jif (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 sysMMenus = sysMMenuMapper.selectAll();
List sysMenuAuths = sysMenuAuthMapper.selectAll();
List lists = new ArrayList();
for (int i=0;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
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 sysRoleMenus = sysRoleMenuMapper.selectByMRole(id);
List sysRoleAuths = sysRoleAuthMapper.selectByMRole(id);
//把需要选中的菜单id拼成一个字符串
StringBuffer sb = new StringBuffer();
for (int i=0;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
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来查找对应的菜单需要加载多次树形结构,而树形结构代码只能加载一次,所以展示一次树形结构之后就要删掉,否则会出现树形结构数据不变的情况.
设计数据库菜单表时,首先要先展示所有的菜单,然后根据菜单角色关联表,来显示需要选择的菜单