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. well属性

    Bootstrap 有一个 class 属性叫做 well,它的作用是为设定的列创造出一种视觉上的深度感(一种视觉上的效果,动手写代码体会一下).

  2. flash 定义二维数组

    一种二维数组的定义方法   //假设二维数组为 [5][7]var  xn:Number = 5;var  yn:Number = 7; //定义一数值变量var  temp:Number = 0; ...

  3. C++内存对齐的理解

    程序编译器对结构的存储的特殊处理确实提高CPU存储变量的速度,但是有时候也带来了一些麻烦,我们也屏蔽掉变量默认的对齐方式,自己可以设定变量的对齐方式. 编译器中提供了#pragma pack(n)来设 ...

  4. cobbler 配置(转载)

    Cobbler介绍 Cobbler 是一个系统启动服务(boot server),可以通过网络启动(PXE)的方式用来快速安装.重装物理服务器和虚拟机,支持安装不同的 Linux 发行版和 Windo ...

  5. SQL Saturday活动再起

    SQL Saturday活动再起 时间:2015年05月09日(星期六) 地点:上海徐汇区港汇2座10楼(10.073) 我们相约港汇2座10楼(10.073),SQL PASS上海分会的SQLSat ...

  6. monodb C#接口封装

    mongodb的C#封装,驱动是samus/mongodb-csharp 1.连接类 using MongoDB; using MongoDB.Linq; namespace DBModel { pu ...

  7. Java构建工具Ant小记(一)

    Ant简介 Ant是基于java的构建工具.理论上来说它类似与make工具,但是却克服了make的一些固有的缺陷. 传统的Make是基于操作系统shell的构建工具,虽然也可以基于工作的os对make ...

  8. WPF快速入门系列(9)——WPF任务管理工具实现

    转载自:http://www.cnblogs.com/shanlin/p/3954531.html WPF系列自然需要以一个实际项目为结束.这里分享一个博客园博客实现的一个项目,我觉得作为一个练手的项 ...

  9. 【读书笔记】.Net并行编程高级教程(二)-- 任务并行

    前面一篇提到例子都是数据并行,但这并不是并行化的唯一形式,在.Net4之前,必须要创建多个线程或者线程池来利用多核技术.现在只需要使用新的Task实例就可以通过更简单的代码解决命令式任务并行问题. 1 ...

  10. 用Nim语言开发windows GUI图形界面程序

    前言 本文得到了“樂師”的大力支持, 我们一起调试程序到深夜,要是没有他的帮忙, 我不知道要多久才能迈过这道坎, 另外“归心”还有其他人也提供了帮助, 他们都来自于QQ群:“Nim开发集中营”4693 ...