用KendoUI实现下来列表的级联

   最近在学习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>
后台要实现相应的方法,完成之后的前台界面如下图所示:


阅读更多
个人分类: KendoUI
上一篇在Spring框架中获取服务器绝对路径
下一篇求二进制数中1的个数--Java实现
想对作者说点什么? 我来说一句

Kendoui grid多级分组表格展现

2013年03月19日 26KB 下载

没有更多推荐了,返回首页

关闭
关闭