Angular UI-GRID在页面上不显示网格
[英]Angular UI-GRID not displaying the grid on the page
问题描述
即使经过大量研究，也无法找到一个好的示例，可以帮助我在本地运行有角度的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>
这是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];
}]);
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-grid，但是由于没有列和行调整功能，因此我现在必须切换到ui-grid。
3 个解决方案
解决方案1
1 2015-04-06 09:19:10
我最近也开始学习AngularJ。 如果您想使用AngularJs，则可以从此链接获得一些帮助。 http://angular-ui.github.io/ng-grid/ 。 在AngularJs上进行研发时，我找到了此链接。 希望这会有所帮助。 为了使用ng-grid，您可以git checkout或从此处https://github.com/angular-ui/ng-grid/tree/2.x下载zip（或使用bower）。
更新了 `请参考此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这是一个。
希望它也会帮助别人
解决方案2
0 2015-04-06 22:14:29
您在JavaScript控制台和/或“网络”标签（如果在Chrome中）上遇到什么错误，导致文件未加载？
我最好的猜测是，您尚未下载ui-grid发行文件并将其作为release / ui-grid.js和release / ui-grid.css放入发行文件夹中。 但是您的index.html文件告诉浏览器可以在其中找到这些文件。
完成此操作后，您还将遇到字体问题，因为还需要下载字体文件并在本地安装它们。 确切的位置取决于您的构建脚本和其他一些内容，但是通常，css期望它们使用fonts / xxxxx。
解决方案3
0 2015-04-09 01:58:15
Reena提供的链接： http ://plnkr.co/edit/Tr9cNm0lDy62dmF7LNlr? p=preview
帮助启动ui-grid。
如果没有记错的话，这些就是我所缺少的内容：
<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过滤器-过滤页面更新后
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.