请查看官网：http://angular-ui.github.io/ui-grid/

简单的使用: 总的来说我们

1.需要引入ng-grid-1.3.2.js

2.在html页面需要加入  class="gridStyle" ng-grid="gridOptions"

//  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>
.gridStyle {

    border: 1px solid rgb(212,212,212);

    width: 400px;

    height: 300px;

}
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',

        columnDefs: [{field:'name', displayName:'Name'}, {field:'age', displayName:'Age'}]

    };

});

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. localstorage - HTML 5 Web 存储总结---【巷子】

    001.localStorage概念 在html5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储,解决了cookie存储空间不足的问题(cookie中每条cookie存储 ...

  2. Oracle在linux下命令行无法使用退格键退格,无法使用上下键切换历史命令的解决办法

    使用xshell等客户端登录oracl时在命令行无法使用退格键也无法使用上下键切换历史命令可以使用rlwrap解决 1,linux环境 2,下载rlwrap wget http://files.cnb ...

  3. inotify+rsync安装配置

    环境 系统 IP地址 主服务器 CentOS7.4 192.168.1.1 备份服务器 CentOS7.4 192.168.1.2 一.备份服务器 安装rsync(备) wget https://rs ...

  4. Linux环境下proc的配置c/c++操作数据库简单示例

    在虚拟机上装了oracle11g数据库,原本想利用c/c++学习操作数据库.结果感觉摊上了一个大坑.从安装好oracle数据库到配置好proc的编译选项整整花了二天.但让我意识到自己自己几点薄弱:1. ...

  5. Django查询orm的前一天,前一周,一个月的数据

    利用datatime模块的datetime.timedelta()方法 计算时间差,以下是用法 唯一要注意的是数据库存储models.datefield字段是日期格式,所以比较的数据也是日期格式 #当 ...

  6. mysql备份的4种方式

    mysql备份的4种方式 转载自:https://www.cnblogs.com/SQL888/p/5751631.html 总结: 备份方法 备份速度 恢复速度 便捷性 功能 一般用于 cp 快 快 ...

  7. 003-spring cache-JCache (JSR-107) annotations

    参看地址:https://docs.spring.io/spring/docs/current/spring-framework-reference/integration.html#cache-js ...

  8. git-【八】多人协作

    当你从远程库克隆时候,实际上Git自动把本地的master分支和远程的master分支对应起来了,并且远程库的默认名称是origin. 要查看远程库的信息 使用 git remote 要查看远程库的详 ...

  9. python学习笔记（二十九）为什么python的多线程不能利用多核CPU

    问题:为什么python的多线程不能利用多核CPU,但是咱们在写代码的时候,多线程的确是在并发,而且还比单线程快原因:因为GIL,python只有一个GIL,运行python时,就要拿到这个锁才能执行 ...

  10. python中的排序

    今天在http://www.pythontip.com刷题的时候遇到一个排序的问题:一个列表中既有字符串,又有数字,该怎么排序. list = [1,2,5,4,'d','s','e',45] lis ...