前台代码
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.material.mobile.min.css" />
<body ng-app="app" ng-controller="MyCtrl">
<div id="example">
<kendo-tree-list k-options="treelistOptions"></kendo-tree-list>
</div>
</body>
</html>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
<script src="Js/All.js"></script>
All.js
angular.module("app", ["kendo.directives"])
.controller("MyCtrl", function ($scope, $http) {
$scope.treelistOptions = {
dataSource: {
type: "odata-v4", //type声明用的是odata-v4
transport: {
read: "odata/Howsehold?$expand=Community,MelerSpread,FloorNumber", //用odata的路径
},
pageSize: 6, //每页最大显示数量
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 337,
sortable: true,
pageable: true, //开启分页功能
columns: [
{ field: "Community.CommNumber", title: "小区" },
{ field: "Strorey", title: "楼层", template: "{{ dataItem.Strorey}}楼" },
{ field: "Unit", title: "单元", template: "{{ dataItem.Unit}}单元" },
{ field: "FloorNumber.Number", title: "门牌号" },
{ field: "Name", title: "用户名" },
{ field: "MelerSpread.Water", title: "水费" },
{ field: "MelerSpread.Electric", title: "电费" },
{ field: "MelerSpread.Gas", title: "燃气费" },
]
};
});