[转]ng-grid

最新推荐文章于 2018-11-29 20:26:10 发布

weixin_34092370

最新推荐文章于 2018-11-29 20:26:10 发布

阅读量85

点赞数

文章标签： javascript ViewUI

本文转自：http://angular-ui.github.io/ui-grid/

Getting Started

Steps for getting started (example on right):

1. Add references to jQuery and AngularJS.
2. Add references to ngGrid's javascript and css files.
3. Where you declare your app module, add ngGrid: angular.module('myApp',['ngGrid']); If you use angular seed, it is in your app.js file.
4. In your html file within the controller where you plan to use ng-grid, add: <div class="gridStyle" ng-grid="gridOptions"></div> gridOptions is the variable we are going to bind to where we will initialize our grid options.
5. We are going to define a basic style for our grid in style.css:
```
.gridStyle {
    border: 1px solid rgb(212,212,212); width: 400px; height: 300px }
```
6. In your javascript file within the controller where you plan to use ng-grid, lets add data that our grid will use:

$scope.myData = [{name: "Moroni", age: 50}, {name: "Tiancum", age: 43}, {name: "Jacob", age: 27}, {name: "Nephi", age: 29}, {name: "Enos", age: 34}];

Now initialize your grid options under the same controller as data: $scope.gridOptions = { data: 'myData' };
Below is the outcome of the grid using the example on the right:

Drag a column header here and drop it to group by that column.

name

age

Choose Columns:

name 0
age 0

Moroni

50

Tiancum

43

Jacob

27

Nephi

29

Enos

34

Total Items: 5(Showing Items: 5)

Selected Items: 0

Page Size: 2505001000

/ 1

HTML:

<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Getting Started With ngGrid Example</title>
<link rel="stylesheet" type="text/css" href="ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="ng-grid-1.3.2.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions">
</div>
</body>
</html>

CSS:

/*style.css*/
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 300px
}

Javascript:

// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
});

View the plunker here.

weixin_34092370

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[转]ng-grid

本文转自：http://angular-ui.github.io/ui-grid/Getting StartedSteps for getting started (example on right):Add references to jQuery and AngularJS.Add references to ngGrid's javascript and css ...
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。