KendoUI系列:TreeView
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>