创建省-市-人员的三级菜单

于 2018-10-25 18:54:49 发布
阅读量229 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html+js 文章标签： 三级菜单 java html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dongyuxu342719/article/details/83384249
本文介绍了一种在面对大量用户数据时，如何优化前端展示速度的方法，通过后台预处理生成三级菜单结构，实现了高效展示。同时，详细解释了前端与后端的交互流程及菜单生成的代码实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

由于人员有两三千，需求要按省-市-人员三级菜单展示，便于勾选，起初的想法是ajax获取用户数据，然后循环按省市构造人员展示结构，但是测试发现数据量过大，导致页面卡死。无奈只有采用后台拼接好页面结构的字符串，然后前端获取数据后在最外层div直接append的方式来提高展示速度。测试两千多用户展示在6-7秒。下面是简要实现方式：

1、前端页面：

<!DOCTYPE html >
<%@include file="/common/jsp/header.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>菜单首页</title>
<script type="text/javascript"
	src="${ctx}/webResources/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript"
	src="${ctx}/webResources/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${ctx}/webResources/js/jquery.itab.1.2.js"></script>
<script type="text/javascript"
	src="${ctx}/webResources/js/sidebar-menu.js"></script>
<style type="text/css">
	a:link,a:visited{
 text-decoration:none;  /*超链接无下划线*/
}
a:hover{
 text-decoration:underline;  /*鼠标放上去有下划线*/
}
li {list-style-type:none;margin:0px;white-space: nowrap;}
.consureBtn {
	width: 30px;
	height: 25px;
	background: #0188fb;
	border: none;
	color: white;
	margin-left: 0px;
	margin-top:10px;
	position:absolute;
	bottom:0px;
	right:10px;
}
</style>
</head>
<script type="text/javascript">
$(document).ready(function(){
	$("#part1").css("height","397px");
	$(".btn-default").css("margin-top","-10px");
	getUsers();
	});
 	
 	function getUsers(){
		$(".menu ul").css("display","none");
 		$(".menu").html('');
 		//ajax获取用户数据
 		var url='showUsers.action';
 		var data={userId:$('#userId').val(),userName:$("#userName").val()};
 		$.ajax({
 			url:url,
 			data:data,
 			dataType:'json',
 			async:false, //必须是同步，否则页面在数据加载完成前就渲染结束
 			success:function(obj){
 				if(obj.result){
 					var arr=obj.data;
					$(".menuLeft").append(arr);
 				}else{
					alert(obj.message);
				}
 			},
 			error:function(){
 				alert("数据加载失败");
 			}
 		});
 		initMenu();
 	}
 	
 	/* 放弃这种在页面循环创建html结构的方式，采用后台直接生成
 		function getUsers(){
		$(".menu ul").css("display","none");
 		$(".menu").html('');
 		var url='showUsers.action';
 		var data={userId:$('#userId').val(),userName:$("#userName").val()};
 		$.ajax({
 			url:url,
 			data:data,
 			dataType:'json',
 			async:false, //必须是同步
 			success:function(obj){
 				if(obj.result){
 					var arr=obj.data;
					for(var i=0;i<arr.length;i++){
					var provEl='<li id="{provSec}"><input class="yeye" type="checkbox" value="selectAll" title="全选" onclick="choseThis(this)">'
			 				+'<a href="###"><img class="jiahao" alt="" src="${ctx}/common/img/jiahao.png" style="width:15px;height:15px;margin-right:6px;">'
			 				+'<span>{provName}</span></a><ul style="text-align:left;margin-left: -23px;"></ul></li>';
			 		var cityEl='<li  id="{citySec}"><input class="father" type="checkbox" value="selectAll" title="全选" onclick="choseThis(this)">'
			 		        +'<a href="#"><img class="jiahao" alt="" src="${ctx}/common/img/jiahao.png" style="width:15px;height:15px;margin-right:6px;">'
			 		        +'<span>{cityName}</span></a><ul style="text-align:left;margin-left: -22px;"></ul></li>';
			 		var userEl='<li id="{userId}"><input class="child" type="checkbox" onclick="choseThis(this)"><a href="#">{userName}</a></li>';
			 		var provId=arr[i].provId;
					var provName =arr[i].provName;
					var cityId = arr[i].cityId;
					var cityName=arr[i].cityName;
					var userId=arr[i].userId;
					var userName=arr[i].userName;
						//判断省份节点是否存在存在就直接添加元素，否则就先创建省份节点再添加元素
						if(!document.getElementById(provId)){
							var str=provEl.replace("{provName}",provName).replace("{provSec}",provId);
							$(".menuLeft").append(str);
							
						}
						if(!document.getElementById(cityId)){
								var str=cityEl.replace("{cityName}",cityName).replace("{citySec}",cityId);
								$("#"+provId).find('ul').eq(0).append(str);
								
							}
						var str=userEl.replace("{userId}",userId).replace("{userName}",userName);
						$("#"+cityId).find('ul').eq(0).append(str);
					}
 				}else{
					alert(obj.message);
				}
 			},
 			error:function(){
 				alert("数据加载失败");
 			}
 		});
 		initMenu();
 	} */
 	
 	function initMenu(){
    	$(".menu ul").css("display","none");    //文件准备好后，ul的样式为隐藏
        $(".menu a").on("click",function(){       //点击a的时候就执行以下函数
           $(this).next().toggle(function(){
           	if($(this).css("display")=='none'){
           		$(this).prev().children(".jiahao").attr("src","{ctx}/common/img/jiahao.png");
           	}else{
           		$(this).prev().children(".jiahao").attr("src","{ctx}/common/img/jianhao.png");
           	}
           });  //toggle提供为隐藏和显示相互转换的方法    意思是点击的这个 元素的下一个元素是显示的话就隐藏，是隐藏的话就显示
        });
    }
    
</script>
//引如勾选人员的操作js
<script type="text/javascript"
	src="${ctx}/common/js/menuMove.js"></script>
<body> 
	<div id="tree" style="width:600px;text-align:center;">
	<input type='hidden' value='${userId }' id='userId'>
	<div style="width:300px;float:left;border-right:1px solid #ccc;">
	<input type="text"  id="userName" style="width:200px;margin-left:18px;height:20px;padding-left:10px;border:1px solid #C7C7C7;"placeholder="搜索人员">
	<img src="${ctx }/common/img/sousuo.png"  style="width:20px;height:20px;top:10px;cursor:pointer;position: absolute;margin-top:2px;"  onclick="getUsers();">
	<div class="queryUsers" style="width:230px;margin-top:0px;height:300px;overflow:auto;float:right;margin-right:10px;">
<ul class="menuLeft menu" style="margin-left:-40px;text-align:left;" vlaue='menuLeft'>
<!--  -->
    <%-- <li  id='1'><input class='yeye' type="checkbox"  value="selectAll" title="全选" onclick="choseThis(this)"><a href="###"><img class="jiahao"alt="" src="${ctx }/common/img/jiahao.png" style="width:15px;height:15px;margin-right:6px;"><span>A系统</span></a>
 
        <ul style="text-align:left;margin-left: 103px;">
             <li id='11'><input class='father' type="checkbox"  value="selectAll" title="全选" onclick="choseThis(this)"><a href="#"><img class="jiahao"alt="" src="${ctx }/common/img/jiahao.png" style="width:15px;height:15px;margin-right:6px;"><span>部门1</span></a>
                <ul>
                    <li id='111'><input class='child' type="checkbox" onclick="choseThis(this)"><a href="#">文档1</a></li>
                    <li id='112'><input class='child' type="checkbox" onclick="choseThis(this)"><a href="#">文档2</a></li>
                </ul>
            </li>
              <li id='12'><input class='father' type="checkbox" id="c1" value="selectAll" title="全选" onclick="choseThis(this)"><a href="#"><img class="jiahao"alt="" src="${ctx }/common/img/jiahao.png" style="width:15px;height:15px;margin-right:6px;"><span>部门1</span></a>
                <ul>
                    <li id='121'><input class='child' type="checkbox" onclick="choseThis(this)"><a href="#">文档111111111111111</a></li>
                    <li id='122'><input class='child' type="checkbox" onclick="choseThis(this)"><a href="#">文档2</a></li>
                </ul>
            </li>
        </ul>
    </li>
       <li id='2'><input id='' class='yeye' type="checkbox"  value="selectAll" title="全选" onclick="choseThis(this)"><a href="###"><img class="jiahao"alt="" src="${ctx }/common/img/jiahao.png" style="width:15px;height:15px;margin-right:6px;"><span>B系统</span></a>
 
        <ul>
             <li id='21'><input class='father' type="checkbox"  value="selectAll" title="全选" onclick="choseThis(this)"><a href="#"><img class="jiahao"alt="" src="${ctx }/common/img/jiahao.png" style="width:15px;height:15px;margin-right:6px;"><span>部门1</span></a>
                <ul>
                    <li id='211'><input class='child' type="checkbox" onclick="choseThis(this)"><a href="#">文档312</a></li>
                    <li id='212'><input class='child' type="checkbox" onclick="choseThis(this)"><a href="#">文档321</a></li>
                </ul>
            </li>
              <li id='22'><input class='father' type="checkbox" id="c1" value="selectAll" title="全选" onclick="choseThis(this)"><a href="#"><img class="jiahao"alt="" src="${ctx }/common/img/jiahao.png" style="width:15px;height:15px;margin-right:6px;"><span>部门1</span></a>
                <ul>
                    <li id='221'><input class='child' type="checkbox" onclick="choseThis(this)"><a href="#">文档21</a></li>
                    <li id='222'><input class='child' type="checkbox" onclick="choseThis(this)"><a href="#">文档21</a></li>
                </ul>
            </li>
        </ul>
    </li> --%>
        </ul>
</div>
</div>
<div style="width:200px;float:left;">
	<div>
		<span>已选择的人员</span>
		<img alt="" src="${ctx}/common/img/del.png" style="width:20px;height:20px;position:absolute;right:50px;cursor:pointer;" onmouseover="sureDel(this);" onmouseout="notDel(this);" onclick="deleteUsers();" title='移除'>
	</div>
	<div class="selectedUsers" style="width:250px;margin-top:0px;max-height:300px;overflow-y:auto;float:left;margin-left:25px;">
<ul class="menuRight menu"style="margin-left:-25px;text-align:left;" vlaue='menuRight'>
      <%--  <li><input type="checkbox" id="c1"  value="selectAll" title="全选" onclick="choseThis(this);"><a href="###"><img class="jiahao"alt="" src="${ctx }/common/img/jiahao.png" style="width:15px;height:15px;margin-right:6px;"><span>A系统</span></a>
 
        <ul>
             <li><input type="checkbox" id="c1" value="" title="全选" value="selectAll" onclick="choseThis(this);"><a href="#"><img class="jiahao"alt="" src="${ctx }/common/img/jiahao.png" style="width:15px;height:15px;margin-right:6px;"><span>部门1</span></a>
                <ul>
                    <li><input type="checkbox" onclick="choseThis(this);"><a href="#">文档1</a></li>
                    <li><input type="checkbox" onclick="choseThis(this);"><a href="#">文档2</a></li>
                </ul>
            </li>
           
        </ul>
    </li> --%>
</ul>
</div>
</div>
<div>
<button class="consureBtn " onclick="submitUsers()" id="addUser"
			style="width:80px;">提交</button>
</div>
</div>
</body>
</html>

前端页面主要分为左右两部分，左侧用于展示用户，右侧展示左侧勾选的用户。

2、引入复制左侧结构到右侧的menuMove.js

 //联级菜单移动
$(document).ready(function(){
        /*$(".menu ul").css("display","none");    //文件准备好后，ul的样式为隐藏
        $(".menu a").on("click",function(){       //点击a的时候就执行以下函数
           $(this).next().toggle(function(){
           	if($(this).css("display")=='none'){
           		$(this).prev().children(".jiahao").attr("src","/${ctx}/common/img/jiahao.png");
           		
           	}else{
           		$(this).prev().children(".jiahao").attr("src","/${ctx}/common/img/jianhao.png");
           	}
           });  //toggle提供为隐藏和显示相互转换的方法    意思是点击的这个 元素的下一个元素是显示的话就隐藏，是隐藏的话就显示
        });*/
    });
    
	function choseThis(obj) {
		var value = $(obj).attr("value");
		if (obj.checked == false) {
			if(value == 'selectAll'){
				var li=$(obj).parent();
				var checkboxs=li.find("input[type='checkbox']");
				for(var i=0;i<checkboxs.length;i++){
					checkboxs.eq(i).prop('checked',false);
				}
			}
			$(obj).parent().parent().prev().prev().prop("checked",false);
			$(obj).parent().parent().parent().parent().prev().prev().prop("checked",false);
		} else {
			//查询
			//leftToRight(obj);	
			if (value == 'selectAll') {
				var li=$(obj).parent();
				var checkboxs=li.find("input[type='checkbox']");
				for(var i=0;i<checkboxs.length;i++){
					if(checkboxs.eq(i).prop('checked')){
						continue;
					}
					checkboxs.eq(i)[0].checked=true;
				}
			}
			var ul=$(obj).parent().parent();
			var allLen=ul.find("input[type='checkbox']").length;
			var trueLen=ul
					.find("input[type='checkbox']:checked").length;
			if (allLen==trueLen) {
				ul.prev().prev().prop("checked",true);
			}
			var ulFather=ul.parent().parent();
			if(ulFather.find("input[type='checkbox']").length==ulFather.find("input[type='checkbox']:checked").length){
				ul.parent().parent().prev().prev().prop('checked',true);
			}
			//查询
			leftToRight(obj);	
		}
	}
	//将左侧的人员移到右侧
	function leftToRight(obj) {
		var cls=$(obj).attr("class");
		if(cls=='yeye'){
			if($(obj).parent().parent().attr("class").startsWith('menuRight')){
				return;
			}
			var ul=$(obj).parent();
			var id=ul.attr("id");
			var menuRight=$('.menuRight').find('#'+id);
			if(menuRight.length!=0&&menuRight.find('input[type="checkbox"]:checked').length==ul.find('input[type="checkbox"]:checked').length){
				return;
			}
			$('.menuRight').find('#'+id).remove();
			ul=ul.clone(true);
			ul.children('input[type="checkbox"]:checked').prop("checked",false);
			//省下面的li
			ul.find('ul').css('margin-left','-22px');
			//市下面的li
			ul.find('ul').find('li').find('ul').css('margin-left','-22px');
			$('.menuRight').append(ul);
		}else if(cls=='father'){
		if($(obj).parent().parent().parent().parent().attr("class").startsWith('menuRight')){
				return;
			}
			var ulLi=$(obj).parent();
			var li=$(obj).parent().parent().parent();
			var id=li.attr("id");
		 	var ul=$(obj).parent().parent();
			var menuRightLi=$('.menuRight').children('#'+id);
			var id1=ulLi.attr('id');
			if(menuRightLi.length!=0){
				li=$('.menuRight').children('#'+id);
				ul=li.children("ul");
				var childLi=ul.children("#"+id1);
				childLi.remove();
				//console.log('===='+childLi.get(0));
				ulLi=ulLi.clone(true);
				ulLi.children('input[type="checkbox"]:checked').prop('checked',false);
				ul.append(ulLi);
				ulLi=null;
			}else{
			var input=ul.prev().prev().clone(true);
			var a=ul.prev().clone(true);
				li=li.clone(true);
				ul=ul.clone(true);
				ulLi=ulLi.clone(true);
				ulLi.children('input[type="checkbox"]:checked').prop('checked',false);
				//console.log(input.get(0));
				//console.log(a.get(0));
				ul.html(ulLi);
				//console.log(ul.get(0));
				//console.log(ulLi.get(0));
				li.html('');
				li.append(input);
				li.append(a); 
				li.append(ul);
				$('.menuRight').append(li);
				a=input=ul=ulLi=li=null;
			}
			$('.menuRight').find('ul').css('margin-left','-22px');
			$('.menuRight').find('ul').find('li').find('ul').css('margin-left','-22px');
		}else if(cls=='child'){
			if($(obj).parent().parent().parent().parent().parent().parent().attr("class").startsWith('menuRight')){
				return;
			}
			var li=$(obj).parent().clone(true);
			li.children('input[type="checkbox"]:checked').prop('checked',false);
			var ul=$(obj).parent().parent().clone(true);
			var inputChild=$(obj).parent().parent().prev().prev().clone(true);
			var aChild=$(obj).parent().parent().prev().clone(true);
			var ulFather=$(obj).parent().parent().parent().parent().clone(true);
			var input=$(obj).parent().parent().parent().parent().prev().prev().clone(true);
			var a=$(obj).parent().parent().parent().parent().prev().clone(true);
			var liFather=$(obj).parent().parent().parent().clone(true);
			var liYeye=$(obj).parent().parent().parent().parent().parent().clone(true);
			var yeyeId=liYeye.attr("id");
			var righYes=$('.menuRight').children('#'+yeyeId);
			if(righYes.length>0){
				var fatherId=liFather.attr("id");
				var ul1=righYes.children('ul');
				var liFather1=ul1.children('#'+fatherId);
				
				if(liFather1.length>0){
					ul=liFather1.children('ul');
					var id=li.attr('id');
					var li1=ul.children('#'+id);
					if(li1.length>0){
						//如果存在该子节点则无需操作
					}else{
						ul.append(li);
					}
				}else{
				ul.html('');
				ul.append(li);
				liFather.html('');
				liFather.append(inputChild);
				liFather.append(aChild);
				liFather.append(ul);
				ul1.append(liFather);
				}
			}else{
			ul.html('');
			ul.append(li);
			liFather.html('');
			liFather.append(inputChild);
			liFather.append(aChild);
			liFather.append(ul);
			ulFather.html('');
			ulFather.append(liFather);
			liYeye.html('');
			liYeye.append(input);
			liYeye.append(a);
			liYeye.append(ulFather);
			$('.menuRight').append(liYeye);
			}
		li=ul=inputChild=aChild=ulFather=input=a=liFather=liYeye=null;
		}
	}	
	function sureDel(obj) {
		obj.src = '/${ctx}/common/img/del1.png';
	}
	function notDel(obj) {
		obj.src = '/${ctx}/common/img/del.png';
	}
	//将dom元素转成字符串
function domToString (node) {  
     var tmpNode = $('<div></div>');
     tmpNode.append(node.clone(true));
     var str = tmpNode.html();
     tmpNode = node = null; // 解除引用，以便于垃圾回收  
     return str;  
}


function deleteUsers(){
	
	var checkedUsers=$('.menuRight').find('input[type="checkbox"]:checked');
	if(checkedUsers.length==0){
		alert('请选择需要删除的人员');
		return;
	}
	//ul:menuLeft
	var leftCheckeds=$('.menuLeft').find('input[type="checkbox"]:checked').parent().parent();
	for(var i=0;i<checkedUsers.length;i++){
		var id=checkedUsers.eq(i).parent().attr('id');
		checkedUsers.eq(i).parent().remove();
		//console.log(leftCheckeds.find('#'+id).attr('id'));
		leftCheckeds.find('#'+id).find('input[type="checkbox"]').prop('checked',false);
		//如果同级中没有被选择的checkbox就将父级置为未选择
		if(leftCheckeds.find('#'+id).parent().find('input[type="checkbox"]:checked').length==0){
			leftCheckeds.parent().parent().find('input[type="checkbox"]').prop('checked',false);
		}
		//如果同级中没有被选择的checkbox就将父级置为未选择
		if(leftCheckeds.find('#'+id).parent().parent().parent().find('input[type="checkbox"]:checked').length==0){
			leftCheckeds.find('#'+id).parent().parent().parent().parent().find('input[type="checkbox"]').prop('checked',false);
		}
	}
}

3、后台接收ajax请求的java方法，这里也是重点，需要拼接好三级菜单的结构：

首先是查询数据库获取省份Id、省份名称、地市Id、地市名称、用户Id、用户名称，然后分别将省份、地市和用户的html结构放到map中用于后面的循环拼接。

@RequestMapping("/showUserMenu")
  public void showUsersOutGroup2(String userId,String userName){
      //省去查询数据的条件部分。。。
      List<Object[]> modelList=this.userDataService.findUsers(paraMap);
      if(modelList.size()==0){
          this.getResponseError("-1", "...");
          return;
      }
      Map<String,Object> mapResults=new HashMap<String,Object>();
      //存储省-省的html结构的数据
      Map<String,Object> provMap=new HashMap<String,Object>();
      //存储省-[市-市的html结构]的数据
      Map<String,Map<String,Object>> cityMap=new HashMap<String,Map<String,Object>>();
      //存储省-[市-[市下面的用户的html结构列表]]
      Map<String,Map<String,List<String>>> userMap=new HashMap<String,Map<String,List<String>>>();
      for(Object[] o:modelList){
          //Map<String,Object> map=new HashMap<String,Object>();
          String provId="";
          String cityId="";
          if (null==o[3])
          {
              provId="其他";
          }else {
              provId=o[3].toString();
          }
          if (null==o[4])
          {
              cityId="其他";
          }else {
              cityId=o[4].toString();
          }
					//省份的html结构如下，省份的结构里包含市的
          String provEl="<li id=\""+provId+"\"><input class=\"yeye\" type=\"checkbox\" value=\"selectAll\" title=\"全选\" onclick=\"choseThis(this)\"><a href=\"###\"><img class=\"jiahao\" alt=\"\" src=\"${ctx}/common/img/jiahao.png\" style=\"width:15px;height:15px;margin-right:6px;\"><span>"+provId+"</span></a><ul style=\"text-align:left;margin-left: -23px;\">";
          //市的html结构如下，市的html结构要包含用户的
          String cityEl="<li  id=\""+cityId+"\"><input class=\"father\" type=\"checkbox\" value=\"selectAll\" title=\"全选\" onclick=\"choseThis(this)\"><a href=\"#\"><img class=\"jiahao\" alt=\"\" src=\"${ctx}/common/img/jiahao.png\" style=\"width:15px;height:15px;margin-right:6px;\"><span>"+cityId+"</span></a><ul style=\"text-align:left;margin-left: -22px;\">";
          //用户的html结构如下
          String userEl="<li id=\""+o[0].toString()+"\"><input class=\"child\" type=\"checkbox\" onclick=\"choseThis(this)\"><a href=\"#\">"+o[1].toString()+"</a></li>";
          //如果省份map不存在该省份的键就直接插入，否则不用插入
          if (!provMap.containsKey(provId))
          {
              provMap.put(provId, provEl);
          }
          //如果地市map没有该省份的键就插入省份数据和新建地市map存储
          if (!cityMap.containsKey(provId))
          {
              Map<String,Object> cityNode= new HashMap<String,Object>();
              cityNode.put(cityId, cityEl);
              cityMap.put(provId, cityNode);
          }else {
              //如果地市map存在该省份的键就获取该省份对应的地市map并判断是否已经插入该地市，如果存在就不插入否则就插入
              if (!cityMap.get(provId).containsKey(cityId))
              {
                  cityMap.get(provId).put(cityId, cityEl);
              }
          }
          //默认用户数据没有重复，直接插入
          if (null!=userMap.get(provId))
          {
              if (null!=userMap.get(provId).get(cityId))
              {
                  //避免重还是判断一下存不存在重复
                  if (!userMap.get(provId).get(cityId).contains(userEl))
                  {
                      userMap.get(provId).get(cityId).add(userEl);
                  }
              }else {
                  //如果省份节点存在，地市节点不存在
                  List<String> users=new ArrayList<String>();
                  users.add(userEl);
                  userMap.get(provId).put(cityId, users);
              }
          }else {
              //如果不存在该省份的键先创建对象再插入值
              Map<String,List<String>> cityNode= new HashMap<String,List<String>>();
              List<String> users=new ArrayList<String>();
              users.add(userEl);
              cityNode.put(cityId, users);
              userMap.put(provId, cityNode);
          }
      }
      //这个htmlStruc就是拼接的最终要到前端展示的三级菜单的结构
      String htmlStruc=createUserStruc(provMap,cityMap,userMap);
      mapResults.put("result", true);
      mapResults.put("data", htmlStruc);
      try {
          response.getWriter().println(JSONObject.fromObject(mapResults));
      } catch (IOException e) {
          e.printStackTrace();
      }
  }
//下面是提取出来的将省市用户html结构组合起来的方法
//将单独存储的省、市、人员html结构组合在一起
public String createUserStruc( Map<String,Object> provMap,Map<String,Map<String,Object>> cityMap,Map<String,Map<String,List<String>>> userMap){
  //下面是拼接整个省-市-用户的html结构
    StringBuffer sb=new StringBuffer();
    String prov="";
    //遍历省份节点，拼接每个省份的html结构
    for (Map.Entry<String, Object> provEntry:provMap.entrySet())
    {
        String provId=provEntry.getKey();
        //如果临时存储省份id的变量的值和省份map获取的key不一致说明到下一个省份了这时需要拼接上结束标签
        if (!provId.equals(prov))
        {
            //prov为空说明还没拼接前面部分，不需要拼接结束标签
            if (!"".equals(prov))
            {
                sb.append("</ul></li>");
            }
            prov=provId;
        }
        sb.append(provEntry.getValue());
        //遍历该省份对应的地市map
        for (Map.Entry<String,Object> cityEntry:cityMap.get(provId).entrySet())
        {
            String cityId=cityEntry.getKey();
            sb.append(cityEntry.getValue());
            //获取省-市对应的用户list拼接用户结构
            List<String> users = userMap.get(provId).get(cityId);
            for (int i = 0; i < users.size(); i++ )
            {
                sb.append(users.get(i));
            }
            sb.append("</ul></li>");
        }
    }
    return sb.toString();
}

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值