ngTable动态更新的三种方式

ngTable动态更新的三种方式

前言
表格是HTML中常见的表现形式，当我们用AngularJS做前端开发时，我可以选择用ngTable的开源组件。ngTable已经为了我们封装了常用的表格操作，节省我们大量的开发时间。

本文将介绍如何动态更新表格，分为3种方式：1. 前端更新, 2. Ajax更新, 3. websocket更新。

ngTable介绍
ngTable是一个基于AngularJS的directive设计一个表格项目，支持基本的表格操作，分页，排序，异步加载等功能。

项目地址：https://github.com/esvit/ng-table

前端更新
前端更新，是指在AngularJS中，通过JS计算，更新表格中的数据。
1、建立文件夹FrontUpdate

2、在文件夹FrontUpdate中分别建立文件package.json、bower.json

package.json

{
  "version": "0.0.0",
  "private": true,
  "name": "frontUpdate-ngTable",
  "description": "AngularJS前端更新ngTable",
  "repository": "",
  "license": "MIT",
  "devDependencies": {
    "bower": "^1.3.1",
    "http-server": "^0.6.1",
    "karma": "^0.12.16",
    "karma-chrome-launcher": "^0.1.4",
    "karma-firefox-launcher": "^0.1.3",
    "karma-jasmine": "~0.1.0",
    "protractor": "^2.1.0",
    "shelljs": "^0.2.6",
    "tmp": "0.0.23"
  },
  "scripts": {
    "postinstall": "bower install",
    "prestart": "npm install",
    "start": "http-server -a 0.0.0.0 -p 8000",
    "pretest": "npm install",
    "test": "node node_modules/karma/bin/karma start test/karma.conf.js",
    "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update",
    "preprotractor": "npm run update-webdriver",
    "protractor": "protractor test/protractor-conf.js",
    "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\""
  }
}

bower.json

{
  "name": "frontUpdate-ngTable",
  "description": "AngularJS前端更新ngTable",
  "version": "0.0.0",
  "homepage": "",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "1.4.3",
    "angular-mocks": "1.4.3",
    "jquery": "~2.1.1",
    "bootstrap": "~3.X.X",
    "angular-route": "1.4.3",
    "angular-resource": "1.4.3",
    "angular-animate": "1.4.3",
    "ng-table":"0.8.3"
  }
}
3、在文件夹FrontUpdate中建立app文件夹

4、在app下建立文件ngTable.html

<!doctype html>
<head>
<meta charset="utf-8">
<title>ngTable</title>
<link rel="stylesheet" href="styles/bootstrap.css">
</head>
<body ng-app="myTable">
    <div class="span8" ng-controller="table1Ctrl">
        <h3>js更新</h3>
        <table ng-table class="table">
            <tr ng-repeat="user in users">
                <td title="Name">{{user.name}}</td>
                <td title="Value">{{user.age}}</td>
            </tr>
        </table>
    </div>

<script src="../bower_components/jquery/jquery.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/ng-table/ng-table.src.js"></script>
<script src="js/mytable.js"></script>
</body>
</html>
5、在app下建立文件夹js，并建立文件mytable.js
'use strict';

var myTableApp = angular.module('myTable', ['ngTable']);
myTableApp.controller('myCtrl',['$scope',function($scope){
    $scope.users = [
        {name: "Moroni", age: 0},
        {name: "Enos", age: 0}
    ];

    setInterval(function(){
        $scope.users = [
            {name: "Moroni", age: Math.random()*100},
            {name: "Enos", age: Math.random()*100}
        ];
        $scope.$apply();
        console.log($scope.users[0]);
    },2000);
}]);
6、安装依赖包： npm install
7、启动http-server： npm start ,在浏览器中输入http://localhost:8000/app/ngTable.html


Ajax更新
Ajax更新，是指通过Ajax取数据，更新表格中的内容。
在刚才2个文件上面增加内容：

ngTable.html: AngularJS启动的APP
mytable.js: 实现脚本
ngTable.json：JSON数据文件
编辑文件：app/ngTable.html
新加新表格: ng-controller=”table2Ctrl”
<!doctype html>
<head>
<meta charset="utf-8">
<title>ngTable</title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myTable">
    <div class="span8" ng-controller="table1Ctrl">
        <h3>js更新</h3>
        <table ng-table class="table">
            <tr ng-repeat="user in users">
                <td title="Name">{{user.name}}</td>
                <td title="Value">{{user.age}}</td>
            </tr>
        </table>
    </div>
    <hr>
    <div class="span8" ng-controller="table2Ctrl">
        <h3>Ajax更新</h3>
        <table ng-table class="table">
            <tr ng-repeat="user in users">
                <td title="Name">{{user.name}}</td>
                <td title="Value">{{user.age}}</td>
            </tr>
        </table>
    </div>

<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/ng-table/dist/ng-table.min.js"></script>
<script src="js/mytable.js"></script>
</body>
</html>

编辑文件：js/mytable.js
增加新controller: table2Ctrl
'use strict';

var myTableApp = angular.module('myTable', ['ngTable']);
myTableApp.controller('table1Ctrl',['$scope',function($scope){
    $scope.users = [
        {name: "Moroni", age: 0},
        {name: "Enos", age: 0}
    ];

    setInterval(function(){
        $scope.users = [
            {name: "Moroni", age: Math.random()*100},
            {name: "Enos", age: Math.random()*100}
        ];
       // $scope.$apply();
       // console.log($scope.users[0]);
    },2000);
}]);
myTableApp.controller('table2Ctrl',['$scope','$http','$timeout',function($scope,$http,$timeout){
    $scope.users = [
        {name: "Moroni", age: 0},
        {name: "Enos", age: 0}
    ];
    $timeout(function(){
        $http.get("/app/json/ngTable.json").success(function(data, status, headers, config){
            $scope.users = data;
        });
        console.log("AJAX loading delay 3s.");
    }, 3000);
}]);
增加文件：app/json/ngTable.json
[
    {"name": "Moroni", "age": 10},
    {"name": "Enos", "age": 15}
]
打开浏览器，看到效果

通过Ajax，等待3秒后，实现对ngTable的更新。
WebScoket更新
1、新建文件夹：WebScoketUpdate

2:、拷贝前面的 package.json、bower.json过来

3、修改package.json，引入express、ejs、socket.io

{
  "version": "0.0.0",
  "private": true,
  "name": "frontUpdate-ngTable",
  "description": "AngularJS前端更新ngTable",
  "repository": "",
  "license": "MIT",
  "devDependencies": {
    "express":"~4.1.1",
    "ejs":">=0.8.4",
    "socket.io": ">=0.9.16",
    "bower": "^1.3.1",
    "grunt": "^0.4.5",
    "grunt-babel": "^6.0.0",
    "http-server": "^0.6.1",
    "karma": "^0.12.16",
    "karma-chrome-launcher": "^0.1.4",
    "karma-firefox-launcher": "^0.1.3",
    "karma-jasmine": "~0.1.0",
    "load-grunt-tasks": "^3.4.0",
    "protractor": "^2.1.0",
    "shelljs": "^0.2.6",
    "tmp": "0.0.23"
  },
  "scripts": {
    "postinstall": "bower install",
    "prestart": "npm install",
    "start": "http-server -a 0.0.0.0 -p 8000",
    "pretest": "npm install",
    "test": "node node_modules/karma/bin/karma start test/karma.conf.js",
    "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update",
    "preprotractor": "npm run update-webdriver",
    "protractor": "protractor test/protractor-conf.js",
    "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\""
  }
}
4、在文件夹FrontUpdate中建立app文件夹
5、增加文件：ngTableApp.js

var express = require('express')
    , path = require('path')
    , ejs = require('ejs')
    , app = express()
    , server = require('http').createServer(app)
    , io = require('socket.io').listen(server);

io.on('connection', function (socket) {
    console.log(socket.handshake);
    setInterval(function(){
        var users= [
                {"name": "Moroni", "age": Math.round(Math.random() * 100)},
                {"name": "Enos", "age":Math.round(Math.random() * 100)}
        ];
        socket.emit('ngTableSocket', users);
    },2000);
});

app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.engine('.html', ejs.__express);
app.set('view engine', 'html');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'app')));

if (app.get('env') === 'development') {
    app.use(express.errorHandler());
};

if (app.get('env') === 'production') {
    // TODO
};

app.get('/', function(req, res){
    res.sendfile('views/ngTable.html');
});

server.listen(app.get('port'), function () {
    console.log('Express server listening on port ' + app.get('port'));
});
6、增加文件：views/ngTable.html
<!doctype html>
<head>
    <meta charset="utf-8">
    <title>ngTable</title>
    <link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.css">
</head>
<body ng-app="myTable">

    <div class="span8" ng-controller="table3Ctrl">
        <h3>WebSocket更新</h3>
        <table ng-table class="table">
            <tr ng-repeat="user in users">
                <td title="Name">{{user.name}}</td>
                <td title="Value">{{user.age}}</td>
            </tr>
    </table>
</div>

<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../../bower_components/angular/angular.js"></script>
<script src="../../bower_components/ng-table/dist/ng-table.min.js"></script>
<script src="../../node_modules/socket.io/lib/socket.js"></script>
<script src="../js/mytable.js"></script>
</body>
</html>
7、编辑文件：js/mytable.js


var socket = io.connect("localhost");
function table3Ctrl($scope){
    $scope.users = [
        {name: "Moroni", age: 0},
        {name: "Enos", age: 0}
    ];

    socket.on('ngTableSocket', function (data) {
        $scope.users = data;
        $scope.$apply();
        console.log($scope.users[0]);
    });
}

8、安装依赖包： npm install
9、启动Node:

node ngTableApp.js



http://ng-table.com/#/demo/todo
posted @ 2017-05-02 09:38 幸福的目标阅读(1496) 评论(0) 编辑收藏举报
刷新页面返回顶部
幸福的目标

ngTable动态更新的三种方式

公告
