Skip to content

Commit 98535c7

Browse files
wenzhixinwenzhixin
committed
Merge pull request wenzhixin#38 from AkramKamal/master
integrate AngularJS
2 parents 777876f + 396f2fe commit 98535c7

File tree

6 files changed

+167
-0
lines changed

6 files changed

+167
-0
lines changed

‎integrate/angularjs.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,45 @@
1+
<!DOCTYPE html>
12

3+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>HighCharts Demo</title>
8+
9+
10+
<!-- Latest compiled and minified CSS -->
11+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
12+
<!-- Latest compiled and minified CSS -->
13+
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
14+
15+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
16+
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
17+
<!-- Latest compiled and minified JavaScript -->
18+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
19+
<!-- Latest compiled and minified JavaScript -->
20+
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>
21+
22+
23+
<!-- Load local files -->
24+
<script src="bsTable.js"></script>
25+
<script src="app.js"></script>
26+
27+
28+
29+
</head>
30+
<body class="container-fluid" ng-controller="MainController">
31+
<br />
32+
<!-- Workspaces nav -->
33+
<ul class="nav nav-tabs">
34+
<li role="presentation" ng-repeat="wk in workspaces" ng-class="{active: currentWorkspace==wk}" ng-click="changeCurrentWorkspace(wk)"><a href="#">{{wk.name}}</a></li>
35+
</ul>
36+
37+
<!-- Workspaces containers -->
38+
<div class="workspaceContainer" ng-repeat="wk in workspaces" ng-show="currentWorkspace==wk">
39+
40+
<table data-options="wk.tableOptions" bs-table-control> </table>
41+
</div>
42+
43+
44+
</body>
45+
</html>

‎integrate/app.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
//http://wenzhixin.net.cn/p/bootstrap-table/docs/getting-started.html
2+
angular.module('app', ['bsTable'])
3+
.controller('MainController', function ($scope, $http) {
4+
$scope.workspaces = [];
5+
$scope.workspaces.push({ name: 'Workspace 1' });
6+
$scope.workspaces.push({ name: 'Workspace 2' });
7+
$scope.workspaces.push({ name: 'Workspace 3' });
8+
9+
//generate random rows
10+
$scope.workspaces.forEach(function (wk,index) {
11+
wk.rows = [];
12+
for (var i = 0; i < 50000; i++) {
13+
wk.rows[i] = { index: i, id: 'row ' + i, name: 'GOOG'+i, workspace: wk.name };
14+
var img;
15+
if (Math.random() < 0.4)
16+
img = 'img/blueFlag16.png';
17+
else if (Math.random() < 0.75)
18+
img = 'img/yellowFlag16.png';
19+
else img = 'img/greenFlag16.png';
20+
wk.rows[i].flagImage = img;
21+
}
22+
23+
wk.tableOptions = {
24+
data: wk.rows,
25+
rowStyle: function (row, index) {
26+
return { classes: 'none' };
27+
},
28+
cache: false,
29+
height: 400,
30+
striped: true,
31+
pagination: true,
32+
pageSize: 10,
33+
pageList: [5, 10, 25, 50, 100, 200],
34+
search: true,
35+
showColumns: true,
36+
showRefresh: false,
37+
minimumCountColumns: 2,
38+
clickToSelect: false,
39+
showToggle: true,
40+
maintainSelected: true,
41+
columns: [{
42+
field: 'state',
43+
checkbox: true
44+
}, {
45+
field: 'index',
46+
title: '#',
47+
align: 'right',
48+
valign: 'bottom',
49+
sortable: true
50+
}, {
51+
field: 'id',
52+
title: 'Item ID',
53+
align: 'center',
54+
valign: 'bottom',
55+
sortable: true
56+
}, {
57+
field: 'name',
58+
title: 'Item Name',
59+
align: 'center',
60+
valign: 'middle',
61+
sortable: true
62+
}, {
63+
field: 'workspace',
64+
title: 'Workspace',
65+
align: 'left',
66+
valign: 'top',
67+
sortable: true
68+
}, {
69+
field: 'flag',
70+
title: 'Flag',
71+
align: 'center',
72+
valign: 'middle',
73+
clickToSelect: false,
74+
formatter: flagFormatter,
75+
// events: flagEvents
76+
}]
77+
};
78+
function flagFormatter(value, row, index) {
79+
return '<img src="' + row.flagImage + '"/>'
80+
}
81+
82+
});
83+
84+
85+
$scope.changeCurrentWorkspace = function (wk) {
86+
$scope.currentWorkspace = wk;
87+
}
88+
89+
90+
//Select the workspace in document ready event
91+
$(document).ready(function () {
92+
$scope.changeCurrentWorkspace($scope.workspaces[0]);
93+
$scope.$apply();
94+
});
95+
96+
});

‎integrate/bsTable.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// JavaScript source code
2+
(function () {
3+
angular.module('bsTable', [])
4+
.directive('bsTableControl', function () {
5+
return {
6+
restrict: 'EA',
7+
scope: {
8+
options: '='
9+
},
10+
link: function (scope, element, attr) {
11+
var tableCreated = false;
12+
scope.$watch('options', function (newValue, oldValue) {
13+
if (tableCreated && newValue === oldValue) return;
14+
$(element).bootstrapTable('destroy');
15+
if (newValue) {
16+
$(element).bootstrapTable(scope.options);
17+
}
18+
tableCreated = typeof (newValue) !== 'undefined';
19+
});
20+
$(window).resize(function () {
21+
if (tableCreated)
22+
$(element).bootstrapTable('resetView');
23+
})
24+
}
25+
};
26+
})
27+
})();

‎integrate/img/blueFlag16.png

606 Bytes
Loading

‎integrate/img/greenFlag16.png

617 Bytes
Loading

‎integrate/img/yellowFlag16.png

585 Bytes
Loading

0 commit comments

Comments
 (0)