easyui combobox 三级级联 input 两种实现

/**<img src=‘${pageContext.request.contextPath}/images/block.png‘/>
 * @param 默认载入 省市
 */
$(function(){
	$("input[id^=‘area_‘]").css({"height":"39px","width":"250px"});
	var city = "",district = "";
	 $(‘#area_province‘).combobox({
		valueField:‘id‘,
		textField:‘name‘,
		editable:false,
		url:postPath+"/bisProvince/getBisProvinces",
		method:"get",
		formatter:function(row){
			return "<img class=‘item-img‘ src=‘"+postPath+"/images/block.png‘/> <span class=‘item-text‘>"+row.name+"</span>";
		},
		onLoadSuccess:function(){
			/*if($("#provinceId").val() != null){
				$(this).combobox("select",$("#provinceId").val());
			}*/
		},
		onChange:function(provinceId, oldValue){
			$.get(postPath+"/bisCity/getBisCitys/"+provinceId,function(data){
				city.combobox("clear").combobox(‘loadData‘,data);
				district.combobox("clear");
			},‘json‘);
		}
	});

	city = $(‘#area_city‘).combobox({
		valueField:‘id‘,
		textField:‘name‘,
		editable:false,
		panelHeight:"auto",
		formatter:function(row){
			return "<img class=‘item-img‘ src=‘"+postPath+"/images/block.png‘/> <span class=‘item-text‘>"+row.name+"</span>";
		},
		onLoadSuccess:function(){
			/*if($("#cityId").val() != null){
				$(this).combobox("select",$("#cityId").val());
			}*/
		},
		onChange:function(cityId, oldValue){
			$.get(postPath+"/bisDistrict/getBisDistricts/"+cityId,function(data){
				district.combobox("clear").combobox(‘loadData‘,data);
			},‘json‘);
		}
	});

	district = $(‘#area_district‘).combobox({
		valueField:‘id‘,
		textField:‘name‘,
		editable:false,
		panelHeight:"auto",
		formatter:function(row){
			return "<img class=‘item-img‘ src=‘"+postPath+"/images/block.png‘/> <span class=‘item-text‘>"+row.name+"</span>";
		},
		onLoadSuccess:function(){
			/*if($("#districtId").val() != null){
				$(this).combobox("select",$("#districtId").val());
			}*/
		},
	});
});
/*$(function(){
	$.get(postPath+"/bisProvince/getBisProvinces",function(datas){
		var option = "<option value=‘ ‘>-- 请选择 --</option>";
		$.each(datas, function(i) {
			if($("#provinceId").val() == datas[i].id){
				option += "<option value=‘"+datas[i].id+"‘ selected>"+datas[i].name+"</option>";
			}else{
				option += "<option value=‘"+datas[i].id+"‘>"+datas[i].name+"</option>";
			}
		});
		$("#province").html(option);
	});
	if($("#cityId").val() != null && $("#cityId").val() != ""){
		loadCity($("#provinceId").val());
	}
});

*//**
 * @param 载入城市
 * @param provinceId 省市 ID
 *//*
function loadCity(provinceId){
	$("#provinceId").val(provinceId);
	$.get(postPath+"/bisCity/getBisCitys/"+provinceId,function(datas){
		var option = "<option value=‘ ‘>-- 请选择 --</option>";
		$.each(datas, function(i) {
			if($("#cityId").val() == datas[i].id){
				option += "<option value=‘"+datas[i].id+"‘ selected>"+datas[i].name+"</option>";
			}else{
				option += "<option value=‘"+datas[i].id+"‘>"+datas[i].name+"</option>";
			}
		});
		$("#city").html(option);
	});
	if($("#districtId").val() != null && $("#districtId").val() != ""){
		loadDistrict($("#cityId").val());
	}
}

*//**
 * @param 载入区域
 * @param cityId 城市 ID
 *//*
function loadDistrict(cityId){
	$("#cityId").val(cityId);
	$.get(postPath+"/bisDistrict/getBisDistricts/"+cityId,function(datas){
		if(datas != null && datas != ""){
			var option = "<option value=‘ ‘>-- 请选择 --</option>";
			$.each(datas, function(i) {
				if($("#districtId").val() == datas[i].id){
					option += "<option value=‘"+datas[i].id+"‘ selected>"+datas[i].name+"</option>";
				}else{
					option += "<option value=‘"+datas[i].id+"‘>"+datas[i].name+"</option>";
				}
			});
			$("#district").html(option);
		}
	});
}

$("#district").change(function(){
	$("#districtId").val($("#district").val());
});

$("#city").change(function(){
	//$("#cityId").val($("#city").val());
	loadDistrict($("#city").val());
});

$("#province").change(function(){
	$("#cityId").val("");
	$("#district").empty();
	loadCity($("#province").val());
});
*/
时间: 2024-09-30 20:18:38

easyui combobox 三级级联 input 两种实现的相关文章

EasyUI datagrid toolbar常用的两种形式

第一种 <table id="userInfo"></table> <script> $(function(){ $('#userInfo').datagrid({ url:'../json/customerAction_getCustomerInfo', fitColumns:true, striped:true, nowrap:true, loadMsg:'数据正在加载,请稍后...', pagination:true, rownumbers:t

easyui tree 级联从三种状态变为两种状态

在网上找的方法都是使用方法$('#tree').tree('select', node.target);都没绕开oncheck方法,后来发现easyui tree提供了一个update方法可以成功绕开onCheck方法,从而成功将级联改为两种状态.代码如下: $('#tree').tree({ url: '/tree' ,lines:false ,checkbox:true ,cascadeCheck: false ,onCheck: function (node, checked) { blC

easyUI的combobox实现级联

先简介下combobox: easyUI重写了select,取而代之的是combobox,有例如以下几种方式能够创建一个combobox 1.使用select标签,并加上class="easyui-combobox",这样的方式比較适用于静态的选项 2.使用input标签,并加上class="easyui-combobox",后面跟上data-options,能够用local或是remote方式载入数据 3.使用js方式,和2基本同样,仅仅是把combobox一些属

easyui里弹窗的两种表现形式

easyui里弹窗的两种表现形式 博客分类: jQueryEasyUi 1.主JSP页面中描绘弹窗   Html代码   <div id="centerDiv" data-options="region:'center',border:false"> <table id="networkQueryGrid" data-options="queryForm:'#queryForm',title:'查询结果',iconCl

用easyui实现查询条件的后端传递并自动刷新表格的两种方法

用easyui实现查询条件的后端传递并自动刷新表格的两种方法 搜索框如下: 通过datagrid的load方法直接传递参数并自动刷新表格 通过ajax的post函数传递参数并通过loadData方法将数据初始化到表格中 js代码(搜索按钮的点击事件部分): $("#standardQueryBtn").click(function(){//点击搜索按钮的触发事件 if($("#offerid").val() != ""){//判断id搜索框的值是

mysql级联更新的两种方式:触发器更新和外键

1.mysql级联更新有两种方式:触发器更新和外键更新. 2.触发器更新和外键更新的目的都是为了保证数据完整性. 我们通常有这样的需求:删除表Table 1中记录,需要同时删除其它表中与Table 1有关的若干记录. 举个例子: 现有2个实体- 麻将机 学生.课程,1种联系- 成绩 分别创建 学生表 students, 课程表course,成绩表score --创建 学生表 students CREATE TABLE IF NOT EXISTS `students` ( `id` int(11)

EasyUI 之 DataGrid分页组件中文显示的两种方法

        在过去的这一段时间参与了高校云平台的评教系统,在系统的前端要求用MVC+Easyui,从今天开始就来给大家讲讲MVC+EasyUI的前端应用. JQueryEasyUI:一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签. 在系统中经常会使用到EasyUI-DataGrid(数据

EasyUI Pagination 分页的两种做法

EasyUI 的 datagrid 支持服务器端分页,但是官方的资料比较少,以下总结了两种 datagrid 的服务器端分页机制,可根据情况具体使用. 一:使用 datagrid 默认机制 后台: public JsonResult GetQuestionUnit() {     // easyui datagrid 自身会通过 post 的形式传递 rows and page     int pageSize = Convert.ToInt32(Request["rows"]);  

JavaWeb后台从input表单获取文本值的两种方式

JavaWeb后台从input表单获取文本值的两种方式 #### index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" name="n