如何使用角度UI选项卡和UI电网重绘表？ [英] How to Redraw Tables using Angular UI Tabs and UI Grid?
问题描述
我试图从jQuery的数据表角UI迁移。我的应用程序使用 MySQL的世界架构和显示器在3个不同的表中的数据。 jQuery中，我3个不同的页面，每个页面从主页启动。这里的href=\"http://nameless-island-5362.herokuapp.com/helloworld\" rel=\"nofollow\">活生生的例子一个
我不是JS / CSS / HTML家伙，所以最有可能我想的东西。这就是为什么这个问题。
编辑：
Plnkr网址： http://plnkr.co/edit/6VKTDbfQgdg9l94vFPfo?p=info
以下是code：
HTML
＆LT;身体GT;
＆LT; DIV ID =选择面板级=选择面板NG控制器=HelloWorldCtrl＆GT;
＆LT; DIV＆GT;
＆LT; UIB-标签集TYPE =药丸正当=真＆GT;
＆LT; UIB标签NG重复=标签在标签中标题={{tab.title}}选择=更新（tab.title）＆GT;
＆LT; DIV ID =数据面板级=数据面板UI格=gridOptions＆GT;＆LT; / DIV＆GT;
＆LT; / UIB-标签＆gt;
＆LT; / UIB-标签集＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
JS：
（函数（）{
VAR应用= angular.module（'的helloWorld'，['ui.bootstrap'，'ui.grid']）; app.controller（'HelloWorldCtrl'，['$ HTTP，$范围'，函数（$ HTTP，$范围）{
$ scope.tabs = [
{标题：'国家'}，
{标题：城市}，
{标题：'语言'}
]; $ scope.gridOptions = {};
$ scope.gridOptions.data = []; $ scope.gridOptionsCountries = {
columnDefs：
{名称：'code}，
{名称：'名'}，
{名称：'大陆'}，
{名称：'区域'}，
{名称：'人口'}
]
}; $ scope.gridOptionsCities = {
columnDefs：
{名称：'ID'}，
{名称：'名'}，
{名称：'国家'}，
{名称：'人口'}
]
}; $ scope.gridOptionsLanguages = {
columnDefs：
{名称：'国家'}，
{名称：'语言'}
]
}; $ scope.update =功能（标题）{
如果（标题===国家）{
$ scope.gridOptions = angular.copy（$ scope.gridOptionsCountries）;
}否则如果（标题===城市）{
$ scope.gridOptions = angular.copy（$ scope.gridOptionsCities）;
}否则如果（标题===语言）{
$ scope.gridOptions = angular.copy（$ scope.gridOptionsLanguages）;
} $ http.get（title.toLowerCase（））。成功（功能（数据）{
$ scope.gridOptions.data =数据;
}）;
};
}]）;
}）（）;
我在这里看到2个问题：
-
您正在创建/更改
gridOptionsdinamically。这不是做的事情，可以带来很多问题的常用方法。 -
您使用的是网格
UIB-标签页的内部，所以，如UIB-模态，可以有一些讨厌的副作用。
我建议你使用来解决第一个问题不同的 gridOptions （你做，当你创建它们），然后把它们里面的标签页阵儿，这样你可以参考他们从HTML此whay：
＆LT; UIB标签NG重复=在标签选项卡标题={{tab.title}}选择=更新（tab.title）＆GT;
＆LT; DIV ID =数据面板级=数据面板UI格=tab.gridOptions＆GT;＆LT; / DIV＆GT;
＆LT; / UIB-标签＆gt;
第二个问题是相当知名和本教程里面他们解释如何解决这个问题：你应该添加 $间隔指令刷新了一段时间电网它为了让标签需要一定的时间加载和渲染更新后，
在code应该如下：
$ scope.tabs [0] = .gridOptions.data数据;
$间隔（函数（）{
$ scope.gridCountriesApi.core.handleWindowResize（）;
}，10，500）;
当一个普通的 onRegisterApi 方法内创建 gridCountriesApi 。
我编辑您的 plunkr 的，所以你可以看到整个code。
I'm trying to migrate from jQuery Data Tables to Angular UI. My app uses the MySQL World schema and displays the data in 3 different tables. In jQuery, I'd 3 different pages, each launched from a home page. Here's a live example. In Angular, I created 3 tabs, clicking on each of which is supposed to reload the page with a new grid and populate it with data. Problem is, the grid gets displayed alright on page load with the content on the first tab. On clicking the other tabs, page goes empty and nothing is rendered. Now the data returned is not insignificant, sometimes around 4k rows. However, the problem isn't a latency issue as I've confirmed by waiting several minutes.
I'm not a JS/CSS/HTML guy so most likely I'm missing something. That's why this question.
Edit: Plnkr URL: http://plnkr.co/edit/6VKTDbfQgdg9l94vFPfo?p=info
Following is the code:
HTML:
<body>
<div id="selection-panel" class="selection-panel" ng-controller="HelloWorldCtrl">
<div>
<uib-tabset type="pills" justified="true">
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="update(tab.title)">
<div id="data-panel" class="data-panel" ui-grid="gridOptions"></div>
</uib-tab>
</uib-tabset>
</div>
</div>
<script src="js/app.js"></script>
</body>
JS:
(function() {
var app = angular.module('helloWorld', ['ui.bootstrap', 'ui.grid']);
app.controller('HelloWorldCtrl', ['$http', '$scope', function ($http, $scope) {
$scope.tabs = [
{ title: 'Countries' },
{ title: 'Cities' },
{ title: 'Languages' }
];
$scope.gridOptions = {};
$scope.gridOptions.data = [];
$scope.gridOptionsCountries = {
columnDefs: [
{ name: 'code'},
{ name: 'name'},
{ name: 'continent'},
{ name: 'region'},
{ name: 'population'}
]
};
$scope.gridOptionsCities = {
columnDefs: [
{ name: 'id'},
{ name: 'name'},
{ name: 'country'},
{ name: 'population'}
]
};
$scope.gridOptionsLanguages = {
columnDefs: [
{ name: 'country'},
{ name: 'language'}
]
};
$scope.update = function(title) {
if (title === "Countries") {
$scope.gridOptions = angular.copy($scope.gridOptionsCountries);
} else if (title === "Cities") {
$scope.gridOptions = angular.copy($scope.gridOptionsCities);
} else if (title === "Languages") {
$scope.gridOptions = angular.copy($scope.gridOptionsLanguages);
}
$http.get(title.toLowerCase()).success(function(data) {
$scope.gridOptions.data = data;
});
};
}]);
})();
I see 2 problems here:
You are creating/changing
gridOptionsdinamically. This is not the usual way of doing things and can bring many problems.You are using grids inside of
uib-tabsand this, likeuib-modals, can have some annoying side effects.
I'd suggest you to address the first issue using different gridOptions (as you do when you create them) and then putting them inside your tabs array children, this way you can refer them from the html this whay:
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="update(tab.title)">
<div id="data-panel" class="data-panel" ui-grid="tab.gridOptions"></div>
</uib-tab>
The second problem is quite known and inside this tutorial they explain how to address it: you should add a $interval instruction to refresh the grid for some time after it's updated in order to let the tab take its time to load and render.
The code should be as follows:
$scope.tabs[0].gridOptions.data = data;
$interval( function() {
$scope.gridCountriesApi.core.handleWindowResize();
}, 10, 500);
Where gridCountriesApi are created inside of a regular onRegisterApi method.
I edited your plunkr, so you can see the whole code.
这篇关于如何使用角度UI选项卡和UI电网重绘表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
