用KendoUI实现下来列表的级联

原创 2013年12月03日 18:11:27

   最近在学习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中KendoDropDownList控件的使用——三级级联模块的实现

1. 应用需求    在权限系统开发中除了以上数据表关系的设计之外,比较麻烦的地方是级联模块在页面的展示,由于设计中最多是控制到三级,因此三级级联模块的展示、编辑等页面操作是需要解决的问题,这里采用...

ajax实现下拉列表级联

  • 2012年05月13日 14:50
  • 4.2MB
  • 下载

java+sshs实现级联下拉列表(以行业大类和详细类为例)

一、 级联下拉列表(以行业大类和详细类为例) 主要实现思路: 主下拉列表(行业大类) 发生onchange事件时调用action查询次下拉列表 具体实现: 1. jsp页面脚本: ...

dwr实现select列表的动态级联

  • 2010年09月21日 08:51
  • 3.31MB
  • 下载

Struts2.2配置json+ajax实现三级联(任意级联)下拉列表框。

前言:折腾了两天终于实现了ajax的局部刷新,级联下拉列表框。
  • ahhmdwg
  • ahhmdwg
  • 2014年11月22日 10:01
  • 1983

J2EE项目系列(四)--SSM框架构建积分系统和基本商品检索系统(Spring+SpringMVC+MyBatis)(3)Ajax使用详解(级联列表)以及企业级报表Excel导入导出实现

今天来讲下企业的开发的一些功能应用吧,就是Ajax使用,以及简单的企业报表的导入导出,基于原有的项目进行展示(其实是本博主想偷懒)。 本博客属于一个项目的系列之一,每个大功能点都配置了一篇博客解析。h...

js技术实现html页面解析xml文档的级联下拉列表操作

js实现xml文档的解析,级联操作,实现对应省份对应市的下拉列表

Android 实现下拉列表级联

.xml代码如下:

javascript实现用户名验证及级联下拉列表的产生

无标题文档 .star{ color:#F00} * 姓名: 数字字母_组合,长度6--10 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用KendoUI实现下来列表的级联
举报原因:
原因补充:

(最多只允许输入30个字)