Angualrjs和bootstrap相结合实现数据表格table

下面是“Angularjs和Bootstrap相结合实现数据表格table”的完整攻略：

1. 引入Bootstrap和Angularjs

首先，在项目中引入Bootstrap和Angularjs的必要文件：

<!-- bootstrap css 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- bootstrap js 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- angularjs 文件 -->
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>

2. 定义Angularjs控制器

接下来，我们需要在Angularjs中定义一个控制器来控制我们的表格数据。我们可以使用$http服务通过GET请求从后端获取数据，然后保存到$scope中，以便我们在表格中进行渲染。如下所示：

// 在 Angularjs 中定义我们的控制器
angular.module('app', []).controller('tableCtrl', function($scope, $http) {
  // 通过 GET 请求获取表格数据
  $http.get('https://jsonplaceholder.typicode.com/posts')
    .then(function(response) {
      // 将获取到的数据保存到 $scope 中
      $scope.tableData = response.data;
    });
});

3. 渲染表格

现在，我们已经成功获取了表格数据并将其保存到$scope中。接下来，我们需要在HTML页面中使用Angularjs来渲染表格。我们可以使用ng-repeat指令来循环遍历并渲染表格中的每一行数据。如下所示：

<!-- 使用 Angularjs 渲染表格 -->
<table class="table table-striped" ng-app="app" ng-controller="tableCtrl">
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Body</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in tableData">
      <td>{{row.id}}</td>
      <td>{{row.title}}</td>
      <td>{{row.body}}</td>
    </tr>
  </tbody>
</table>

示例1

我们可以自行构造一个模拟的 https 服务器，使用nodejs 实现以下 restful api，用来测试我们的表格：

const express = require('express')
const uuidv4 = require('uuid/v4')
const app = express()

const port = 8000

const posts = []

for (let i = 0; i < 10; i++) {
  const post = {
    id: uuidv4(),
    title: `post-${i}`,
    body: `This is the post-${i}`
  }
  posts.push(post)
}

app.get('/posts', (req, res) => {
  res.json(posts)
})

app.listen(port, () => {
  console.log(`Server listening on port ${port}...`)
})

启动该服务器，访问http://localhost:8000/posts可以获得以下结果：

[
   {
      "id":"3b636206-ac8f-4502-b88e-7a73dc86a611",
      "title":"post-0","body":"This is the post-0"
   },
   {
      "id":"81f70ca4-f012-47cc-a7b1-197f545bafe6",
      "title":"post-1","body":"This is the post-1"
   },
   ...
]

修改前面的代码的请求url，访问该url，我们可以现在自己的网页中测试数据是否能够正确渲染。

示例2

我们可以进一步对表格进行设置，例如添加筛选和排序功能。这可以通过第三方Angularjs插件ui-grid来轻松实现。我们可以使用Bower或NPM来安装ui-grid插件并引入相关的文件，然后在HTML页面中使用ui-grid指令来渲染表格。如下所示：

<!-- 引入 ui-grid 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/ui-grid/4.7.1/ui-grid.min.css" />
<script src="https://cdn.jsdelivr.net/ui-grid/4.7.1/ui-grid.min.js"></script>

<!-- 使用 ui-grid 渲染表格 -->
<div ng-app="app" ng-controller="tableCtrl">
  <div ui-grid="$ctrl.gridOptions" class="grid" ui-grid-selection></div>
</div>

<script>
  angular.module('app', ['ui.grid'])
    .controller('tableCtrl', function ($http) {
      const vm = this
      vm.gridOptions = {
        columnDefs: [
          { field: 'id' },
          { field: 'title' },
          { field: 'body' }
        ]
      }

      $http.get('https://jsonplaceholder.typicode.com/posts').then(function(resp) {
        vm.gridOptions.data = resp.data;
      });
    });
</script>

在上述示例中，我们使用了ui-grid插件来添加一个可排序、可筛选、可选中的表格。ui-grid提供了极其丰富的功能，可以满足各种需求。