SSM+zTree+ajax树形控制

开发工具与关键技术：MyEclipse 、SSM 、layui、 ajax、 mysql、zTree

作者：李冬梅

撰写时间：2019年2月02日

查询树形角色权限树形：

Controller代码：

@RequestMapping(value = "/SelectModuleToRoleCondition", produces = { "application/json;charset=UTF-8" })
	@ResponseBody
	public String SelectModuleToRoleCondition(Integer userid) {
		JSONObject json = new JSONObject();
		String msg = "";
		json.put("state", "no");
		json.put("msg", "");
		json.put("data", "");
		try {
			// 查询菜单
			List<Menudata> menudatas = iMenudataService.selectMenudataAll();
			// 查询菜单权限
			List<Menupermissionsdata> menupermissionsdataMappers = iMenudataService
					.selectMenupermissionsdataCode();
			// 拼接数据
			List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
			for (int i = 0; i < menudatas.size(); i++) {
				Menudata item = menudatas.get(i);
				Map<String, Object> map = new HashMap<String, Object>();
				map.put("id", item.getMenucode());
				map.put("name", item.getMenuname());
				map.put("pId", "0");
				map.put("open", true);// 默认不展开
				map.put("chkDisabled", false);// 不禁用
				map.put("checked", false);//
				// open 展开节点 bool
				// chkDisabled 禁用复选框状态 bool
				// checked 勾选状态 bool
				list.add(map);
			}

			for (int i = 0; i < menupermissionsdataMappers.size(); i++) {
				Menupermissionsdata item = menupermissionsdataMappers.get(i);
				Map<String, Object> map = new HashMap<String, Object>();
				map.put("id", item.getMenupermissionscode());
				map.put("name", item.getMenupermissionsname());
				map.put("pId", item.getMenucode());
				map.put("open", true);// 默认不展开
				map.put("chkDisabled", false);// 不禁用
				map.put("checked", false);//
				// open 展开节点 bool
				// chkDisabled 禁用复选框状态 bool
				// checked 勾选状态 bool
				list.add(map);
			}

			// 查询用户分配的菜单
			List<RolemenudataKey> rolemenudataKeys = iMenudataService
					.selectRolemenudataKey(userid);
			for (int i = 0; i < rolemenudataKeys.size(); i++) {
				RolemenudataKey item1 = rolemenudataKeys.get(i);
				for (int j = 0; j < list.size(); j++) {
					Map<String, Object> map = list.get(j);
					if (map.get("pId").equals("0")
							&& item1.getMenucode().equals(map.get("id"))) {
						map.put("checked", true);
					}
				}
			}

			// 查询用户分配的权限
			List<RolemenupermissionsdataKey> rolemenupermissionsdataKeys = iMenudataService
					.selectRolemenupermissionsdataKey(userid);
			for (int i = 0; i < rolemenupermissionsdataKeys.size(); i++) {
				RolemenupermissionsdataKey item1 = rolemenupermissionsdataKeys
						.get(i);
				for (int j = 0; j < list.size(); j++) {
					Map<String, Object> map = list.get(j);
					if (!map.get("pId").equals("0")
							&& item1.getMenupermissionscode().equals(
									map.get("id"))) {
						map.put("checked", true);
					}
				}
			}
			json.put("data", list);
			json.put("state", "ok");
		} catch (Exception e) {
			msg = e.getMessage();
		}
		json.put("msg", msg);
		return json.toString();
	}

树形使用的两个插件：

jsp页面的代码：

// 获取分配权限html代码
function getJurisdictionHmtl() {
	var html = '';
	html += ' <!--用户信息-->';
	html += '<div  style="height:33px;line-height:33px;padding-left: 20px;">        ';
	html += ' <label style="padding-top: 10px;margin-left: 0px;">角色名称：<span id="lbRoleName"></span></label>';
	html += ' </div>';
	html += '<!--查询用户权限的结果树形及保存等按钮-->';
	html += '<div id="userAuthorityUpdate" class="layui-row" style="position:relative;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;">';
	html += ' <!--绑定树形-->';
	html += ' <div id="treeDemoDiv" style="overflow:auto;" class="layui-col-lg4 layui-col-md4 layui-col-sm6 layui-col-xs12 layui-col-lg-offset4 layui-col-md-offset4 layui-col-sm-offset3">';
	html += '     <ul id="treeDemo" class="ztree"></ul>';
	html += ' </div>';
	html += ' <!--保存权限-->';
	html += ' <div id="btnAuthorityUpdate" style="position:absolute;bottom:5px;border-top: 1px solid #e5e5e5;padding-top: 2px;text-align:center;left: 0px;right: 0px;">';
	html += '     <input class="layui-btn " type="button" value="保 存" onclick="savePermissions()" >';
	html += '     <input class="layui-btn layui-btn-primary" type="button" value="取 消" onclick="cancelPermissions()" >';
	html += '  </div>';
	html += '</div>';
	return html;
}

实现树形展示并绑定数据js代码：

// 树形参数
var setting = {
	check : {
		enable : true,
		chkDisabledInherit : true
	},
	data : {
		simpleData : {
			enable : true
		}
	}
};
//弹窗
var jurisdictionIndex = -1;
function OpenJurisdiction(roleId) {	
	var RoleID = roleId;// 角色ID
	if (RoleID == null || RoleID == '' || RoleID < 0) {
		layer.msg('请选择角色ID！')
		return false;
	}
	selectRoleID = RoleID;
	if (RoleID == 75) {
		layer.msg('超级管理员不用分配权限！')
		return false;
	}else{
		var html = getJurisdictionHmtl();
		// 弹出即全屏
		jurisdictionIndex = layer.open({
			type : 1,
			content : html,
			title : '分配权限：',
			area : [ '320px', '195px' ],
			maxmin : false
		});
		layer.full(jurisdictionIndex);// 最大化
		var loadIndex = layer.load(0, {
			shade : 0.3
		}); // 0代表加载的风格，支持0-2
		$.ajax({
			type : 'post',// 可选get
			url : ctx + '/Jurisdiction/SelectModuleToRoleCondition.do',// 这里是接收数据的PHP程序
			data : {
				userid:selectRoleID
			},// 传给PHP的数据，多个参数用&连接
			dataType : 'Json',// 服务器返回的数据类型 可选XML ,Json jsonp script html text等
			success : function(data, textStatus) {
				layer.close(loadIndex);// 隐藏加载界面
				var text = data.data;
				var db = [];

				if (data.data != null && data.data != '') {
					db = eval(data.data);
				}
				for ( var int = 0; int < db.length; int++) {
					db[int].id;
				}
				// 绑定树形
				$.fn.zTree.init($("#treeDemo"), setting, db);
				var clientHeight = window.document.documentElement.clientHeight;// 获取权限分配弹窗的内部高度
				$('#userAuthorityUpdate').css('height',
						(clientHeight - 43 - 10 - 33) + 'px');// 设置标签ID为"userAuthorityUpdate"的高度
				$('#treeDemoDiv').css('height',
						(clientHeight - 43 - 45 - 10 - 40) + 'px');// 设置用户权限树形的高度

			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				layer.close(loadIndex);// 隐藏加载界面
				// ajax提交失败的处理函数！
				layer.msg('查询系统功能模块数据失败!');
			}
		});
	}
}

成果展示：