ng-grid

Posted 飘然离去

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ng-grid相关的知识,希望对你有一定的参考价值。

请查看官网: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的主要内容,如果未能解决你的问题,请参考以下文章

angularJS中的ui-router和ng-grid模块

angular.js学习-ng-grid

ng-grid 展开和折叠行

使用 WebAPI 对 ng-grid 进行服务器端分页+过滤+排序

角度 ng-grid 行高

从服务器更新后刷新 ng-grid 时出现空白数据