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

Question

Even after lot of research am not able to find one good example which can help me run the angular UI-GRID example locally. 即使经过大量研究，也无法找到一个好的示例，可以帮助我在本地运行有角度的UI-GRID示例。

Here is the HTML file which am using, A simple file called index.html : 这是正在使用的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>

Here is the app.js which you can place in the same path as that of html. 这是app.js，您可以将其放置在与html相同的路径中。

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];
}]);

The ui-grid-unstable.js and ui-grid-unstable.css is downloaded from the link : ui-grid-unstable.js和ui-grid-unstable.css是从链接下载的：

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

Please please do help me as am just spending time to run this. 请为我提供帮助，因为我只是花时间来运行它。

I was able to run the ng-grid for my requirement but since there was no column and row adjustment feature i have to switch to ui-grid now. 我可以根据需要运行ng-grid，但是由于没有列和行调整功能，因此我现在必须切换到ui-grid。

Answer 1

I have also started learning AngularJs recently. 我最近也开始学习AngularJ。 If you want to use AngularJs then you could get some help from this link. 如果您想使用AngularJs，则可以从此链接获得一些帮助。 http://angular-ui.github.io/ng-grid/ . http://angular-ui.github.io/ng-grid/ 。 While doing R&D on AngularJs I found this link. 在AngularJs上进行研发时，我找到了此链接。 Hope this could be helpful. 希望这会有所帮助。 In order to user ng-grid you can either git checkout or download the zip (or use bower) from here https://github.com/angular-ui/ng-grid/tree/2.x 为了使用ng-grid，您可以git checkout或从此处https://github.com/angular-ui/ng-grid/tree/2.x下载zip（或使用bower）。

Updated `Refer this http://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr?p=preview 更新了 `请参考此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" />`

Yes @suraj this is the one. 是的@suraj这是一个。

Hope it will also help others 希望它也会帮助别人

Answer 2

What errors are you getting on the javascript console and/or on the networks tab (if in Chrome) for files not being loaded? 您在JavaScript控制台和/或“网络”标签（如果在Chrome中）上遇到什么错误，导致文件未加载？

My best guess is that you haven't downloaded the ui-grid release files and put them into a release folder as release/ui-grid.js and release/ui-grid.css. 我最好的猜测是，您尚未下载ui-grid发行文件并将其作为release / ui-grid.js和release / ui-grid.css放入发行文件夹中。 But your index.html file is telling your browser this is where it can find these files. 但是您的index.html文件告诉浏览器可以在其中找到这些文件。

Once you work through this, you're also going to have problems with fonts, as you need to also download the font files and install them locally. 完成此操作后，您还将遇到字体问题，因为还需要下载字体文件并在本地安装它们。 The exact location depends on your build scripts and some other things, but in general the css will expect them to be in fonts/xxxxx. 确切的位置取决于您的构建脚本和其他一些内容，但是通常，css期望它们使用fonts / xxxxx。

Answer 3

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

Helps to start the ui-grid. 帮助启动ui-grid。

If am not wrong these are the lines which i was missing : 如果没有记错的话，这些就是我所缺少的内容：

<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" />

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

问题描述

3 个解决方案

解决方案1
1 2015-04-06 09:19:10

解决方案2
0 2015-04-06 22:14:29

解决方案3
0 2015-04-09 01:58:15

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

问题描述

3 个解决方案

解决方案1 1 2015-04-06 09:19:10

解决方案2 0 2015-04-06 22:14:29

解决方案3 0 2015-04-09 01:58:15

解决方案1
1 2015-04-06 09:19:10

解决方案2
0 2015-04-06 22:14:29

解决方案3
0 2015-04-09 01:58:15