EasyUi三级联动实现和编辑时显示问题的解决（工作备用）

最新推荐文章于 2021-01-15 10:57:17 发布

菩提石

最新推荐文章于 2021-01-15 10:57:17 发布

阅读量499

点赞数

分类专栏： Easyui 文章标签： easyui 省市县三级联动编辑页面无法显示

本文链接：https://blog.csdn.net/HY845638534/article/details/90753606

版权

Easyui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 什么是easyui

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。

easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。

使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。

但是easyui自己重写了很多js，导致许多标签用法和原生js不同。

2 省市县的三级联动实例

这里推荐一种访问jsp页面的方法

@Controller
@RequestMapping("/oper")
public class OpenController {
    @RequestMapping("{url}")
	public String openOper(@PathVariable("url")String url) {
		return url;
	}
	
}

后台直接调用/项目名/oper/页面名（无需.jsp,系统会自动加入）
或"${pageContext.request.contextPath}/oper/页面名访问

编写省市县实体：

public class Province {

	 private int codeid;
	 private int parentid;
	 private String cityName;
	public int getCodeid() {
		return codeid;
	}
	public void setCodeid(int codeid) {
		this.codeid = codeid;
	}
	public int getParentid() {
		return parentid;
	}
	public void setParentid(int parentid) {
		this.parentid = parentid;
	}
	public String getCityName() {
		return cityName;
	}
	public void setCityName(String cityName) {
		this.cityName = cityName;
	}
	@Override
	public String toString() {
		return "Place [codeid=" + codeid + ", parentid=" + parentid + ", cityName=" + cityName + "]";
	}	 
}

省市县sql导入：
获取链接：https://pan.baidu.com/s/1f4LjdmeornsMwIQlMU31IQ
提取码：mjg0
通过easyui在父页面直接打开子页面

在这里插入图片描述并在主页面导入所需js文件

子jsp页面

<div style="padding:50px 100px 100px 10px">
	<form id="content" method="post">
		<table cellpadding="5">
<tr>
				<td>所在地区:</td>
				<td>
				<select id="forProvince" name="forProvince" style="text-align: start;padding-top: 0px;padding-bottom: 0px;height: 30px;line-height: 30px;width: 97px">
				    <option value="">--请选择省--</option>
				</select>
				<select id="forCity" name="forCity" style="text-align: start; padding-top: 0px;padding-bottom: 0px;height: 30px;line-height: 30px;width: 97px;">
				    <option value="">--请选择市--</option>
				</select>
				<select id="forCounty"  name="forCounty" style="text-align: start;padding-top: 0px;padding-bottom: 0px;height: 30px;line-height: 30px;width: 97px;">
				    <option value="">--请选择区--</option>
				</select>
				</td>
			</tr>
			</table>
	</form>
	<div style="padding: 5px" align="center">
	<a>&emsp;&emsp;&emsp;&emsp;</a>
		<a href="javascript:void(0)" class="easyui-linkbutton"
			onclick="submitForm()">提交</a>
			<a>&emsp;&emsp;&emsp;&emsp;</a>
	    <a href="javascript:void(0)"
			class="easyui-linkbutton" onclick="clearForm()">重置</a>
	</div>
	//此处也为打开新的子页面
//<div id ="getMmapById"></div>
</div>
<script script type="text/javascript">
// function getMapById(id){
// 	$('#getMmapById').window({
// 	    width:1300,
// 	    height:700,
// 	    href: '/SmartTravel/oper/map',
// 	    title:"地图选点",
// 	    modal:true,
// 	    onLoad:function(){
// 	       $("#mId").val(id);
// 	    }
// 	}).window('open');
// }
/**
 * 三级联动
 */
loadProvince();
function loadProvince(){
	$(function(){
	    $.ajax({
	    	url:"/SmartTravel/site/selectCity",
	        async: true,
	        type : "post",
	        dataType:'json',
	        data:{id : 0},
	        success:function(data){
	        	  for(var x in data){
	        		  $("#forProvince").append("<option value='" + data[x].codeid + "'>" + data[x].cityName + "</option>"); 
	        	  }
	        	}
	        		 	});
	      $("#forProvince").change(function(){
	    	  console.log("ninin");
	        				$("#forCity").empty();
	        				$("#forCity").append('<option value="">--请选择市--</option>');
	        				$("#forCounty").empty();
	        				$("#forCounty").append('<option value="">--请选择县/区--</option>');
	        				var codeid = $("#forProvince").val();
	        				$.ajax({
	        			 		url : "${pageContext.request.contextPath}/site/selectCity",
	        			 		async : true,
	        			 		type : "post",
	        			 		dataType : "json",
	        			 		data:{id : codeid},
	        			 		success : function(data) {
	        			             for(var x in data){
	        			                 var $option = $("<option value='" + data[x].codeid + "'>" + data[x].cityName + "</option>");
	        			 $("#forCity").append($option);
	        			  } 
	        			 		}
	        			 	});
	        			});
	        			
	        			$("#forCity").change(function(){
	        				$("#forCounty").empty();
	        				$("#forCounty").append('<option value="">--请选择县/区--</option>');
	        				var codeid = $("#forCity").val();
	        				var htmls2 = '<option value="">--请选择县/区--</option>';
	        				$.ajax({
	        			 		url : "${pageContext.request.contextPath}/site/selectCity",
	        			 		async : true,
	        			 		type : "post",
	        			 		dataType : "json",
	        			 		data:{id  : codeid},
	        			 		success : function(data) {
	        			             for(var x in data){
	        			                  var $option = $("<option value='" + data[x].codeid + "'>" + data[x].cityName + "</option>");
				                   $("#forCounty").append($option);
	        			          }
	        			 		}
	        			 	});
	        			});
	        			
	        		});
	}

注意：$("#forCity").empty();为easyui中的清空input值

这里也需要拓展的是，例子用 $. a j a x 很少在工作中使用，大多使用的是$ .post(“url”,{“字段”：参数}，function（）{
回调函数})

既然说到这里，那就再平一个坑，修改三级联动。这个中间有一个使用datagrid传值的问题

//主页面打开编辑子窗口
function editSite(){
	$('#siteUpdate').window({
	    width:600,
	    height:400,
	    title:"编辑站点",
	    href: '/SmartTravel/oper/siteUpdate',
	    modal:true,
		onLoad:function(){
			var data=$('#valueList').datagrid('getSelections')[0];
			console.log(data);
			$('#siteUpdate').form('load',data);
	}
	}).window('open');
}

编辑页面部分代码

           <tr>
				<td>所在地区:</td>
				<td><input id="forProvince"
					class="easyui-combobox combobox-f combo-f textbox-f"
					name="forProvince" style="width: 97px; display: none;" > 
					
					<input id="forCity" name="forCity" class="easyui-combobox combobox-f combo-f textbox-f"
					 style="width: 97px; display: none;" >
					<input id="forCounty" name="forCounty" class="easyui-combobox combobox-f combo-f textbox-f"
						style="width: 97px; display: none;" >
			</tr>

部分js

<script script type="text/javascript">
/**
 * 三级联动
 */
$('#forProvince').combobox({
	  valueField: 'cityName', //值字段
	  textField: 'cityName', //显示的字段
	  url: '/SmartTravel/site/selectCity?id=0',//url为java后台查询省级列表的方法地址
	  value:$("#forProvince").val(),
	  editable: false, 
			  //模糊查询
			 /*  filter: function(q, row) {
			    var opts = $(this).combobox('options');
			    
			    return row[opts.textField].indexOf(q) == 0; //从头匹配,改成>=即可在任意地方匹配
			  }, */
	    onClick: function(rec) {
	    $('#forCity').combobox('setValue', "");
	    $('#forCounty').combobox('setValue',"");
	    var url = '/SmartTravel/site/selectCity?id=' + rec.codeid;//url为java后台查询事级列表的方法地址
	    $('#forCity').combobox('reload', url);
	  }
	}); 
	//市区 
	$('#forCity').combobox({
	  valueField: 'cityName', //值字段
	  textField: 'cityName', //显示的字段       
	  panelHeight: 'auto',
	  editable: false, //不可编辑，只能选择
	  onClick: function(rec) {
	    $('#forCounty').combobox('setValue',"");
	    var url = '/SmartTravel/site/selectCity?id=' + rec.codeid;//url为java后台查询区县级列表的方法地址
	    $('#forCounty').combobox('reload', url);
	  }
	});
	// 	区 县
	$('#forCounty').combobox({
	  valueField: 'cityName',
	  textField: 'cityName',
	  panelHeight: 'auto',
	  editable: false,
	});

注意这里的onClick 和onSelect 的区别，这里需要设置为onClick,因为onclick是点击子节点才会清空后面的组合框，
onSelect是选择，传递值后，显示到页面上实际也就是选择，因此大家需要注意这点。

菩提石

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EasyUi三级联动实现和编辑时显示问题的解决（工作备用）

1 什么是easyuieasyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。但是easyui自己重写了很多js，导致许多标签用法和原生js不同。2 省市县的三级联动实例这里推荐...
复制链接

扫一扫