javascript Angular ui grid 如何显示加载器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18743656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular ui grid how to show a loader
提问by Whisher
I'm wondering how to show a simple loader before data was loaded. I'm using ng-grid-1.3.2 I'm googling but I didn't find any example. Bye
我想知道如何在加载数据之前显示一个简单的加载器。我正在使用 ng-grid-1.3.2 我在谷歌上搜索但我没有找到任何例子。再见
采纳答案by AardVark71
like Maxim Shoustinsuggested you can use the angularjs-spinner from Jim Lavinwhich uses (deprecated) Response Interceptors.
就像Maxim Shoustin建议你可以使用Jim Lavin的 angularjs-spinner ，它使用（不推荐使用）Response Interceptors。
I think it's explained best here : http://codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-hide-a-loading-widget-redux/
我认为这里的解释最好：http: //codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-hide-a-loading-widget-redux/
In a nutshell, in his first solution, what you have to do for your ng-grid app is:
简而言之，在他的第一个解决方案中，你必须为你的 ng-grid 应用程序做的是：
1) Add the loading gif to your html (for loading gif look here)
1) 将加载 gif 添加到您的 html (加载 gif 看这里)
<div id="loadingWidget" class="row-fluid ui-corner-all" style="padding: 0 .7em;" loading-widget >
<div class="loadingContent">
<p>
<img alt="Loading Content" src="images/ajax-loader.gif" /> Loading
</p>
</div>
</div>
2) In your code as soon as you have declared your app level module add the Response Interceptors for http requests to the configuration block
2) 在您声明应用级模块后，立即在代码中将 http 请求的响应拦截器添加到配置块
var app = angular.module('myCoolGridApp', ['ngGrid']);
app.constant('_START_REQUEST_', '_START_REQUEST_');
app.constant('_END_REQUEST_', '_END_REQUEST_');
app.config(['$httpProvider', '_START_REQUEST_', '_END_REQUEST_', function ($httpProvider, _START_REQUEST_, _END_REQUEST_) {
var $http,
interceptor = /* see extra details on codingsmackdown.tv */
$httpProvider.responseInterceptors.push(interceptor);
}
3) and then add your loadingWidget directive
3) 然后添加您的 loadingWidget 指令
app.directive('loadingWidget', ['_START_REQUEST_', '_END_REQUEST_', function (_START_REQUEST_, _END_REQUEST_) {
return {
restrict: "A",
link: function (scope, element) {
element.hide();
scope.$on(_START_REQUEST_, function () {element.show();});
scope.$on(_END_REQUEST_, function () {element.hide();});
}
};
}]);
See more details at codingsmackdown
在codingsmackdown中查看更多详细信息
回答by leocborges
I had the same question as you.
我和你有同样的问题。
I find this nice tutorial about it: http://brianhann.com/ui-grid-the-easiest-customization-youll-ever-write/
我发现这个很好的教程：http: //brianhann.com/ui-grid-the-easiest-customization-youll-ever-write/
He use vm.loading = truewhile fetching data from server and changed to falseafter complete.
他vm.loading = true在从服务器取数据时使用，false完成后改为。
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$http', '$timeout', function ($http, $timeout) {
var vm = this;
vm.reset = reset;
vm.noData = noData;
vm.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'age' }
]
};
reset();
////////////
// Initialize our data source
function init() {
$http.get('data.json')
.success(function (data) {
vm.gridOptions.data = data;
})
.finally(function () {
vm.loading = false;
});
}
// Reset the data source in a timeout so we can see the loading message
function reset() {
vm.loading = true;
vm.gridOptions.data = [];
$timeout(function () {
init();
}, 1000);
}
function noData() {
vm.gridOptions.data = [];
}
}]);
In the HTML, he uses ng-hide to show/hide the spinner based on values of gridOptions.data and vm.loading:
在 HTML 中，他使用 ng-hide 根据 gridOptions.data 和 vm.loading 的值显示/隐藏微调器：
<div id="grid1" ui-grid="vm.gridOptions" class="grid">
<div class="grid-msg-overlay" ng-hide="!vm.loading">
<div class="msg">
<span>
Loading Data...
<i class="fa fa-spinner fa-spin"></i>
</span>
</div>
</div>
<div class="grid-msg-overlay" ng-hide="vm.loading || vm.gridOptions.data.length">
<div class="msg">
<span>No Data</span>
</div>
</div>
</div>
Here is the Plunkerof the final version shown.
这是显示的最终版本的Plunker。
回答by A.Dara
Simply,by adding this code in your html part:
简单地，通过在您的 html 部分添加此代码：
<img alt="loading..." src='images/ajax-loader.gif")' /> loading message...
and the following code in your app.controllerscript:
以及app.controller脚本中的以下代码：
$http.get(yourdataUrl)
.then(function (response) {
$scope.records = response.data;
$("#loadingWidget").hide();
});
it works fine for me!
这对我来说可以！
回答by Angry Samurai
I also needed a similar behavior and I came across this answer but I needed to show something inside the grid itself so hereis something I put together. My idea is that I change the gridOptions on the fly and show a loader as a row inside the grid.
我也需要类似的行为，我遇到了这个答案，但我需要在网格本身内部显示一些东西，所以这是我放在一起的东西。我的想法是我即时更改 gridOptions 并将加载程序显示为网格内的一行。
loaderOptions = {
"columnDefs": [{
"name": "",
"field": "loading",
"enableColumnMenu": false,
"cellTemplate": '<div style="width:90px; margin:auto;"><span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...</div>'
}],
"data": [{
"loading": ""
}]
};
回答by Anil Singh
The HTML code-sample
HTML 代码示例
<img ng-show="loading" src="~/img/loding.jpg" />
<div class="ngtyle" ng-grid="myGridView"></div>
The AngularJs code-sample
AngularJs 代码示例
var app = angular.module('App', ['ngGrid']);
app.controller('MainCtrl', function ( $scope, myService ) {
$scope.loading = true;
myService.get().then( function ( response ) {
$scope.items = response.data;
})
.finally(function() {
$scope.loading = false;
});
$scope.myGridView = {
data: 'dataList',
columnDefs: 'myDisplayColumns'};
});
