关闭

用KendoUI实现下来列表的级联

484人阅读 评论(0) 收藏 举报
分类:

   最近在学习KendoUI,花了半天的时间才把下拉列表的级联功能实现,以此文章记之。

具体代码如下:

<input id="province" class="pcc"/>
<input id="city" class="pcc" />
<input id="county" class="pcc" />
<script type="text/javascript">
function provinceChange() {
    var cityBox = $("#city").data("kendoComboBox");
    cityBox.dataSource.read();
    cityBox.text("全部");
    var countyBox = $("#county").data("kendoComboBox");
    countyBox.text("全部");
}
function cityChange() {
    var countyBox = $("#county").data("kendoComboBox");
    countyBox.dataSource.read();
    countyBox.text("全部");
}
$(function(){
  $("#province").kendoComboBox({
          height: 500,
          dataTextField: "name",
          dataValueField: "code",
          placeholder:"选择省/直辖市...",
          change:provinceChange,
          dataSource:{
              transport:{
                  read:"/你的webservice路径/services/rest/projectService/province"
              }
          }
      });
  $("#city").kendoComboBox({
  	    placeholder:"选择地级市...",
		height: 300,
		dataTextField: "name",
        dataValueField: "code",
        change:cityChange,
        dataSource:{
        transport:{
        	read:{
          	 url: "/你的webservice路径/services/rest/projectService/city",
          	 data:function(){
          	 	var p=$("#province").data("kendoComboBox").value();
          	 	return {province:p};
          	 	}
   		  }
   		}
        }
	});
  $("#county").kendoComboBox({
  	    placeholder:"选择县/区..",
		height: 300,
		dataTextField: "name",
        dataValueField: "code",
        dataSource:{
        transport:{
        	read:{
          	 url: "/你的webservice路径/services/rest/projectService/county",
          	 data:function(){
          	 	var p=$("#city").data("kendoComboBox").value();
          	 	return {city:p};
          	 	}
   			}
   		 }
        }
	});
});
</script>
后台要实现相应的方法,完成之后的前台界面如下图所示:


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14179次
    • 积分:551
    • 等级:
    • 排名:千里之外
    • 原创:42篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类