电商商家后台-easyUI的combox三级联动

这几天在做项目中又用到了easyUI,以前做ITOO的时候前端都是被封装好的,而且也没有真正接触过三级联动效果。这个三级联动是要实现的是省市县联动。选择某一个省时跟着相应的市显示,接着相应的县显示。

不仅是这样,因为做的是修改功能,所以不仅要把查出来的省,市,县显示出来,而且从数据库中查询来的地区需要成为默认显示值。也就是说从数据库中查出来的地区跟查出来的所有省市区做对比,是数据库中地区显示为默认。举个例子,数据库中存的是河北省廊坊市燕郊区,那么显示在界面上的默认值也必须是河北省廊坊市燕郊区。这也是在我实现中刚开始挺头疼的一件事,后来经过查询其实挺简单的。

首先我把从数据库中查询出来的地区,存放到界面上并隐藏起来,然后把从数据库中查询出来的所有省份显示到界面上。其次用JS代码获取隐藏的地区,并设置这些地区在下拉框中默认为选中。

JSP代码:

<tr>
   <td id="area">
	<input id="shengyincang" style="display:none;" value="${sheng}"/>
	<input id="shiyincang" style="display:none;" value="${shi}"/>
	<input id="xianyincang" style="display:none;" value="${xian}"/>
	所在地区:
   </td>
   <td><select id="sheng" class="easyui-combobox" name="sheng">
        <c:forEach var="catage" items="${requestScope.shengList}" varStatus="status">
	<option style=" width: 100px;" value="${catage.iD}">${catage.province_city}</option>
	</c:forEach>
	</select>
	 <input id="shi" class="easyui-combobox"  name="shi"/>
	 <input id="xian" class="easyui-combobox"  name="xian"/>
	 <span id="cityTip"></span>
   </td>
</tr>

JS代码:其实JS代码实现的很简单,因为EasyUI的封装功能真的是很强大啊。

window.onload=function(){

	//获取界面上隐藏的地区
	var shengUID=$("#shengyincang").val();
	var shiUID=$("#shiyincang").val();
	var xianUID=$("#xianyincang").val();
	//var opts=document.getElementById("sheng");
	//设置地区被选中
	$("#sheng").combobox('select',shengUID);
	$("#shi").combobox('select',shiUID);
	$("#xian").combobox('select',xianUID);

}

//三级联动事件,选择省份,相应所有市跟着出来,选中市相应的县跟着出来。
$(function(){
		//触发省选项
		$("#sheng").combobox({
			onSelect:function(record){
				$("#shi").combobox("setValue",''); //清空市
				$("#xian").combobox("setValue",''); //清空县
				var shengid=$('#sheng').combobox('getValue');

				$.ajax({
					async:false,
					url:"personalprofile_findshi.action",
					data:{shengid:shengid},
					type:"POST",
					dataType:"json",
					success:function(data){
						//alert(data);
						$("#shi").combobox("loadData",data);
					}

				});
			}

		});
		$('#shi').combobox({
		    editable:false, //不可编辑状态
		    cache: false,
		    panelHeight: '150',//自动高度适合
		    valueField:'iD',
		    textField:'province_city'
		   }); 

		//触发市选项时
		$("#shi").combobox({
			onSelect:function(record){
				$("#xian").combobox("setValue",''); //清空县
				var shiid=$('#shi').combobox('getValue');

				$.ajax({
					async : false,
					url:"personalprofile_findxian.action",
					cache:false,
					data:{shiid:shiid},
					type:"POST",
					dataType:"json",
					success:function(data){
						$("#xian").combobox("loadData",data);
					}

				});
			}
		});

		$('#xian').combobox({
		    editable:false, //不可编辑状态
		    cache: false,
		    panelHeight: '150',//自动高度适合
		    valueField:'iD',
		    textField:'province_city'
		   });
});

最后上图:

封装的固然好,但是尝试着去了解底层,因为只有掌握了底层,我们才能运筹帷幄。以前做ITOO的时候没觉得什么,后来做这个项目才发现ITOO封装的太好了,自己了解的太少了,以至于这个项目做起来有点儿生疏。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-12 20:48:54

电商商家后台-easyUI的combox三级联动的相关文章

【SSM电商项目后台开发】008-收货地址模块

一.主要功能概述 二.学习目标 主要接口: 1.添加地址:/shipping/add.do 2.删除地址:/shipping/del.do 3.登录状态更新地址:/shipping/update.do 4.选中查看具体的地址:/shipping/select.do 5.地址列表/shipping/list.do: 三.数据表设计 四.DAO package com.mmall.dao; import com.mmall.pojo.Shipping; import org.apache.ibati

【SSM电商项目后台开发】003-项目架构概览

一 项目整体架构 使用Mybatis插件生成POJO类和Mapper文件,整体结构如下: 原文地址:https://www.cnblogs.com/noaman/p/8747873.html

通用android studio gradle 文件(电商商家版,两个gradle不同)

Module的gradle文件apply plugin: 'com.android.application' android { compileSdkVersion 26 defaultConfig { applicationId "com.culturer.guishi_shoper" minSdkVersion 23 targetSdkVersion 26 versionCode 1 versionName "1.0" testInstrumentationRu

分布式电商项目(02)--后台管理系统SSM框架整合

前言:上一篇博客讲了此次分布式电商项目后台管理系统的工程的搭建,这一篇就讲一下SSM框架的整合 1.整合思路 下面说到的配置文件都需要放到manager-web工程下,因为此工程为war工程,而其它的工程都只是一个jar包,具体如下图所示 1.1 DAO层 mybatis整合spring,通过spring管理SqlSessionFactory.mapper代理对象.需要mybatis和spring的整合包. 整合内容 对应工程 Pojo mangaer-pojo Mapper映射文件 manga

电商网站物流快递单号查询api接口申请案例

[场景需求描述] 电商平台及ISV商家对物流api接口的需求有很多,今天我们主要分享的就是快递鸟快递单号查询接口的对接指南,快递单号查询接口对接的应用场景有很多,很多场景会遇到,最主要的就是电商网站用户打开"我的订单"时调用此API显示物流信息详情,电商管理后台的物流系统,客服在对账前查询所有运单的签收状态,并追踪问题,电商平台对商家物流管控,要求必须在多久快递必须发出要看到揽件状态,多久必须收到货物看到签收状态,根据这些状态对商家管控从而提升用户的整体满意度.[对接使用流程] 1.注

UiBot RPA:电商决胜双11的秘密武器

近年来,中国网络零售市场规模持续扩大.数据显示,2019年前三季度,全国网上零售额73237亿元,同比增长16.8%.其中,实物商品网上零售额57777亿元,增长20.5%,占社会消费品零售总额比重的19.5%. 然而,在规模增长的同时,中国网购交易增速却在逐渐放缓.据艾瑞咨询调查显示,以天猫.京东.唯品会等为代表的传统主流电商平台用户增速已持续放缓至20%甚至更低. 另一方面,电商商家数量持续增加.目前,主流电商平台活跃商户数量已经超过1200万,商家间竞争已趋于白热化. 对于电商而言,每年的

软件机器人,电商决胜双十一(双十二)的秘密武器

近年来,中国网络零售市场规模持续扩大.数据显示,2019年前三季度,全国网上零售额73237亿元,同比增长16.8%.其中,实物商品网上零售额57777亿元,增长20.5%,占社会消费品零售总额比重的19.5%. 然而,在规模增长的同时,中国网购交易增速却在逐渐放缓.据艾瑞咨询调查显示,以天猫.京东.唯品会等为代表的传统主流电商平台用户增速已持续放缓至20%甚至更低.另一方面,电商商家数量持续增加.目前,主流电商平台活跃商户数量已经超过1200万,商家间竞争已趋于白热化. 对于电商而言,每年的"

短视频APP+不同类型社交应用发展分析+化妆品电商

短视频APP——昙花一现还是发展趋势? 在这个互联网与科技并行且飞速发展的时代,各种app不断涌入市场,其中短视频app便是一个典型,美拍,就成功入围2014年十大最火app.而短视频app也势必要成为发展趋势而绝非昙花一现,接下来就让我们一起分析一下它之所以能够引领时代潮流的种种原因. (一)时代背景 1.当前网络上的传播媒体十分多样,诸如微信,微博,QQ等都能够随时随地让人们分享自己的幸福,展示自己的风采,这样一来,便为短视频app提供了更广阔的交流发布空间. 2.短视频app的种类多种多样

电商网站前台与后台系统架构

之前做的一直在做网站的后台系统: 这些都是本网站的后台系统. 下面看下前台系统是如何搭建的: 因为现在客户端有pc端和移动端,所以将客户端不直接与数据库连接,而是采用服务端跟数据库连接,每个独立的客户端可以单独调用服务的接口,这样方便部署和管理. 为什么要这样做呢? 在互联网系统开发当中,我们一般都是采用了分层的方式来架构系统,但是为什么我们需要分层进行架构呢? 采用分层架构有利于系统的维护,系统的扩展.这其实就是系统的可维护性和可扩展性. 分层就是按照功能把系统切分细分,细分之后就能分布式部署