spring boot-- 用jquery treeview 使权限数据树形显示并且进行回显权限数据

业务逻辑 我项目的权限设计是用户--角色--权限  之间相互多对多  这也是一般系统权限管理的通用模型。

所以 当我给角色进行权限分配的时候 要把权限数据用树形显示出来,并且把这个角色的已经有的权限给回显出来,因为业务需求 我们权限数据只有三层 所以暂不考虑复杂情形。

后台代码就是将数据库顶层权限数据获取出来 然后将他们的子集合数据封装进去 总共三层 这里就不细说了 如有问题可私聊我。

引入jquery.js,jquery.treeview.js,jquery.treeview.css

将要显示树形的数据通过<ul>和<li>封装成以下格式就可以了

            <ul id="tree">
				<li>
					1
				   <ul>
					  <li>
						 1.1
						   <ul>
							 <li>
                              1.1.1
							 </li>
							</ul>
						</li>
				    </ul>
				 </li>
				</ul>

然后我们通过thymeleaf模板引擎进行数据遍历和获取 通过th:each遍历 然后采用thymeleaf的工具类对象#lists来判断这个角色是否有此权限来进行回显数据

<ul id="tree">
									<li th:each="pr1:${privileges}">
										<input type="checkbox" name="privilegeIds" th:value="${pr1.id}" th:checked="${privilegeIds!=null}?${#lists.contains(privilegeIds,pr1.id)}:''"/><span class="folder">[[${pr1.name}]]</span>
										<ul>
											<li th:each="pr2:${pr1.chidren}">
												<input type="checkbox" name="privilegeIds" th:value="${pr2.id}" th:checked="${privilegeIds!=null}?${#lists.contains(privilegeIds,pr2.id)}:''"/><span class="folder" th:class="${pr2.chidren!=null}?'folder':'123'">[[${pr2.name}]]</span>
													<ul>
														<li th:each="pr3:${pr2.chidren}">
															<input type="checkbox" name="privilegeIds" th:value="${pr3.id}" th:checked="${privilegeIds!=null}?${#lists.contains(privilegeIds,pr3.id)}:''"/>[[${pr3.name}]]
														</li>
													</ul>
											</li>
										</ul>
									</li>
								</ul>

上面的th:checked来回显选中  其中的privilegeIds是后台封装的此角色的已经有的权限集合 然后通过thymeleaf工具类对象#lists进行判断

猜你喜欢

转载自blog.csdn.net/youseenoonehere/article/details/81091728