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

1 篇文章 0 订阅
1 篇文章 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权限拦截

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在ASP.NET框架实现下拉框联动可以使用Jquery来实现。首先,你可以创建一个控制器方法来获取某个省份的所有城市数据。在这个方法中,你可以使用Jquery的Ajax方法来发送异步请求,并返回城市数据。\[2\]接着,在前端页面中,你可以使用Jquery的change事件来监听省份下拉框的选择变化,当选择变化时,触发Ajax请求获取对应省份的城市数据,并将数据填充到城市下拉框中。这样就实现下拉框联动效果。\[1\] 以下是一个简单的示例代码: 在控制器中: ```csharp public ActionResult GetCityList(int id) { if (!Request.IsAjaxRequest()) { return Content("请不要非法方法,这是不道德的行为!"); } BLL.Province bll = new MvcBBS.BLL.Province(); List<MvcBBS.Model.S_City> modellist = bll.GetCityList(id); return Json(modellist); } ``` 在前端页面中: ```html <select id="province"> <option value="1">省份1</option> <option value="2">省份2</option> <!-- 其他省份选项 --> </select> <select id="city"> <!-- 根据选择的省份动态生成城市选项 --> </select> <script> $(document).ready(function() { $("#province").change(function() { var provinceId = $(this).val(); $.ajax({ url: "/Controller/GetCityList", type: "GET", data: { id: provinceId }, success: function(data) { var cityOptions = ""; $.each(data, function(index, city) { cityOptions += "<option value='" + city.Id + "'>" + city.Name + "</option>"; }); $("#city").html(cityOptions); } }); }); }); </script> ``` 这样,当选择省份下拉框的选项时,城市下拉框会根据选择的省份动态生成对应的城市选项。\[1\] #### 引用[.reference_title] - *1* *2* *3* [ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动](https://blog.csdn.net/lchwhy/article/details/7438522)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值