项目中用到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="[email protected]"},
new User(){ ID=2,Name="bb", Age=1,Email="[email protected]" },
new User(){ ID=3,Name="cc", Age=1,Email="[email protected]"},
new User(){ ID=4,Name="dd", Age=1,Email="[email protected]"},
new User(){ ID=5,Name="ee", Age=1,Email="[email protected]"},
new User(){ ID=6,Name="ff", Age=1,Email="[email protected]"},
new User(){ ID=7,Name="gg", Age=1,Email="[email protected]"},
new User(){ ID=8,Name="hh", Age=1,Email="[email protected]"},
new User(){ ID=9,Name="ii", Age=1,Email="[email protected]"},
new User(){ ID=10,Name="jj", Age=1,Email="[email protected]"},
new User(){ ID=11,Name="kk", Age=1,Email="[email protected]"},
new User(){ ID=12,Name="ll", Age=1,Email="[email protected]"},
new User(){ ID=13,Name="mm", Age=1,Email="[email protected]"},
new User(){ ID=14,Name="nn", Age=1,Email="[email protected]"},
new User(){ ID=15,Name="oo", Age=1,Email="[email protected]"},
new User(){ ID=16,Name="pp", Age=1,Email="[email protected]"},
new User(){ ID=17,Name="qq", Age=1,Email="[email protected]"}
};
return users;
}
}
}
效果图截屏
该Demo使用到的js和css,点击下载
时间： 2024-10-12 17:55:05