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>    </a>
<a href="javascript:void(0)" class="easyui-linkbutton"
onclick="submitForm()">提交</a>
<a>    </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值
這裏也需要拓展的是，例子用.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是選擇，傳遞值後，顯示到頁面上實際也就是選擇，因此大家需要注意這點。