本文转自：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}];
  1. Now initialize your grid options under the same controller as data: $scope.gridOptions = { data: 'myData' };
  2. 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:            
250
500
1000
                    
 
 

/ 1

 
 

HTML:

  1. <html ng-app="myApp">
  2. <head lang="en">
  3. <meta charset="utf-8">
  4. <title>Getting Started With ngGrid Example</title>
  5. <link rel="stylesheet" type="text/css" href="ng-grid.css" />
  6. <link rel="stylesheet" type="text/css" href="style.css" />
  7. <script type="text/javascript" src="jquery-1.8.2.js"></script>
  8. <script type="text/javascript" src="angular.js"></script>
  9. <script type="text/javascript" src="ng-grid-1.3.2.js"></script>
  10. <script type="text/javascript" src="main.js"></script>
  11. </head>
  12. <body ng-controller="MyCtrl">
  13. <div class="gridStyle" ng-grid="gridOptions">
  14. </div>
  15. </body>
  16. </html>

CSS:

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

Javascript:

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

View the plunker here.

[转]ng-grid的更多相关文章

  1. ExtJS自制表格Grid分页条

    试过Grid自带的load和分页功能,没有成功,干脆就自己写了...... 主要是查询条件比较复杂...... 希望哪位大神能有更好的意见. Ext.define('MyApp.ux.Paginati ...

  2. Andrew Ng机器学习入门——线性回归

    本人从2017年起,开始涉猎机器学习.作为入门,首先学习的是斯坦福大学Andrew Ng(吴恩达)教授的Coursera课程 2 单变量线性回归 线性回归属于监督学习(Supervise Learni ...

  3. 【原】Coursera—Andrew Ng机器学习—编程作业 Programming Exercise 4—反向传播神经网络

    课程笔记 Coursera—Andrew Ng机器学习—课程笔记 Lecture 9_Neural Networks learning 作业说明 Exercise 4,Week 5,实现反向传播 ba ...

  4. [C2P2] Andrew Ng - Machine Learning

    ##Linear Regression with One Variable Linear regression predicts a real-valued output based on an in ...

  5. ExtJS 4.2 Grid组件的单元格合并

    ExtJS 4.2 Grid组件本身并没有提供单元格合并功能,需要自己实现这个功能. 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid ...

  6. WPF中Grid实现网格，表格样式通用类

    /// <summary> /// 给Grid添加边框线 /// </summary> /// <param name="grid"></ ...

  7. 在 Windows Phone 中，为 Grid 添加 Tilt 效果

    在 Windows Phone 中,Tilt 效果是比较经典的效果,我们可以很简单的为按钮等控件添加这样的效果(使用 Windows Phone Toolkit 的Tilt 效果),但是,如果我们想要 ...

  8. wpf 列表、菜单 收起与展开，通过Grid DoubleAnimation或者Expander实现

    菜单收缩有很多种方法具体如何实现还是看个人想法: 第一种通过后台控制收起与展开: 效果图: 代码 : <Grid> <Grid.ColumnDefinitions> <C ...

  9. Sencha ExtJS 6 Widget Grid 入门

    最近由于业务需要,研究了一下Sencha ExtJS 6 ,虽然UI和性能上据相关资料说都有提升,但是用起来确实不太顺手,而且用Sencha cmd工具进行测试和发布,很多内部细节都是隐藏的,出了问题 ...

  10. WPF CheckBox样式 ScrollViewer样式 WrapPanel、StackPanel、Grid布局

    本节讲述布局,顺带加点样式给大家看看~单纯学布局,肯定是枯燥的~哈哈 那如上界面,该如何设计呢? 1.一些布局元素经常用到.Grid StackPanel Canvas WrapPanel等.如上这种 ...

随机推荐

  1. Hover States - 有趣的用户界面及交互设计

    Hover States 一组新潮的和有趣的用户界面和交互设计的集合.Hover States 的目标是要成为设计师和开发人员灵感来源,向人们展示目前人们正在做的各种网站中令人惊奇的效果.他们认为交互 ...

  2. 20款响应式的 HTML5 网页模板【免费下载】

    下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...

  3. HTML5基础之textarea 和lable

    HTML基础:表单<form/>中文本域textarea 和lable <textarea rows="行数" cols="列数">文本 ...

  4. 总结的一些微信API接口

    本文给大家介绍的是个人总结的一些微信API接口,包括微信支付.微信红包.微信卡券.微信小店等,十分的全面,有需要的小伙伴可以参考下. 1. [代码]index.php <?php include ...

  5. 【追寻javascript高手之路02】变量、作用域知多少？

    前言 本来想把这个与上篇博客写到一起的,但是考虑到是两个知识点还是分开算了,于是我们继续今天的学习吧. 基本类型与引用类型 ECMAScript的的变量有两种类型: 基本类型(值类型):简单数据段 引 ...

  6. 关于window.onload

    window.onload是当文档加载完成后执行. <script>之间的代码会在代码加载到此处执行.function内的代码是调用时才执行. 但window.onload有个坏处,它非要 ...

  7. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  8. Autodesk 招人了，开发顾问，感兴趣的或者有推荐的人扔简历过来啊

    Autodesk ADN招人了,在上海,开发顾问, JD如下. 如果你感兴趣或者有人推荐,扔简历过来啊, daniel.du@autodesk.com,赶早不赶晚啊.   Job Title: Dev ...

  9. 5个强大的Java分布式缓存框架推荐

    在开发中大型Java软件项目时,很多Java架构师都会遇到数据库读写瓶颈,如果你在系统架构时并没有将缓存策略考虑进去,或者并没有选择更优的 缓存策略,那么到时候重构起来将会是一个噩梦.本文主要是分享了 ...

  10. Android启动模式launchMode

    在Android里,有4种Activity的启动模式并分别介绍下: standard singleTop singleTask singleInstance AndroidManifest.xml配置 ...