Jeesite框架实现城市下拉框联动插件，area.tag自定义标签

其他 2020-01-14 12:06:03 阅读次数: 0

下拉框联动标签

首先感谢Jeesite框架作者：ThinkGem，https://gitee.com/thinkgem/jeesite
框架源码地址，我从中学习到很多不错的开发思路，以及项目代码规范方式！

插件说明

由于项目原因，需要做一款城市下拉联动插件：省份、城市、区县、街道、社区

  1. 为了减少代码量、实现直接应用
  2. 添加权限控制（如不一样的用户进来查看到不一样的查询条件）
  3. 控制只显示区县层级开始
  4. 如还不满足您当前需求，请自行修改！

标签代码area.tag

<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ attribute name="province" type="java.lang.String" required="false" %>
<%@ attribute name="city" type="java.lang.String" required="false" description="默认选中城市"%>
<%@ attribute name="districtcounty" type="java.lang.String" required="false" description="默认选中区县"%>
<%@ attribute name="street" type="java.lang.String" required="false" description="默认选中街道"%>
<%@ attribute name="community" type="java.lang.String" required="false" description="默认选中社区"%>
<%@ attribute name="provincePath" type="java.lang.String" required="false"%>
<%@ attribute name="cityPath" type="java.lang.String" required="false"%>
<%@ attribute name="districtcountyPath" type="java.lang.String" required="true"%>
<%@ attribute name="streetPath" type="java.lang.String" required="true"%>
<%@ attribute name="communityPath" type="java.lang.String" required="true"%>
<%@ attribute name="provinceName" type="java.lang.String" required="false"%>
<%@ attribute name="cityName" type="java.lang.String" required="false"%>
<%@ attribute name="districtcountyName" type="java.lang.String" required="false"%>
<%@ attribute name="streetName" type="java.lang.String" required="false"%>
<%@ attribute name="communityName" type="java.lang.String" required="false"%>
<%@ attribute name="id" type="java.lang.String" required="false" description="如果页面有多个标签，设置不一样的序号"%>
<%@ attribute name="provinceHide" type="java.lang.String" required="false" description="添加选择隐藏，有的查询列表，从区县开始，不显示省份、城市"%>
<script type="text/javascript">
	$(document).ready(function() {
		$("[data-area-cha=${not empty id ? id: '1'}]").each(function(i, item) {
			try {
				$(item).change(function comprehensiveIndexQuery() {
					var value = $(item).val();
					var area = $(item).attr("data-area");
					if ($(item).value != 0) {
						$.ajax({
							type : "post",
							url : "${ctxf}/visit/statistics/getAreaist",
							async : false,
							data : {
								"parentId" : value
							},
							dataType : 'json',
							success : function(result) {
								if (result.length != 0) {
									$("#" + area).empty();
									var optionselected = $("<option>").text("请选择");
									optionselected.val("");
									$("#" + area).append(optionselected); //处理第一次选择第一个值的时候不触发change事件
									for (var i = 0; i < result.length; i++) {
										var option = $("<option>").val(result[i].id).text(result[i].name);
										$("#" + area).append(option);
									}
								}
							}
						});
					} else {
						("#" + area).empty();
					}
				});
			} catch (exception) {

			}
		});
		try {
			var m = new Map();
			m.set("s${not empty city ? city: 'city'}", "${cityPath}");
			m.set("s${not empty districtcounty ? districtcounty: 'districtcounty'}", "${districtcountyPath}");
			m.set("s${not empty street ? street: 'street'}", "${streetPath}");
			m.set("s${not empty community ? community: 'community'}", "${communityPath}");
			$("[data-next-aja=${not empty id ? id: '1'}]").each(function(i, item) {
				var next = $(item).attr("data-next");
				$.ajax({
					type : "post",
					url : "${ctxf}/visit/statistics/getAreaist",
					async : false,
					data : {
						"parentId" : next
					},
					dataType : 'json',
					success : function(result) {
						if (result.length != 0) {
							$(item).empty();
							var optionselected = $("<option>").text("请选择");
							optionselected.val("");
							$(item).append(optionselected); //处理第一次选择第一个值的时候不触发change事件
							for (var i = 0; i < result.length; i++) {
								var option = $("<option>").val(result[i].id).text(result[i].name);
								$(item).append(option);
								if (result[i].id == m.get("s" + item.id)) {
									$("#s2id_" + item.id + " a span:eq(0)").html(result[i].name);
								}
							}
						}
					}
				});
				$(item).val(m.get("s" + item.id));
			});
		} catch (exception) {

		}
	});
</script>
<!-- 如果登录了就跟着权限配置走 -->
<c:if test="${provinceHide!='true'}">
	<shiro:hasPermission name="province:view">
		<li><label>${not empty provinceName ? provinceName: '所属省份'}：</label> <form:select path="${not empty province ? province: 'province'}"
				class="input-medium " data-area="${not empty city ? city: 'city'}" data-area-cha="${not empty id ? id: '1'}">
				<form:option value="" label="请选择" />
				<form:options items="${fnz:getProvinceList()}" itemLabel="name" itemValue="id" htmlEscape="false" />
			</form:select></li>
	</shiro:hasPermission>
	<shiro:hasPermission name="city:view">
		<li><label>${not empty cityName ? cityName: '所属城市'}：</label> <form:select path="${not empty city ? city: 'city'}" class="input-medium "
				data-area="${not empty districtcounty ? districtcounty: 'districtcounty'}" data-area-cha="${not empty id ? id: '1'}" data-next="${provincePath}"
				data-next-aja="${not empty id ? id: '1'}">
				<form:option value="" label="请选择" />
			</form:select></li>
	</shiro:hasPermission>
</c:if>
<shiro:hasPermission name="districtcounty:view">
	<c:if test="${provinceHide!='true'}">
		<li><label>${not empty districtcountyName ? districtcountyName: '所属区县'}：</label> <form:select
				path="${not empty districtcounty ? districtcounty: 'districtcounty'}" class="input-medium " data-area="${not empty street ? street: 'street'}"
				data-area-cha="${not empty id ? id: '1'}" data-next="${cityPath}" data-next-aja="${not empty id ? id: '1'}">
				<form:option value="" label="请选择" />
			</form:select></li>
	</c:if>
	<c:if test="${provinceHide=='true'}">
		<li><label>${not empty districtcountyName ? districtcountyName: '所属区县'}：</label> <form:select
				path="${not empty districtcounty ? districtcounty: 'districtcounty'}" class="input-medium " data-area="${not empty street ? street: 'street'}"
				data-area-cha="${not empty id ? id: '1'}">
				<form:option value="" label="请选择" />
				<form:options items="${fnz:getOutsideNameList()}" itemLabel="name" itemValue="id" htmlEscape="false" />
			</form:select></li>
	</c:if>
</shiro:hasPermission>
<shiro:hasPermission name="street:view">
	<li><label>${not empty streetName ? streetName: '所属街道'}：</label> <form:select path="${not empty street ? street: 'street'}" class="input-medium "
			data-area="${not empty community ? community: 'community'}" data-area-cha="${not empty id ? id: '1'}" data-next="${districtcountyPath}"
			data-next-aja="${not empty id ? id: '1'}">
			<form:option value="" label="请选择" />
		</form:select></li>
</shiro:hasPermission>
<shiro:hasPermission name="community:view">
	<li><label>${not empty communityName ? communityName: '所属社区'}：</label> <form:select path="${not empty community ? community: 'community'}"
			class="input-medium " data-next="${streetPath}" data-next-aja="${not empty id ? id: '1'}">
			<form:option value="" label="请选择" />
		</form:select></li>
</shiro:hasPermission>
<!-- 如果没有登录权限也显示 -->
<c:if test="${provinceHide!='true'}">
	<shiro:notAuthenticated>
		<li><label>${not empty provinceName ? provinceName: '所属省份'}：</label> <form:select path="${not empty province ? province: 'province'}"
				class="input-medium " data-area="${not empty city ? city: 'city'}" data-area-cha="${not empty id ? id: '1'}">
				<form:option value="" label="请选择" />
				<form:options items="${fnz:getProvinceList()}" itemLabel="name" itemValue="id" htmlEscape="false" />
			</form:select></li>
	</shiro:notAuthenticated>
	<shiro:notAuthenticated>
		<li><label>${not empty cityName ? cityName: '所属城市'}：</label> <form:select path="${not empty city ? city: 'city'}" class="input-medium "
				data-area="${not empty districtcounty ? districtcounty: 'districtcounty'}" data-area-cha="${not empty id ? id: '1'}" data-next="${provincePath}"
				data-next-aja="${not empty id ? id: '1'}">
				<form:option value="" label="请选择" />
			</form:select></li>
	</shiro:notAuthenticated>
</c:if>
<shiro:notAuthenticated>
	<c:if test="${provinceHide!='true'}">
		<li><label>${not empty districtcountyName ? districtcountyName: '所属区县'}：</label> <form:select
				path="${not empty districtcounty ? districtcounty: 'districtcounty'}" class="input-medium " data-area="${not empty street ? street: 'street'}"
				data-area-cha="${not empty id ? id: '1'}" data-next="${cityPath}" data-next-aja="${not empty id ? id: '1'}">
				<form:option value="" label="请选择" />
			</form:select></li>
	</c:if>
	<c:if test="${provinceHide=='true'}">
		<li><label>${not empty districtcountyName ? districtcountyName: '所属区县'}：</label> <form:select
				path="${not empty districtcounty ? districtcounty: 'districtcounty'}" class="input-medium " data-area="${not empty street ? street: 'street'}"
				data-area-cha="${not empty id ? id: '1'}">
				<form:option value="" label="请选择" />
				<form:options items="${fnz:getOutsideNameList()}" itemLabel="name" itemValue="id" htmlEscape="false" />
			</form:select></li>
	</c:if>
</shiro:notAuthenticated>
<shiro:notAuthenticated>
	<li><label>${not empty streetName ? streetName: '所属街道'}：</label> <form:select path="${not empty street ? street: 'street'}" class="input-medium "
			data-area="${not empty community ? community: 'community'}" data-area-cha="${not empty id ? id: '1'}" data-next="${districtcountyPath}"
			data-next-aja="${not empty id ? id: '1'}">
			<form:option value="" label="请选择" />
		</form:select></li>
</shiro:notAuthenticated>
<shiro:notAuthenticated>
	<li><label>${not empty communityName ? communityName: '所属社区'}：</label> <form:select path="${not empty community ? community: 'community'}"
			class="input-medium " data-next="${streetPath}" data-next-aja="${not empty id ? id: '1'}">
			<form:option value="" label="请选择" />
		</form:select></li>
</shiro:notAuthenticated>

jsp直接调用方法

<form:form id="searchForm" modelAttribute="bjtAppTPersonal" action="自己查询路径" method="post"
		class="breadcrumb form-search">
		<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}" />
		<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}" />
		<input id="providerId" name="providerId" type="hidden" value="${bjtAppTPersonal.providerId}" />
		<ul class="ul-form">
			<sys:area 
			province="providerProvince"
			city="providerCity"
			districtcounty="providerCounty"
			street="providerStreet"
			community="providerCommunity"
			provincePath="${bjtAppTPersonal.providerProvince}" 
			cityPath="${bjtAppTPersonal.providerCity}"
			districtcountyPath="${bjtAppTPersonal.providerCounty}" 
			streetPath="${bjtAppTPersonal.providerStreet}" 
			communityPath="${bjtAppTPersonal.providerCommunity}"/>
			<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询" /> <shiro:hasPermission name="personal:bjtAppTPersonal:export">
					<input id="btnExport" class="btn btn-primary" type="button" value="导出" />
				</shiro:hasPermission></li>
			<li class="clearfix"></li>
		</ul>
	</form:form>

如要实现权限控制

*强调文本* _强调文本_

省份:province:view
城市查询:city:view
区查询:districtcounty:view
社区查询:community:view
街道查询:street:view

Java代码/visit/statistics/getAreaist代码

@RequestMapping(value = "getAreaist")
	@ResponseBody
	public String getAreaist(String parentId) {
		if ("".equals(parentId) || parentId == null) {
			return "";
		}
		Area area = new Area();
		Area areaParent = new Area();
		areaParent.setId(parentId);
		area.setParent(areaParent);
		List<Area> list = areaService.findByParentId(area);
		return JsonMapper.toJsonString(list);
	}

注意使用${frontPath}标签跳过shrio权限拦截

易大师丶溜溜溜
发布了6 篇原创文章 · 获赞 10 · 访问量 1489
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_15294055/article/details/88815431
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022