使用 Kendo UI 和 AngularJS 创建基本数据网格 [英] Creating a basic data grid with Kendo UI and AngularJS

问题描述

我正在试验 AngularJS.我想展示一个基本的剑道网格.我正在尝试使用纯指令来做到这一点.考虑到这一点，我查看了 Kendo UI/Angular JS 项目(https://github.com/kendo-labs/angular-kendo).不幸的是，我的

index.html:

产品:{{products.length}}
<div kendo-grid k-data-source="products" k-selectable="'row'"k-pageable='{ "refresh": true, "pageSizes": true }'k-列='[{字段":名称"，标题":名称"}，{ "field": "部门", "title": "部门"},{ "field": "LastShipment", "title": "Last Shipment" }]'>

controllers.js

function myController($scope) {console.log("正在初始化控制器...");$scope.products = [{ id:1, name:'Tennis Balls', 部门:'Sports', lastShipment:'10/01/2013' },{ id:2, name:'Basket Balls', 部门:'Sports', lastShipment:'10/02/2013' },{ id:3, name:'Oil', Department:'Auto', lastShipment:'10/01/2013' },{ id:4, name:'Filters', Department:'Auto', lastShipment:'10/01/2013' },{ id:5, name:'Dresser', 部门:'Home Furnishings', lastShipment:'10/01/2013' }];}

我已确认我已正确连接控制器.活动计数正确显示.但是，网格不会出现.我不知道我做错了什么.

感谢您的帮助.

解决方案

看起来好像字段名称拼写错误.以下对我有用:

这是一个现场演示:http://jsbin.com/odeQAfI/2/edit

为了避免在寻呼机中出现 NaN 消息，您需要将 products 字段设为 Kendo 数据源:

function MyController($scope) {$scope.products = new kendo.data.DataSource({数据: [{ id:1, name:'Tennis Balls', 部门:'Sports', lastShipment:'10/01/2013' },{ id:2, name:'Basket Balls', 部门:'Sports', lastShipment:'10/02/2013' },{ id:3, name:'Oil', Department:'Auto', lastShipment:'10/01/2013' },{ id:4, name:'Filters', Department:'Auto', lastShipment:'10/01/2013' },{ id:5, name:'Dresser', 部门:'Home Furnishings', lastShipment:'10/01/2013' }],页面大小:2});}

这是一个现场演示:http://jsbin.com/ODElUfO/2/edit

I'm experimenting with AngularJS. I want to show a basic Kendo Grid. I'm trying to do this using pure directives. With that in mind, I've looked at the Kendo UI / Angular JS project (https://github.com/kendo-labs/angular-kendo). Unfortunately, my

index.html:

<div>Products: {{products.length}}</div>
<div kendo-grid k-data-source="products" k-selectable="'row'"
  k-pageable='{ "refresh": true, "pageSizes": true }'
  k-columns='[
    { "field": "Name", "title": "Name"},
    { "field": "Department", "title": "Department"},
    { "field": "LastShipment", "title": "Last Shipment" }
  ]'>
</div>

controllers.js

function myController($scope) {
    console.log("initializing controller...");
    $scope.products = [
        { id:1, name:'Tennis Balls', department:'Sports', lastShipment:'10/01/2013' },
        { id:2, name:'Basket Balls', department:'Sports', lastShipment:'10/02/2013' },
        { id:3, name:'Oil', department:'Auto', lastShipment:'10/01/2013' },
        { id:4, name:'Filters', department:'Auto', lastShipment:'10/01/2013' },
        { id:5, name:'Dresser', department:'Home Furnishings', lastShipment:'10/01/2013' }
    ];
}

I've verified that I've wired up the controller properly. The activity count shows properly. However, the grid does not appear. I can't figure out what I'm doing incorrectly.

Thank you for your help.

解决方案

It looks as if the field names are spelled wrong. The following works for me:

<div kendo-grid k-data-source="products" k-selectable="'row'"
k-pageable='{ "pageSize": 2, "refresh": true, "pageSizes": true }'
  k-columns='[
    { "field": "name", "title": "Name"},
    { "field": "department", "title": "Department"},
    { "field": "lastShipment", "title": "Last Shipment" }
  ]'>
</div>

Here is a live demo: http://jsbin.com/odeQAfI/2/edit

To avoid the NaN message in the pager you need to make the products field to be a Kendo DataSource:

function MyController($scope) {
   $scope.products = new kendo.data.DataSource({ 
     data: [
        { id:1, name:'Tennis Balls', department:'Sports', lastShipment:'10/01/2013' },
        { id:2, name:'Basket Balls', department:'Sports', lastShipment:'10/02/2013' },
        { id:3, name:'Oil', department:'Auto', lastShipment:'10/01/2013' },
        { id:4, name:'Filters', department:'Auto', lastShipment:'10/01/2013' },
        { id:5, name:'Dresser', department:'Home Furnishings', lastShipment:'10/01/2013' }
    ],
     pageSize: 2
  });
}

Here is a live demo: http://jsbin.com/ODElUfO/2/edit

这篇关于使用 Kendo UI 和 AngularJS 创建基本数据网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！