1、加载本地数据

<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>
<div id="treeView"></div>
<script type="text/javascript">
$(function () {
var dataSource = new kendo.data.HierarchicalDataSource({
data: [{
id: "110000",
text: "北京市"
}, {
id: "310000",
text: "上海市"
}, {
id: "350000",
text: "福建省",
expanded: true,
items: [{
id: "350100",
text: "福州市"
}, {
id: "350200",
text: "厦门市"
}, {
id: "350500",
text: "泉州市"
}]
}, {
id: "440000",
text: "广东省",
expanded: true,
items: [{
id: "440100",
text: "广州市"
}, {
id: "440300",
text: "深圳市"
}]
}]
}); $("#treeView").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: dataSource
});
});
</script>

  效果预览:

<script type="text/javascript">
$(function () {
var dataSource = new kendo.data.HierarchicalDataSource({
data: [{
ProvinceID: "110000",
ProvinceName: "北京市"
}, {
ProvinceID: "310000",
ProvinceName: "上海市"
}, {
ProvinceID: "350000",
ProvinceName: "福建省",
expanded: true,
Cities: [{
CityID: "350100",
CityName: "福州市"
}, {
CityID: "350200",
CityName: "厦门市"
}, {
CityID: "350500",
CityName: "泉州市"
}]
}, {
ProvinceID: "440000",
ProvinceName: "广东省",
expanded: true,
Cities: [{
CityID: "440100",
CityName: "广州市"
}, {
CityID: "440300",
CityName: "深圳市"
}]
}],
schema: {
model: {
children: "Cities"
}
}
}); $("#treeView").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: dataSource,
dataValueField: ["ProvinceID", "CityID"],
dataTextField: ["ProvinceName", "CityName"]
});
});
</script>

KendoUI系列:TreeView的更多相关文章

  1. [WPF系列]-TreeView的常用事项

    引言 项目经常会用Treeview来组织一些具有层级结构的数据,本节就将项目使用Treeview常见的问题作一个总结. DataBinding数据绑定 DataTemplate自定义 <Hier ...

  2. Silverlight自定义控件系列 – TreeView (1)

      原文路径:http://blog.csdn.net/wlanye/article/details/7265457 很多人都对MS自带的控件不太满意(虽然MS走的是简约风格),都会试图去修改或创建让 ...

  3. KendoUI系列:Window

    1.基本使用 <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css") ...

  4. KendoUI系列:MultiSelect

    1.基本使用 1>.创建Input <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common. ...

  5. KendoUI系列:DatePicker

    1.基本使用 <link href="@Url.Content("~/C ontent/kendo/2014.1.318/kendo.common.min.css" ...

  6. KendoUI系列:DropDownList

    1.基本使用 1>.创建Input <input id="dropDownList" /> <link href="@Url.Content(&q ...

  7. [转]KendoUI系列:Grid

    本文转自:http://www.cnblogs.com/libingql/p/3774879.html 1.基本使用 <div id="grid"></div&g ...

  8. asp.net 第三方UI控件 Telerik KendoUI 之 TreeVIew 的用法记录

    一.前台显示 备注:一次性取出所有节点 function loadTreeData() { $.ajax({ type: 'POST', url: '@(Html.UrlHref("Scri ...

  9. Silverlight自定义控件系列 – TreeView (2) 基本布局和States

    TreeView的树形结构都以缩进方式显示,现在来完成这部分. 首先,要定义出每个节点上都包含什么东西.先看看Win7资源管理器的TreeView: 图2.1 资源管理器 一个通用的TreeView至 ...

随机推荐

  1. HTML5界面开发工具jQuery EasyUI更新至v1.3.5

    本文转自:evget.com HTML5界面开发工具 jQuery EasyUI 最新发布v1.3.5,新版修复了多个bug,并改进了menu,tabs和slider等多个控件.jQuery Easy ...

  2. DECLARE_GLOBAL_DATA_PTR宏定义问题

    最近闲着顺便看了看6410的uboot代码,因为友善的boot对nand部分代码做了隐藏,所以干脆找了光盘里面三星原厂的uboot代码来看,因为友善的boot代码肯定也是基于厂商的代码改的,肯定可以的 ...

  3. swift的运算符

    1.什么是运算符?它有什么作用? 运算符是一种特定的符号或者表达式.它用来验证.修改.合并变量. 2.运算符有哪些? 运算符有很多,很多朋友学的很烦.这里我依据它的作用把它分为几块来介绍: a:赋值运 ...

  4. Java学习笔记一——安装JDK并配置环境变量

    下载安装JDK1.8 在官网上下载JDK,官网地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213 ...

  5. php composer使用经验

    1.使用composer引用了一个包,但是这个包没有使用命名空间,在项目中该如何使用这个包? 编辑composer.json文件 "autoload":{ "files& ...

  6. python 实现简单排序

    今天偶得一本神奇的算法秘笈,据编辑说是一本easy and intresting 的书,所以我就开始翻开了. 书中作者用的是C语言,我最近正啃python 所以想着用python来解决作者的提问. 这 ...

  7. [leetcode 34] search for a range

    1 题目: Given a sorted array of integers, find the starting and ending position of a given target valu ...

  8. Transactional replication-如何跳过一个事务

    在transactional replication, 经常会遇到数据同步延迟的情况.有时候这些延迟是由于在publication中执行了一个更新,例如update ta set col=? Wher ...

  9. Xamarin.Forms.Platform.Perspex, Xamarin Forms 的 Perspex(号称下一代WPF) 实现

    Perspex, 跨平台的UI框架,加上Xamarin Forms的跨平台的中间层,这样同一套代码就可跨几乎所有已知平台,这其中包括旧版Windows, Linux及Mac OS. 目前,基本控件可显 ...

  10. 软件工程day7

    参与组内讨论,关于新功能“吐槽墙”的UI设计,小组决定使用TabControl控件实施. 于周末几天自己使用PS学习临摹了一些程序的icon,完成度不高. 鉴于正在参与开发的软件为“工具性”+“微社交 ...