Kendo+Angularjs展示数据的表格

前台代码

     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: "燃气费" },
            ]
        };

    });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值