ng-grid入手

時間 2019-11-19

標籤 grid 入手简体版

原文原文鏈接

簡介javascript

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

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

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

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

入手（官網參照）jquery

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

ng-index.htmlangularjs

js/ng-index.jsgithub

css/ng-index.cssapp

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>

<!-- Basic References: JQuery/AngualrJS -->
<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>

<!-- ng-grid -->
<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>

<!--local: ng-index.html -->
<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文件

var indexApp = angular.module('indexApp', ['ngGrid']);
indexApp.controller('gridCtrl', function($scope) {
    $scope.members = [{name: "Moroni", age: 50},
                      {name: "Tiancum", age: 43},
                      {name: "Jacob", age: 27},
                      {name: "Nephi", age: 29},
                      {name: "Enos", age: 34}];
    $scope.gridOptions = { data: 'members' };
});

ViewCode(ng-index.js)

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

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

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

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

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

var indexApp = angular.module('indexApp', ['ngGrid']);
indexApp.controller('gridCtrl', function($scope) {
    $scope.members = [{name: "Moroni", age: 50},
                      {name: "Tiancum", age: 43},
                      {name: "Jacob", age: 27},
                      {name: "Nephi", age: 29},
                      {name: "Enos", age: 34}];
    $scope.gridOptions = { 
            data: 'members',
            columnDefs: [{field: 'name', displayName: '姓名'}, 
                         {field:'age', displayName:'年齡'}]
    };
});

ViewCode(ng-index.js)

1. 手把手入門lenskit（1）
2. vue-腳手架入手
3. 入手ZTree
4. 入手Blackberry9000
5. 入手cherry mx1.0
6. salt stack 入手
7. 2017.4.22入手coffeescript
8. 手動錄入
9. 先入門後深入之手把手 Docker 實戰入門
10. Mysql手工注入
更多相關文章...
• SQLite 注入 - SQLite教程
• XQuery 參考手冊 - XQuery 教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。