再学习kendoUi的插件中自己写个demo,加深一下印象。
1.前端html代码,当然你必须引用kendo相关的js和css。
<div class="k-content">
<label>省:</label>
<input id="province" placeholder="请选择省..." style="width: 200px;" />
<label>市:</label>
<input id="city" placeholder="请选择市..." style="width: 200px;" />
<label>县区:</label>
<input id="county" placeholder="请选择县区..." style="width: 200px;" />
<button class="k-button k-primary" id="getAddress">获取选择的值</button>
</div>
2.js实现
//省
var province = $("#province").kendoDropDownList({
filter: "startswith",//可以进行筛选
dataTextField: "name",
dataValueField: "codeId",
filter: "contains",
minLength: 1,
dataSource:{
transport: {
read: {
url: basePath+"address/getByParentId.do",
dataType: "json",
type: "POST"
},
parameterMap:function (options,operation) {
options.parentId = 0;
return options;
}
}
},
index:0,
change:function (e) {
city.dataSource.read();
},
dataBound:function (e) {
this.select(0)//选中
city.dataSource.read();
}
}).data('kendoDropDownList');
//市
var city = $("#city").kendoDropDownList({
filter: "startswith",
dataTextField: "name",
dataValueField: "codeId",
index:0,
dataSource:{
transport:{
read: {
url: basePath+"address/getByParentId.do",
dataType: "json",
type: "POST"
},
parameterMap:function (options,operation) {
options.parentId = $("#province").val();
return options;
}
}
},
change:function (e) {
county.dataSource.read();
},
dataBound:function (e) {
this.select(0)
county.dataSource.read();
}
}).data('kendoDropDownList');
//县区
var county = $("#county").kendoDropDownList({
filter: "startswith",
dataTextField: "name",
dataValueField: "codeId",
index:0,
dataSource:{
transport:{
read: {
url: basePath+"address/getByParentId.do",
dataType: "json",
type: "POST"
},
parameterMap:function (options,operation) {
options.parentId = $("#city").val();
return options;
}
}
},
dataBound:function (e) {
this.select(0)
}
}).data('kendoDropDownList');
/**
* 获取地址的选值
*/
$("#getAddress").on('click',function () {
alert(province.value()+'--'+city.value()+'--'+county.value());
alert(province.text()+'--'+city.text()+'--'+county.text());
})
3.后端接口
controller
@RequestMapping("getByParentId")
public List<AreaModel> getByParentId(Integer parentId){
if(parentId!=null){
return this.areaService.getByParentId(parentId);
}
return null;
}
service
public List<AreaModel> getByParentId(Integer parentId){
return this.areaMapper.selectByParentId(parentId);
}
dao
List<AreaModel> selectByParentId(Integer parentId);
sql
<select id="selectByParentId" parameterType="java.lang.Integer" resultMap="BaseResultMap">
select *
from imp_area
where parentId = #{parentId,jdbcType=INTEGER}
</select>
运行代码,三级联动成功。