jsp页面的三级树形菜单代码，后端提供java的json串格式：{result:[{region,rs:[{region,regions[]}]}]}；
以下为jsp页面代码，引用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
<style>
ul {
display: none;
list-style: none;
cursor: pointer;
}
#U1 {
display: block;
//display: none;
}
#tree img {
display: block;
float: left;
width: 20px;
height: 20px;
}
</style>
<base href="<%=basePath%>">
<meta charset="utf-8" />
<title>省市区三级树形菜单</title>
</head>
<body>
<h1><i class="fa fa-object-group"></i>省市区三级树形菜单</h1>
<!-- 按钮区域 -->
<button id="btn_find" type="button" class="btn btn-default" onclick="findAllId(${userId})">
保存
</button>
<button type="reset" class="btn btn-warning" onclick="javascript:history.go(-1);">返回</button>
<!-- 省市区所在地 始 -->
<div id="tree" class="ku" style="font-size: 14px;">
<h1>项目所在地</h1>
<input id="C1" onclick="C();" type='checkbox' style="display: block; float: left; width: 15px; height: 15px;">
全选
<ul id="U1">
<% int i=1; %>
<c:forEach items="${region}" var="xin">
<img src="../images/jia.png" onclick="UM(<%=i %>)" id="U1M<%=i %>" />
<c:choose>
<c:when test="${xin.region.checked}">
<input name="checkboxsd" checked="checked" id="U1C<%=i %>" class="C1"
value="${xin.region.id}" onclick="UC(<%=i %>);" type='checkbox' style="display: block; float: left; width: 15px; height: 15px;">
</c:when>
<c:otherwise>
<input name="checkboxsd" id="U1C<%=i %>" class="C1"
value="${xin.region.id}" onclick="UC(<%=i %>);" type='checkbox' style="display: block; float: left; width: 15px; height: 15px;">
</c:otherwise>
</c:choose>
<li id="U1L<%=i %>">${xin.region.name}
<ul id="U1U<%=i %>" style="clear: left;">
<% int j=1; %>
<c:forEach items="${xin.rs}" var="xi">
<img src="../images/jia.png" onclick="UMM(<%=i %>,<%=j %>)" id="U1M<%=i %>M<%=j %>" style="clear: left;"/>
<c:choose>
<c:when test="${xi.region.checked}">
<input name="checkboxsd" checked="checked" id="U1C<%=i %>C<%=j %>" class="U1C<%=i %> C1"
value="${xi.region.id}" onclick="UCC(<%=i %>,<%=j %>);" type='checkbox' style="display: block; float: left; width: 15px; height: 15px;">
</c:when>
<c:otherwise>
<input name="checkboxsd" id="U1C<%=i %>C<%=j %>" class="U1C<%=i %> C1"
value="${xi.region.id}" onclick="UCC(<%=i %>,<%=j %>);" type='checkbox' style="display: block; float: left; width: 15px; height: 15px;">
</c:otherwise>
</c:choose>
<li id="U1L<%=i %>L<%=j %>" >${xi.region.name}
<ul id="U1U<%=i %>U<%=j %>" style="clear: left;">
<% int k=1; %>
<c:forEach items="${xi.regions}" var="x">
<c:choose>
<c:when test="${x.checked}">
<input name="checkboxsd" checked="checked" class="U1C<%=i %>C<%=j %> U1C<%=i %> C1"
value="${x.id}" onclick="UCC(<%=i %>,<%=j %>);" type='checkbox' style="display: block; float: left; width: 15px; height: 15px;">
</c:when>
<c:otherwise>
<input name="checkboxsd" class="U1C<%=i %>C<%=j %> U1C<%=i %> C1"
value="${x.id}" onclick="UCCC(<%=i %>,<%=j %>);" type='checkbox' style="display: block; float: left; width: 15px; height: 15px;">
</c:otherwise>
</c:choose>
<li >${x.name}</li>
<% k++; %>
</c:forEach>
</ul>
</li>
<% j++; %>
</c:forEach>
</ul>
</li>
<% i++; %>
</c:forEach>
</ul>
</div>
<!-- 省市区所在地 末 -->
</body>
<script>
// 改 --- 根据复选框id值，跳转页面 ---- 改 - 多选
function findAllId(userId) {
var url = "/userManage/userPower";
clickJump(url,userId);
}
// ---------------------- 工具方法 ---------------------------------
// 执行跳转 --- 点击按钮后跳转页面 ---- 执行跳转 - 多选
function clickJump(url,userId) {
var id = getuserids();
//window.location.href = url + "?dataperIds=" + id+"&userId="+userId;
var code = {
'dataperIds' : id,
'userId' : userId
}
$.ajax({
type: "POST",//请求方式为POST
url: url,//检验url
data: code,//请求数据
dataType:'json',//数据类型为JSON类型
cache: false,//关闭缓存
success: function(data){//响应成功
alert("data "+data);
if("success" == data){
alert("数据权限配置成功！ ");
}else{
alert("数据权限配置失败！ ");
}
window.location.href="/userManage/all";
}
});
}
//获取选择的复选框所在行的id值 ---- 单行
function getuserid() {
var rows = document.getElementById("tables").rows;
var objs = document.getElementsByName("checkboxs");
var temp = "";
var count = 0;
for (var i = 0; i < objs.length; i++) {
if (objs[i].checked) {
count++;
if (count == 2) {
return -1;
}
var r = objs[i].parentElement.parentElement.rowIndex;
if (temp == "") {
temp = rows[r].cells[1].innerText;
} else {
temp += "," + rows[r].cells[1].innerText;
}
}
}
return temp;
}
// 获取选择的复选框所在行的id值 ---- 多行
function getuserids() {
var objsd = document.getElementsByName("checkboxsd");
var temp = "";
for (var i = 0; i < objsd.length; i++) {
if (objsd[i].checked) {
var r = objsd[i].parentElement.parentElement.rowIndex;
if (temp == "") {
temp = objsd[i].value;
} else {
temp += "," + objsd[i].value;
}
}
}
return temp;
}
</script>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
//图片切换，树形菜单:展开.折合 -- 一级菜单
function UM(i) {
if($("#U1U"+i).is(":visible")) {
// alert("隐藏内容");
$("#U1M"+i).attr("src", "../images/jia.png");
} else {
// alert("显示内容");
$("#U1M"+i).attr("src", "../images/jian.png");
}
$("#U1U"+i).slideToggle(300);
}
//图片切换，树形菜单:展开.折合 -- 二级菜单
function UMM(i,j) {
if($("#U1U"+i+"U"+j).is(":visible")) {
// alert("隐藏内容");
$("#U1M"+i+"M"+j).attr("src", "../images/jia.png");
} else {
// alert("显示内容");
$("#U1M"+i+"M"+j).attr("src", "../images/jian.png");
}
$("#U1U"+i+"U"+j).slideToggle(300);
}
//加载页面时，判断是否全选
$(function () {
All();
});
//点击所有树形复选框时，判断是否全选
$(".C1").click(function(){
All();
});
//判断是否全选,勾选全选框
function All(){
var objsd = document.getElementsByName("checkboxsd");
var c=0;
for (var i = 0; i < objsd.length; i++) {
if (objsd[i].checked) {
c++;
}
}
if(c == objsd.length){
$("#C1").prop("checked",true);
}else{
$("#C1").prop("checked",false);
}
}
//全选 -- 所有菜单
function C() {
$(".C1").prop("checked",$("#C1").prop("checked"));
}
//层级全选 -- 一级菜单
function UC(i) {
$(".U1C"+i).prop("checked",$("#U1C"+i).prop("checked"));
}
//层级全选 -- 二级菜单
function UCC(i,j) {
$(".U1C"+i+"C"+j).prop("checked",$("#U1C"+i+"C"+j).prop("checked"));
//当勾选二级菜单时，同时勾选上级一级菜单。
if($(".U1C"+i).is(":checked")) {
$("#U1C"+i).prop("checked",true);
}else{
$("#U1C"+i).prop("checked",false);
}
}
//层级勾选 -- 三级菜单
function UCCC(i,j) {
//当勾选三级菜单时，同时勾选上级二级菜单。
if($(".U1C"+i+"C"+j).is(":checked")) {
$("#U1C"+i+"C"+j).prop("checked",true);
}else{
$("#U1C"+i+"C"+j).prop("checked",false);
}
//当勾选二级菜单时，同时勾选上级一级菜单。（防止三级选择影响二级判断，所以区分判断勾选）
if($(".U1C"+i).is(":checked")) {
$("#U1C"+i).prop("checked",true);
}else{
$("#U1C"+i).prop("checked",false);
}
}
</script>
</html>
1855
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
