使用 Kendo UI 和 AngularJS 创建基本数据网格
Posted
技术标签:
【中文标题】使用 Kendo UI 和 AngularJS 创建基本数据网格【英文标题】：Creating a basic data grid with Kendo UI and AngularJS 【发布时间】：2013-10-26 04:12:33 【问题描述】：我正在尝试使用 AngularJS。我想展示一个基本的剑道网格。我正在尝试使用纯指令来做到这一点。考虑到这一点，我查看了 Kendo UI / Angular JS 项目 (https://github.com/kendo-labs/angular-kendo)。不幸的是，我的
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'
];
我已确认我已正确连接控制器。活动计数正确显示。但是，网格不会出现。我不知道我做错了什么。
感谢您的帮助。
【问题讨论】：
【参考方案1】：您还可以使用 Factory 方法将 Kendo 数据源设置为 AngularJS 服务，并将其注入您的控制器以符合 AngularJS 最佳实践和模式。
完整源代码和现场演示：http://goo.gl/6Z9jop
Customer.cshtml
@
ViewBag.Title = "Index";
<div>
<h2 ng-cloak>title</h2>
<div>
<div class="demo-section">
<div class="k-content" style="width: 100%">
<div kendo-grid="grid"
k-sortable="true"
k-pageable="true"
k-filterable="true"
k-editable="'inline'"
k-selectable="true"
k-columns='[
field: "CustomerID", title: "ID", width: "75px" ,
field: "CompanyName", title: "Company",
field: "ContactName", title: "Contact" ,
field: "ContactTitle", title: "Title" ,
field: "Address" ,
field: "City" ,
field: "PostalCode" ,
field: "Country" ,
field: "Phone" ,
field: "Fax" ]'
>
</div>
<style scoped>
.toolbar padding: 15px; float: right;
</style>
</div>
</div>
<script type="text/x-kendo-template" id="toolbar">
<div>
<div class="toolbar">
<button kendo-button ng-click="edit(this)"><span class="k-icon k-i-tick"></span>Edit</button>
<button kendo-button ng-click="destroy(this)"><span class="k-icon k-i-tick"></span>Delete</button>
<button kendo-button ng-click="details(this)"><span class="k-icon k-i-tick"></span>Edit Details</button>
</div>
<div class="toolbar" style="display:none">
<button kendo-button ng-click="save(this)"><span class="k-icon k-i-tick"></span>Save</button>
<button kendo-button ng-click="cancel(this)"><span class="k-icon k-i-tick"></span>Cancel</button>
</div>
</div>
</script>
</div>
</div>
customerController.js
'use strict';
northwindApp.controller('customerController',
function ($scope, $rootScope, $location, customerDataSource)
customerDataSource.filter(); // reset filter on dataSource everytime view is loaded
var onClick = function (event, delegate)
var grid = event.grid;
var selectedRow = grid.select();
var dataItem = grid.dataItem(selectedRow);
if (selectedRow.length > 0)
delegate(grid, selectedRow, dataItem);
else
alert("Please select a row.");
;
$scope.toolbarTemplate = kendo.template($("#toolbar").html());
$scope.save = function (e)
onClick(e, function (grid)
grid.saveRow();
$(".toolbar").toggle();
);
;
$scope.cancel = function (e)
onClick(e, function (grid)
grid.cancelRow();
$(".toolbar").toggle();
);
,
$scope.details = function (e)
onClick(e, function (grid, row, dataItem)
$location.url('/customer/edit/' + dataItem.CustomerID);
);
,
$scope.edit = function (e)
onClick(e, function (grid, row)
grid.editRow(row);
$(".toolbar").toggle();
);
,
$scope.destroy = function (e)
onClick(e, function (grid, row, dataItem)
grid.dataSource.remove(dataItem);
grid.dataSource.sync();
);
,
$scope.onChange = function (e)
var grid = e.sender;
$rootScope.lastSelectedDataItem = grid.dataItem(grid.select());
,
$scope.dataSource = customerDataSource;
$scope.onDataBound = function (e)
// check if there was a row that was selected
if ($rootScope.lastSelectedDataItem == null)
return;
var view = this.dataSource.view(); // get all the rows
for (var i = 0; i < view.length; i++)
// iterate through rows
if (view[i].CustomerID == $rootScope.lastSelectedDataItem.CustomerID)
// find row with the lastSelectedProductd
var grid = e.sender; // get the grid
grid.select(grid.table.find("tr[data-uid='" + view[i].uid + "']")); // set the selected row
break;
;
);
customerDataSource.js
'use strict';
northwindApp.factory('customerDataSource',
function (customerModel)
var crudServiceBaseUrl = "/odata/Customer";
return new kendo.data.DataSource(
type: "odata",
transport:
read:
async: false,
url: crudServiceBaseUrl,
dataType: "json"
,
update:
url: function (data)
return crudServiceBaseUrl + "(" + data.CustomerID + ")";
,
type: "put",
dataType: "json"
,
destroy:
url: function (data)
return crudServiceBaseUrl + "(" + data.CustomerID + ")";
,
dataType: "json"
,
batch: false,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
schema:
data: function (data) return data.value; ,
total: function (data) return data["odata.count"]; ,
model: customerModel
,
error: function (e)
alert(e.xhr.responseText);
);
);
【讨论】：
【参考方案2】：看起来好像字段名称拼写错误。以下对我有用：
<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>
这是一个现场演示：http://jsbin.com/odeQAfI/2/edit
为避免寻呼机中出现 NaN 消息，您需要将 products 字段设置为 Kendo 数据源：
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
);
这是一个现场演示：http://jsbin.com/ODElUfO/2/edit
【讨论】：
如何使用 AngularJS $http 请求更新数据？我更喜欢使用 AngularJS 远程调用，因为它们提供了测试/模拟支持。 @MikeHopper：见documentation以上是关于使用 Kendo UI 和 AngularJS 创建基本数据网格的主要内容，如果未能解决你的问题，请参考以下文章
kendo ui AngularJS Grid CRUD操作