angular.js學習－ng-grid

時間 2019-11-08

標籤 angular.js angular 學習 grid 欄目 AngularJS 简体版

原文原文鏈接

ng-grid是基於AngularJS和JQuery的富表格控件，由AngularUI Team領銜開發，到目前爲止已有2354次Commit，1076個Fork。

AngualrUI：http://angular-ui.github.io/

ng-grid: http://angular-ui.github.io/ng-grid/

ng-grid(code on Github): https://github.com/angular-ui/ng-grid

入手（官網參照）

1.建立HTML頁面和與之相對應的JS，CSS文件

ng-index.html

js/ng-index.js

css/ng-index.css

2.在ng-index.html中添加ng-grid所依賴的JQuery和AngularJS框架。

下載到本地：

JQuery：http://code.jquery.com/

Angularjs：https://angularjs.org/

在線（進入後選擇適合版本）：

JQuery：http://www.bootcdn.cn/jquery/

Angularjs：http://www.bootcdn.cn/angular.js/

3.引入ng-grid的JS和CSS文件

下載到本地： http://angular-ui.github.io/ng-grid/

在線：http://www.bootcdn.cn/ng-grid/

4.在ng-index.html中添加以下標籤。

・gridStyle: 表格的Style控制，寫入ng-index.css中

・gridOptions: ng-index.js中表格所在的Controller的$scope調用賦值（AngularJS數據綁定）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ng-index</title>  <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>  <link rel="stylesheet" href="http://cdn.bootcss.com/ng-grid/2.0.11/ng-grid.min.css"/> <script src="http://cdn.bootcss.com/ng-grid/2.0.11/ng-grid.min.js"></script>  <script src="js/ng-index.js"></script> <link rel="stylesheet" href="css/ng-index.css"/> </head> <body ng-app="indexApp"> <div id="container" ng-controller="gridCtrl"> <div class="gridStyle" ng-grid="gridOptions" /> </div> </body> </html>

ViewCode(ng-index.html)

5.編寫ng-index.css文件

.gridStyle { height:300px; }

ViewCode(ng-index.css)

・HTML頁面中表格爲div標籤，數據在AngularJS中數據綁定到頁面中，因此須要指定div標籤的高度。

6.編寫ng-index.js文件

ViewCode(ng-index.js)

・官網給的例子在用 ['ui.grid']是錯誤的，要改爲['ngGrid']，否則Angular初始化不成功。

・將要顯示的JSON數據賦值給頁面控件的data屬性，便可綁定到界面顯示。

・表頭名稱默認顯示JSON數據中當字段的字段名稱。

7.設置表頭顯示名稱（name→姓名　age→年齡）。

在表格的配置屬性中添加columnDefs的配置，詳細參照如下代碼。