Question

我是angularjs的新手，我正在尝试使用数据库中的数据填充ui网格。我试过寻找其他问题，但我没有在网上找到类似我的问题。该表显示很好，但我的数据都没有填充。我在源代码下的Chrome中的开发人员工具中看到过它，它似乎被正确地格式化为Json对象，但是我不能让它在表格中显示任何内容。我知道这可能是我正在做的小事或不做任何帮助将不胜感激。

以下是我的控制器js

var app = angular.module('skill', ["ui.grid",
                                "ui.grid.edit",
                                "ui.grid.selection",
                                "ui.grid.pagination",
                                "ui.grid.exporter",
                                "ui.grid.cellNav"]);
app.controller('SkillEntryController', function ($scope, $http, $interval,   uiGridConstants, SkillService) {
$scope.data = [];
SkillService.GetSkills().then(function (d) {
    $scope.data = d.data;
}, function () {
    alert('Failed');
});
$scope.columns = [
        { name: "SkillName", displayName: "Skill Code", minWidth: 150, width: "33%"  },
        { name: "Category", minWidth: 150, width: "33%"  },
        { name: "Description", minWidth: 150, width: "33%" }
];
$scope.gridOptions = {
    enableSorting: true,
    enableRowSelection: true,
    enableCellEditOnFocus: true,
    exporterHeaderFilterUseName: true,
    treeRowHeaderAlwaysVisible: false,
    paginationPageSizes: [25, 50, 75],
    paginationPageSize: 25,
    columnDefs: $scope.columns,
    data: $scope.data,
    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;
    }
};
}).factory('SkillService', function ($http) {
var fac = {}
fac.GetSkills = function () {
    return $http.get('/Skills/GetSkills');
}
return fac;
});

这是我的工厂方法：

public JsonResult GetSkills()
    {
        List<Skill> c = new List<Skill>();
        return new JsonResult { Data = c.Select(x => new { x.Category, x.Description, x.SkillCodeID, x.SkillName }), JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

这是我的cshtml文件：

@model IEnumerable<SkillResourceCenterApp.Models.Skill>
@using Newtonsoft.Json;
@{
    ViewData["Title"] = "Add Skill";
}
@section scripts{
    <link href="~/Content/ui-grid.css" rel="stylesheet" />
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/ui-grid.js"></script>
    <script src="~/Scripts/Controller/skill-entry-controller.js"></script>

}

<style>
    .ui-grid-cell.cell-center {
        text-align: center;
    }

    .ui-grid-cell.cell-right {
        text-align: right;
    }
    .no-rows {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.4);
    }

    .no-rows .msg {
        opacity: 1;
        position: absolute;
        top: 30%;
        left: 33%;
        width: 30%;
        height: 25%;
        line-height: 200%;
        background-color: #eee;
        border-radius: 4px;
        border: 1px solid #555;
        text-align: center;
        font-size: 24px;
        display: table;
    }

    .no-rows .msg span {
        display: table-cell;
        vertical-align: middle;
    }


</style>

<h3>@ViewData["Title"]</h3>

<p>
    @Html.ActionLink("Create New", "Create")
</p>


<div class="container-fluid" ng-app="skill" ng-controller="SkillEntryController">

    <div class="row">
        <button type="button" ng-click="addNewRow()" class="btn btn-default col-sm-3 col-md-2">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Row
        </button>
        <button type="button" ng-click="deleteSelected()" class="btn btn-default col-sm-3 col-md-2">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Delete Selected
        </button>
        <button type="button" ng-click="exportToCSV()" class="btn btn-default col-sm-3 col-md-2">
            <span class="glyphicon glyphicon-download" aria-hidden="true"></span> Export to Excel
        </button>
        <button type="button" ng-click="save()" class="btn btn-primary col-md-offset-4 pull-right col-sm-2">
            Save
        </button>
    </div>
    <div class="row">
        <div class="grid" ui-grid="gridOptions"
             ui-grid-pagination
             ui-grid-selection
             ui-grid-edit
             ui-grid-exporter
             ui-grid-cellNav
             style="height: 500px;">
            <div class="no-rows" ng-show="!gridOptions.data.length">
                <div class="msg">
                    <span>No Results</span>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您错过了field中的columnDefs定义。看看https://github.com/angular-ui/ui-grid/wiki/Defining-columns

var columnDefs: [{
    field: 'foo',
    displayName: 'my foo',
    visible: true,
    maxWidth: 90,
    enableColumnResizing: false,
    cellTemplate: "<div>{{row.entity.foo}}</div>"
}];

gridOption未从控制器接收我的数据

1 个答案: