我有一个应用程序，它通过从mySQL数据库中检索数据来显示一个表（xeditable）。
显示内容的数据库表在后台不断变化，我试图找出如何在UI中反映这些更改，而不是每次在数据库中进行更改时刷新页面或整个表。 / p>
基本上，我想将更改“推送”到视图，并在数据库中检测到更改。
据我所知，这不适用于PHP / MySQL所以我想必须通过使用第三方库甚至中间层nodeJS来解决它...
我在google的firebase（使用ReactJS）上阅读了如何实现OTB并认为可以在不重写整个应用程序的情况下完成。
有什么想法吗？
我当前代码库的片段：
app.js
var app = angular.module('myApp', ['ui.bootstrap','countTo','xeditable']);
app.filter('startFrom', function() {
return function(input, start) {
if(input) {
start = +start; //parse to int
return input.slice(start);
}
return [];
}
});
app.filter('abs', function () {
return function(val) {
return Math.abs(val);
}
});
app.run(function(editableOptions) {
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});
app.config(['$compileProvider', function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|http?|file|data):/);
}]);
app.controller('customersCrtl', function ($scope, $http, $timeout, $interval, $window) {
var init = function loadItems(){
$scope.$emit('LOAD');
$scope.progressBar = { progress : 0 };
$http.get('ajax/getItems.php').success(function(data){
$scope.list = data;
$scope.updateID = data.updateID;
$scope.currentPage = 1; //current page
$scope.entryLimit = 50; //max no of items to display in a page
$scope.filteredItems = $scope.list.length; //Initially for no filter
$scope.totalItems = $scope.list.length;
$scope.priceInfo = {
min: 0,
max: 100000
}
$scope.$emit('UNLOAD');
var array = $scope.list;
var flags = [], output = [], l = array.length, i;
for(i=0; i<l; i++) {
if( flags[array[i].category]) continue;
flags[array[i].category] = true;
output.push(array[i].category);
}
var array_manufact = $scope.list;
var flags = [], output_manufact = [], l = array_manufact.length, i;
for( i=0; i<l; i++) {
if( flags[array_manufact[i].manufacturer]) continue;
flags[array_manufact[i].manufacturer] = true;
output_manufact.push(array_manufact[i].manufacturer);
}
$scope.cats = output;
$scope.manufact = output_manufact;
//console.log($scope.cats);
});
(function progress(){
if($scope.progressBar.progress < 100){
$timeout(function(){
$scope.progressBar.progress += 1;
progress();
},5);
}
})();
的index.html：
<html>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | filter:{category:by_cat} | filter:{notes:by_notes} | filter:{Locked:by_search_locked} | filter:{external_link:by_external_link} | filter:{name:by_name} | filter:{cat2:by_cat2} | filter:{errorStatus:search`enter code here`_status} | filter:{error_status:search_status_opt} | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit" ng-class="{'success' : data.error_status=='--example1--', 'warning' : data.place_1_name!='my_stock', 'danger' : data.error_status == 'not loaded'}">
<td ng-class='{red : data.Locked==1}'><center>{{data.ID}}</center></td>
<td ng-class='{red : data.Locked==1}'><center>{{data.name}}</center></td>
<td ng-class='{red : data.Locked==1}'>
<center>
cat: {{data.category}}
<br/>
cat2: {{data.category2}}
</center></td>
<td ng-class='{red : data.Locked==1}'><center>{{data.price}}</center></td>
<td ng-class='{red : data.Locked==1}'><center>
<div ng-if="data.notes.length > 0">
<div ng-repeat="i in data.notes">
<b><font color="red">{{i}}</font></b>
</div>
</div>
<div ng-if="data.notes.length==0">
---
</div>
</center>
</td>
<td ng-class='{red : data.Locked==1}'>
<center>
<div ng-if="data.minPrice !=''">
<a href="#" editable-text="data.minPrice" onbeforesave="updateMinPrice(data.productID,$data)">
<font class='green'>{{data.minPrice}}</font>
</a>
<span ng-if="data.minPrice_last_changed!='---'">
<br/>
<br/>
LastChangedON: <font dir="ltr">{{data.minPrice_last_changed}}</font>
</span>
</div>
<div ng-if="data.minPrice == '' ">
<div editable-text="data.minPrice" onbeforesave="updateMinPrice(data.productID,$data)">
<font class='orange'>click to add</font>
</div>
</div>
</center></td>
</html>