容器中有2个选项卡。 每个标签都有一个智能表。
用户点击标签页。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
var relatedTarget = $(e.relatedTarget).attr("href")
if (target == "#tab1") {
Scopes.get('tab1').get_records();
} else if (target == "#tab2") {
Scopes.get('tab2').get_records();
}
})
致电服务器获取所有记录并在桌面上显示。（仅限第一次）
$scope.got_tab1_records = false;
$scope.get_records = function () {
if($scope.got_tab1_records) return;
var today = new Date().toJSON().slice(0,10);
var url = Flask.url_for('recorder.record_list', {info_type: 1, from_date: today, to_date: today});
$http.get(url).success(
function(data){
$scope.tab1_records = data;
$scope.safe_tab1_records = [].concat($scope.tab1_records);
$scope.got_tab1_records = true;
}
).error(function(response){
alert(response);
}).finally(function (){
});
}
如果有新记录，请从WebSocket获取记录。
var url = "ws://" + window.location.href.replace(/https?:\/\//,'').replace(/\/.*/,'') + "/ws";
var ws = new WebSocket(url);
ws.onerror = function (e) {
alert(e);
console.log("WebSocket Error" + e);
console.log(e);
}
ws.onclose = function () {
document.getElementById("logo").style.color = "gray";
}
ws.onmessage = function (e) {
var obj = JSON.parse(e.data);
$scope.append_record(obj.state, obj.record);
}
$scope.append_record = function(info_type, record){
if (info_type == 1) {
Scopes.get('tab1').unshift_record(record);
} else if (info_type == 2) {
Scopes.get('tab2').safe_tab1_records.unshift(JSON.parse(record));
}
};
取消加速st-safe-src上的记录并刷新表格。
$scope.unshift_record = function (record) {
$scope.safe_tab1_records.unshift(JSON.parse(record));
};
我的问题是第4步没有刷新表格。 仅当我单击另一个选项卡时，才单击原始选项卡。 但是，单击tab1中的按钮，它将取消记录并显示在表格的第一行。
$scope.addRandomItem = function addRandomItem() {
$scope.safe_tab1_records.unshift({_datetime:'2017-02-23', _device:'1'});
};
另外，我有一个问题。 为什么st-pagesizelist =“10,50,100,1000”不起作用？
我有plunker来显示此问题。但我不知道如何模拟WebSocket。
HTML：
<div id="right_container" style="position: absolute; width: 38%; height: calc(100% - 107px); right: 0px;">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">tab1</a></li>
<li class=""><a data-toggle="tab" href="#tab2">tab2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active" ng-controller="tab1" style="position: absolute; width: 100%; height: calc(100% - 42px); top: 42px;">
<button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
<i class="glyphicon glyphicon-plus">
</i> Add random item
</button>
<table st-table="tab1_records" st-safe-src="safe_tab1_records" class="table table-striped">
<thead>
<tr style="background-color: #2A66AB; color: white;">
<th>time</th>
<th>device</th>
</tr>
<tr style="background-color: white;">
<th><input st-search="time" class="form-control" placeholder="time search ..." type="text" /></th>
<th><input st-search="device" class="form-control" placeholder="device search ..." type="text" /></th>
</tr>
</thead>
<tbody style="background-color: white;">
<tr ng-repeat="record in tab1_records">
<td>{$record._datetime$}</td>
<td>{$record._device$}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="text-center">
<div st-pagination="" st-items-by-page="10" st-displayed-pages="7" st-pagesizelist="10,50,100,1000"></div>
</td>
</tr>
</tfoot>
</table>
</div>
<div id="tab2" class="tab-pane fade" ng-controller="tab2" style="position: absolute; width: 100%; height: calc(100% - 42px); top: 42px;">
<table st-table="tab2_records" st-safe-src="safe_tab2_records" class="table table-striped">
<thead>
<tr style="background-color: #2A66AB; color: white;">
<th>time</th>
<th>device</th>
</tr>
<tr style="background-color: white;">
<th><input st-search="time" class="form-control" placeholder="time search ..." type="text" /></th>
<th><input st-search="device" class="form-control" placeholder="device search ..." type="text" /></th>
</tr>
</thead>
<tbody style="background-color: white;">
<tr ng-repeat="record in tab2_records">
<td>{$record._datetime$}</td>
<td>{$record._device$}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" class="text-center">
<div st-pagination="" st-items-by-page="10" st-displayed-pages="7" st-pagesizelist="10,50,100,1000"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
使用Javascript：
<script src="/statics/scripts/angular.min.js"></script>
<script src="/statics/scripts/Smart-Table-2.1.8/smart-table.min.js"></script>
<script>
var app = angular.module('map', ['smart-table']);
app = angular.module('map').config(function ($httpProvider, $interpolateProvider) {
$httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
$interpolateProvider.startSymbol('{$');
$interpolateProvider.endSymbol('$}');
});
app.run(function ($rootScope) {
$rootScope.$on('scope.stored', function (event, data) {
console.log("scope.stored", data);
});
});
app.controller('tab1', ['$scope', '$http', 'Scopes', function ($scope, $http, Scopes) {
Scopes.store('tab1', $scope);
$scope.got_tab1_records = false;
$scope.get_records = function () {
if($scope.got_tab1_records) return;
var today = new Date().toJSON().slice(0,10);
var url = Flask.url_for('recorder.record_list', {info_type: 1, from_date: today, to_date: today});
$http.get(url).success(
function(data){
$scope.tab1_records = data;
$scope.safe_tab1_records = [].concat($scope.tab1_records);
$scope.got_tab1_records = true;
}
).error(function(response){
alert(response);
}).finally(function (){
});
}
$scope.addRandomItem = function addRandomItem() {
$scope.safe_tab1_records.unshift({_datetime:'2017-02-23', _device:'1'});
};
$scope.unshift_record = function (record) {
$scope.safe_tab1_records.unshift({_datetime:'2017-02-23', _device:'2'});
};
$scope.get_records();
}]);
app.controller('tab2', ['$scope', '$http', 'Scopes', function ($scope, $http, Scopes) {
Scopes.store('tab2', $scope);
$scope.got_tab2_records = false;
$scope.get_records = function () {
if($scope.got_tab2_records) return;
var today = new Date().toJSON().slice(0,10);
var url = Flask.url_for('recorder.record_list', {info_type: 2, from_date: today, to_date: today});
$http.get(url).success(
function(data){
$scope.tab2_records = data;
$scope.safe_tab2_records = [].concat($scope.tab2_records);
$scope.got_tab2_records = true;
}
).error(function(response){
alert(response);
}).finally(function (){
});
};
$scope.unshift_record = function (record) {
$scope.safe_tab1_records.unshift(JSON.parse(record));
};
}]);
app.controller('preview', ['$scope', '$http', 'Scopes', function ($scope, $http, Scopes) {
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
var relatedTarget = $(e.relatedTarget).attr("href")
if (target == "#tab1") {
Scopes.get('tab1').get_records();
} else if (target == "#tab2") {
Scopes.get('tab2').get_records();
}
})
$scope.append_record = function(info_type, record){
if (info_type == 1) {
Scopes.get('tab1').unshift_record(record);
} else if (info_type == 2) {
Scopes.get('tab2').safe_tab1_records.unshift(JSON.parse(record));
}
};
var url = "ws://" + window.location.href.replace(/https?:\/\//,'').replace(/\/.*/,'') + "/ws";
var ws = new WebSocket(url);
ws.onerror = function (e) {
alert(e);
console.log("WebSocket Error" + e);
console.log(e);
}
ws.onclose = function () {
document.getElementById("logo").style.color = "gray";
}
ws.onmessage = function (e) {
var obj = JSON.parse(e.data);
$scope.append_record(obj.state, obj.record);
}
}]);
app.factory('Scopes', function ($rootScope) {
var mem = {};
return {
store: function (key, value) {
$rootScope.$emit('scope.stored', key);
mem[key] = value;
},
get: function (key) {
return mem[key];
}
};
});
</script>