八、UI-Grid 单页上的多个表格

来源：互联网发布：node.js php哪个简单编辑：程序博客网时间：2024/06/15 19:56

原文：109 Multiple Grids per Page
在单页上使用多个网格

代码：
index.html

<!doctype html><html ng-app="app">  <head>    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>    <script src="/release/ui-grid.js"></script>    <script src="/release/ui-grid.css"></script>    <script src="app.js"></script>  </head>  <body>    <div ng-controller="MainCtrl">      <div class="row">        <div class="span4">          <div id="grid1" ui-grid="gridOptions1" class="grid"></div>        </div>        <div class="span4">          <div id="grid2" ui-grid="gridOptions2" class="grid"></div>        </div>      </div>    </div>  </body></html>

main.css

.grid {  width: 500px;  height: 150px;}

app.js

var app = angular.module('app', ['ngTouch', 'ui.grid']);app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {  $scope.gridOptions1 = {};  $scope.gridOptions2 = {};  $http.get('/data/100.json')  .success(function(data) {    $scope.gridOptions1.data = data;  });  $http.get('/data/500.json')  .success(function(data) {    $scope.gridOptions2.data = data;  });}]);

Demo
这里写图片描述

水平有限，错误之处敬请指正。

0 0