Question

我是angularjs和ui-grid的新手。我正在尝试显示一个基本网格，其中包含员工信息，姓名，工资，名称，等级。

这是运行index.html的输出： This is the output of index.html. It is returning all the required data but one below the other (sometimes overlapping) and not in a grid format as expected. ** app.js：**

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
 
app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) {
  $scope.gridOptions1 = {
    enableSorting: true,
    columnDefs: [
      { field: 'eid' },
      { field: 'ename' },
      { field: 'salary' },
      { field: 'designation' },
      { field: 'grade', enableSorting: false }
    ],
    onRegisterApi: function( gridApi ) {
      $scope.grid1Api = gridApi;
    }
  };
  
scope.gridOptions2 = {
    enableSorting: true,
    onRegisterApi: function( gridApi ) {
      $scope.grid2Api = gridApi;
    },
    columnDefs: [
      {
        field: 'eid',
        sort: {
          direction: uiGridConstants.DESC,
          priority: 1
        }
      },
      {
          field: 'ename',
          sort: {
            direction: uiGridConstants.DESC,
            priority: 0
          }
        },
      {
          field: 'salary',
          sort: {
            direction: uiGridConstants.DESC,
            priority: 2
          }
       },
      { field: 'designation', enableSorting: false },
      {
          field: 'grade',
          sort: {
            direction: uiGridConstants.DESC,
            priority: 3
          }
      }
    ]
  };
 
   $http.defaults.headers.common['Accept'] = "application/json";
	$http.defaults.headers.common['Authorization'] = "Basic dG9tY2F0OnRvbWNhdA==";  
 $http.get('http://localhost:8080/EmployeeManagementSystemAngJS-0.0.1-SNAPSHOT/viewEmployeesPath')
    .success(function(response) {
      $scope.gridOptions1.data = response;
      $scope.gridOptions2.data = response;
    });
}]);

**main.css : **

.grid {
  width: 500px;
  height: 200px;
}
**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="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="ui-grid-stable.js"></script>
<link href="ui-grid-stable.css"></link>
<script src="app.js"></script>
</head>
<body>
	<div ng-controller="MainCtrl">
		<br> <br>
		<div id="grid1" ui-grid="gridOptions1" class="grid"></div>
		<br>
		<br>
		<div id="grid2" ui-grid="gridOptions2" class="grid"></div>
	</div>
</body>
</html>

任何人都可以指出我哪里错了吗？

我找不到很多对ui-grid的引用。一些好的内容链接将非常有用。

我提到this和this。两者都会产生相同的输出。我在项目文件夹中添加了ui-grid-stable.css和ui-grid-stable.js。

Answer 1

我遇到了同样的问题当我将css的格式更改为

时

<link rel="stylesheet" href="/resources/js/lib/ui-grid/ui-grid.min.css"/>

然后它已经修好了

Answer 2

尝试使用此网址，它对我有用：）

<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">

angularjs，ui-grid：显示基本网格中无法正常工作的信息

2 个答案: