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. JavaScript标准库之——JSON

    JSON 对象包含了两个方法,一是解析 JavaScript Object Notation (JSON),二是将值转换为 JSON.这个对象本身不能被调用或者作为构造函数,除了它的这两个方法属性外 ...

  2. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  3. springMVC注解启用及优化

    使用注解的原因 最方便的还是启用注解 注解方便,而且项目中很流行. 配置文件尽量减少,主要使用注解方式. Springmvc的注解是在2.5版本后有了注解,如何开启注解配置文件 Web.xml文件中不 ...

  4. yuecheng 笑话

    http://115.28.189.219:9898/stock/manager_articles/fundamentals 要闻 http://115.28.189.219:9898/stock/m ...

  5. FileInputStream和BufferedInputStream的区别

    FileInputStream 属于数据源 BufferedInputStream 属于FileInputStream的一个装饰 BufferedInputStream 有个内部缓冲区当read时会先 ...

  6. 利用HtmlAgilityPack库进行HTML数据抓取

    主要介绍基于XPATH的文本分析方式的实现,代码如下: using System; using System.Collections.Generic; using System.Linq; using ...

  7. android权限permission大全

    1.Android.permission.WRITE_USER_DICTIONARY允许应用程序向用户词典中写入新词 2.android.permission.WRITE_SYNC_SETTINGS写 ...

  8. 【Hello CC.NET】巧用模板简化配置

    从 <[Hello CC.NET]CC.NET 实现自动化集成> 到 <[Hello CC.NET]自动化发布时 Web.config 文件维护> ,大神在评论里提到的方案还没 ...

  9. Ember.js之动态创建模型

    本人原文地址发布在:点击这里 What problem did we meet? As ember document suggestion, we may define a model as a st ...

  10. 来科普下游标(MSSQL)这东西。。。

    刚刚接到一个面试电话,对头的先生问我懂不懂触发器和存储过程,当时是觉得有些好笑,毕竟“视图.触发和存储”是咱数据库工程师的吉祥三宝,怎么可能不认识?只是稍后他还问了下游标这东西,仔细想想我是不常使用C ...