树形下拉框列出各个对应的内容

最新推荐文章于 2024-03-01 14:48:27 发布

爱吃榴莲酥的姑娘

最新推荐文章于 2024-03-01 14:48:27 发布

阅读量524

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/guojiao1006/article/details/78625204

版权

笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了如何创建一个展示层次结构数据的树形下拉框，详细讲解了其工作原理和实现步骤，包括数据结构的设计、事件处理以及交互效果的优化。

摘要由CSDN通过智能技术生成

树形结构的下拉框

<div class="main fly-user-main layui-clear">
		<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="user">
			<c:choose>
				<c:when test="${not empty dlist}">
					<c:forEach items="${dlist}" var="zong" varStatus="v">
						<li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon"></i>${zong.NAME}</a>
							<dl class="layui-nav-child">
								<c:set value="0" var="zz" />
								<c:forEach items="${zong.subFenjiliebiao}" var="var" varStatus="vs">
									<dd class="layui-this">
				             <a href="<%=basePath%>guanli/shuanglianghuodongliebiao?FENJILIEBIAO_ID=${var.FENJILIEBIAO_ID}">${var.NAME}</a>
									</dd>
								</c:forEach>
							</dl></li>
					</c:forEach>
				</c:when>
				<c:otherwise>
					<tr class="main_info">
						<td colspan="100" class="center">没有相关数据</td>
					</tr>
				</c:otherwise>
			</c:choose>

		</ul>
</div>

后台代码：

@RequestMapping(value = "/shuanglianghuodongliebiao")
	public ModelAndView shuanglianghuodongliebiao() throws Exception {
		logBefore(logger, "管理-左菜单");
		ModelAndView mv = this.getModelAndView();
		PageData pd = this.getPageData();

		if (Jurisdiction.getSession().getAttribute(Const.SESSION_USERNAME) == null) {// 判断是否登录，传给页面
			pd.put("denglu", "否");
		}
		PageData pd1 = new PageData();
		pd1.put("idd", pd.getString("FENJILIEBIAO_ID"));//Mapper的检索
		Page page1 = new Page();
		page1.setPd(pd1);
		List<Fenjiliebiao> dlist = fenjiliebiaoService.listSubfenjiliebiaoByParentId("250c827ebcdf4d639783ffae7d1f8277");//顶级ID
		dlist = this.readdic(dlist);
		List<PageData> slhd = shuanglianghuodongService.liebiao(page1);
		pd.put("shangcaidan", "shuanglianghuodong");
		mv.setViewName("guanli/ster/fuwu/office");
		mv.addObject("dlist", dlist);
		mv.addObject("shuanglianghuodongList", slhd);
		return mv;
	}

b表是要点击所要出现的内容，a表是左菜单的主键ID（根据顶级ID列出所有的子级）

<select id="listliebiao" parameterType="page" resultType="pd">
    SELECT   b.FENJILIEBIAO_ID,b.XINGMING,b.FUJIANMING, a.FENJILIEBIAO_ID
    FROM  GUANLI_FENJILIEBIAO a right join GUANLI_SHUANGLIANGHUODONG  b on a.FENJILIEBIAO_ID = b.FENJILIEBIAO_ID
   <where> 
   	<if test="pd.idd != null and pd.idd != ''">and ( a.FENJILIEBIAO_ID = #{pd.idd} )</if>
   </where>
</select>