Angular UI-GRID未在页面上显示网格

Angular UI-GRID not displaying the grid on the page

本文关键字：显示 网格 UI-GRID Angular      更新时间：2023-09-26

即使经过大量研究，我也找不到一个可以帮助我在本地运行angular UI-GRID示例的好例子。

这是我使用的HTML文件，一个名为index.HTML:的简单文件

<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script src="release/ui-bootstrap-tpls-0.12.1.min"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="release/ui-grid-unstable.css"/>
    <link rel="stylesheet" href="main.css"/>
    <script src="release/ui-grid-unstable.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <div ng-controller="MainCtrl">
      <div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
    </div>
  </body>
</html>

这是可以放置在与html相同路径中的app.js。

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', function ($scope) {


$scope.myData = [
    {
        "firstName": "Cox",
        "lastName": "Carney",
        "company": "Enormo",
        "employed": true
    },
    {
        "firstName": "Lorraine",
        "lastName": "Wise",
        "company": "Comveyer",
        "employed": false
    },
    {
        "firstName": "Nancy",
        "lastName": "Waters",
        "company": "Fuelton",
        "employed": false
    }]
    ,columnDefs: [field: 'firstName', displayName: 'First Name', width: '30%', maxWidth: 200, minWidth: 70],
                [field: 'lastName', displayName: 'Last Name', width: '30%', maxWidth: 200, minWidth: 70];
}]);

ui-grid-unstable.js和ui-grid-unstable.css可从以下链接下载：

http://ui-grid.info/release/ui-grid-unstable.js和http://ui-grid.info/release/ui-grid-unstable.css

请一定帮我，因为我只是花时间运行这个。

我可以根据我的需求运行ng网格，但由于没有列和行调整功能，我现在必须切换到ui网格。

我最近也开始学习AngularJs。如果你想使用AngularJs，那么你可以从这个链接获得一些帮助。http://angular-ui.github.io/ng-grid/。在做R&D在AngularJs上我发现了这个链接。希望这能有所帮助。为了使用ng-grid，你可以从这里gitcheckout或下载zip（或使用bower）https://github.com/angular-ui/ng-grid/tree/2.x

已更新`请参阅http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

    <link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet"        href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />`

是的@suraj就是这个。

希望它也能帮助其他

对于未加载的文件，您在javascript控制台和/或网络选项卡（如果在Chrome中）上会遇到哪些错误？

我的最佳猜测是，你还没有下载ui网格发布文件，并将它们作为release/ui-rid.js和release/ui-rid.css放入发布文件夹。但你的index.html文件告诉你的浏览器，这是它可以找到这些文件的地方。

一旦你解决了这个问题，你也会遇到字体问题，因为你还需要下载字体文件并在本地安装它们。确切的位置取决于您的构建脚本和其他一些东西，但通常css会希望它们是字体/xxxxxx。

Reena提供的链接：http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview

帮助启动ui网格。

如果我没有错的话，这些是我遗漏的行：

<link data-require="bootstrap-css" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
相关文章：