AnjularJS ngTable插件使用备忘记录（一个ngTableDemo）

项目中用到AngularJS的表格ng-table，功能相当强大，基本的排序、分页等都有。这里做个备忘，以便以后使用。

该Demo利用vs2012中的webapi(暂时没连数据库)，下面是详细代码

ngTable.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Content/bootstrap/bootstrap.css" rel="stylesheet" />
    <script src="Scripts/anjularJS/angular.min.js"></script>
    <script src="Scripts/jquery-1.9.0.js"></script>
    <script src="Scripts/ng-table/ng-table.js"></script>
    <link href="Scripts/ng-table/ng-table.css" rel="stylesheet" />
    <script src="Scripts/angular-ui/ui-bootstrap-tpls.js"></script>
    <script src="Scripts/angular-ui/ui-bootstrap.js"></script>
    <script src="myTable.js"></script>
</head>
<body >
    <div  ng-app="myTable" ng-controller="table1Ctrl">
        <h3>AnjularJS ngTable插件使用</h3>
        <table ng-table="tableParams" class="table table-condensed table-bordered table-striped" style="text-align:center" >
            <tr ng-repeat="user in $data">
                <td title="'ID'"  sortable="'ID'">{{user.ID}}</td>
                <td title="'Name'"  sortable="'Name'">{{user.Name}}</td>
                <td title="'Age'" sortable="'Age'">{{user.Age}}</td>
                <td title="'Email'"  sortable="'Email'">{{user.Email}}</td>
            </tr>
        </table>
    </div>
</body>
</html>

myTable.js

var app = angular.module('myTable', ['ngTable', 'ui.bootstrap']);

app.factory('UsersFactory', function ($http, $rootScope) {
    return {
        getUsers: function () {
            var users = $http.get("http://localhost:7366/api/User/GetUser");
            return users;//正常
        }
    };
});

app.controller("table1Ctrl", function ($scope, NgTableParams, UsersFactory) {
    $scope.GetUsers = function () {
        UsersFactory.getUsers().success(function (data) {
            //alert(data);
            $scope.tableParams = new NgTableParams({ count: 10 }, { counts: [], dataset: data });
        }).error(function (data) {
            $scope.error = "An Error has occured while Loading LeagueTable! " + data.ExceptionMessage;
        });
    }

    $scope.GetUsers();
});

Models中的User.cs

    public class User
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public string Email { get; set; } 
    }

App_Start中的WebApiConfig.cs路由配置

public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }

Controllers中的UserController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using XZDemo.Models;

namespace XZDemo.Controllers
{
    public class UserController : ApiController
    {
        //
        // GET: /User/

        [HttpGet]
        [ActionName("GetUser")]
        public List<User> GetUser()
        {
            List<User> users = new List<User> {
                new User(){ ID=1,Name="aa", Age=1,Email="11@qq.com"},
                new User(){ ID=2,Name="bb", Age=1,Email="11@qq.com" },
                new User(){ ID=3,Name="cc", Age=1,Email="11@qq.com"},
                new User(){ ID=4,Name="dd", Age=1,Email="11@qq.com"},
                new User(){ ID=5,Name="ee", Age=1,Email="11@qq.com"},
                new User(){ ID=6,Name="ff", Age=1,Email="11@qq.com"},
                new User(){ ID=7,Name="gg", Age=1,Email="11@qq.com"},
                new User(){ ID=8,Name="hh", Age=1,Email="11@qq.com"},
                new User(){ ID=9,Name="ii", Age=1,Email="11@qq.com"},
                new User(){ ID=10,Name="jj", Age=1,Email="11@qq.com"},
                new User(){ ID=11,Name="kk", Age=1,Email="11@qq.com"},
                new User(){ ID=12,Name="ll", Age=1,Email="11@qq.com"},
                new User(){ ID=13,Name="mm", Age=1,Email="11@qq.com"},
                new User(){ ID=14,Name="nn", Age=1,Email="11@qq.com"},
                new User(){ ID=15,Name="oo", Age=1,Email="11@qq.com"},
                new User(){ ID=16,Name="pp", Age=1,Email="11@qq.com"},
                new User(){ ID=17,Name="qq", Age=1,Email="11@qq.com"}
            };
            return users;
        }
    }
}

效果图截屏

该Demo使用到的js和css,点击下载

AnjularJS-ngTable-js&css.zip

posted on 2016-08-05 14:18 CarrieJ 阅读(613) 评论(0) 编辑收藏举报