作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个剑道网格,它由 Angular Controller 控制:
<div>
<kendo-grid options="mainGridOptions" k-data-source="gridData">
</kendo-grid>
</div>
更新正在加载数据,但未渲染网格。 (我也遇到了术语不匹配的情况,并将部门视为状态。
"use strict";
angular.module("tenderApp")
.controller("tenderCtrl", ["$scope", "adalAuthenticationService", "tenderSvc", "$q", function ($scope, adalService, tenderSvc, $q) {
$scope.mainGridOptions = null;
$scope.gridSource = null;
$scope.statusData = null;
function loadStatusData() {
return tenderSvc.getSector()
.then(function(sector) {
$scope.sectorData = sector.data.map(function (obj) {
return {
text: obj.bezeichnung,
value: obj.id
};
});
return $scope.sectorData;
});
}
function loadGridSource(result) {
return tenderSvc.getItems()
.then(function (res) {
$scope.gridSource = res.data;
return res.data;
});
}
loadStatusData()
.then(loadGridSource)
.then(function (res) {
//both properties are available at this point
console.log($scope.gridSource);
console.log($scope.sectorData);
$scope.gridData = new kendo.data.DataSource({
transport: {
read: function (e) {
e.success($scope.gridSource);
},
//...
},
//...
});
$scope.mainGridOptions = {
toolbar: ["excel"],
dataSource: $scope.gridData,
columns: [
{ field: "sektor", title: "Sektor", values: $scope.sectorData },
{ command: ["edit"], title: "Aktionen", width: "120px" }
]
};
});
}]);
问题是,应该填充网格的最后一个调用无法正常工作。 console.log
调用显示数据已加载,但网格未显示。
最佳答案
很好,现在我向你学习如何进行链接。至于你的问题,我们不需要使用transport/read
。相反,我们可以单独加载数据并将其设置到网格 dataSource
中,如下所示。请注意,请不要将 k-data-source="gridData"
放入网格 html 属性中,因为您已有网格选项。
HTML:
<div><kendo-grid options="mainGridOptions" k-data-source="gridData">
</kendo-grid></div>
JS:
"use strict";
angular.module("tenderApp")
.controller("tenderCtrl", ["$scope", "adalAuthenticationService", "tenderSvc", "$q", function ($scope, adalService, tenderSvc, $q) {
$scope.mainGridOptions = null;
$scope.gridSource = null;
$scope.statusData = null;
$scope.mainGridOptions = {
dataSource: new kendo.data.DataSource(),
toolbar: ["excel"],
columns: [
{ field: "sektor", title: "Sektor", values: $scope.sectorData },
{ command: ["edit"], title: "Aktionen", width: "120px" }
]
};
function loadStatusData() {
return tenderSvc.getSector()
.then(function(sector) {
$scope.sectorData = sector.data.map(function (obj) {
return {
text: obj.bezeichnung,
value: obj.id
};
});
return $scope.sectorData;
});
}
function loadGridSource(result) {
return tenderSvc.getItems()
.then(function (res) {
$scope.gridSource = res.data;
return res.data;
});
}
loadStatusData()
.then(loadGridSource)
.then(function (res) {
$scope.mainGridOptions.dataSource.data($scope.gridSource);
});
}]);
关于javascript - 如何在 Kendo 网格列中显示相关外键数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37727231/
我是一名优秀的程序员,十分优秀!