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