如何使用 Angular UI 选项卡和 UI 网格重绘表格? [英] How to Redraw Tables using Angular UI Tabs and UI Grid?
问题描述
我正在尝试从 jQuery 数据表迁移到 Angular UI.我的应用程序使用 MySQL World schema 和在 3 个不同的表中显示数据.在 jQuery 中，我有 3 个不同的页面，每个页面都从一个主页启动.这是一个现场示例.在 Angular 中，我创建了 3 个选项卡，单击每个选项卡应该使用新网格重新加载页面并用数据填充它.问题是，网格在页面加载时显示正常，内容位于第一个选项卡上.单击其他选项卡时，页面变为空，并且没有呈现任何内容.现在返回的数据不是无关紧要的，有时大约 4k 行.但是，正如我通过等待几分钟确认的那样，问题不是延迟问题.
我不是 JS/CSS/HTML 专家，所以很可能我遗漏了一些东西.这就是为什么这个问题.
代码如下:
HTML:
<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><script src="js/app.js"></script>
JS:
(function() {var app = angular.module('helloWorld', ['ui.bootstrap', 'ui.grid']);app.controller('HelloWorldCtrl', ['$http', '$scope', function ($http, $scope) {$scope.tabs = [{ title: '国家' },{ title: '城市' },{ 标题:'语言' }];$scope.gridOptions = {};$scope.gridOptions.data = [];$scope.gridOptionsCountries = {列定义:[{名称:'代码'}，{名称:'名称'}，{名称:'大陆'}，{名称:'地区'}，{名称:'人口'}]};$scope.gridOptionsCities = {列定义:[{名称:'id'}，{名称:'名称'}，{名称:'国家'}，{名称:'人口'}]};$scope.gridOptionsLanguages = {列定义:[{名称:'国家'}，{名称:'语言'}]};$scope.update = 函数(标题){如果(标题===国家"){$scope.gridOptions = angular.copy($scope.gridOptionsCountries);} else if (title === "城市") {$scope.gridOptions = angular.copy($scope.gridOptionsCities);} else if (title === "语言") {$scope.gridOptions = angular.copy($scope.gridOptionsLanguages);}$http.get(title.toLowerCase()).success(function(data) {$scope.gridOptions.data = 数据；});};}]);})();我在这里看到 2 个问题:
您正在动态地创建/更改
gridOptions.这不是通常的做事方式，会带来很多问题.您在
uib-tabs内部使用了网格，这与uib-modals一样，可能会产生一些烦人的副作用.
我建议您使用不同的 gridOptions(就像您创建它们时所做的那样)来解决第一个问题，然后将它们放入您的 tabs 数组子项中，这你可以这样从 html 中引用它们的方式:
<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>第二个问题是众所周知的，在本教程中，他们解释了如何解决它:您应该添加一个 $interval 指令来在更新后刷新网格一段时间，以便让选项卡花时间加载和呈现.
代码应该如下:
$scope.tabs[0].gridOptions.data = 数据；$间隔(函数(){$scope.gridCountriesApi.core.handleWindowResize();}, 10, 500);其中 gridCountriesApi 在常规 onRegisterApi 方法中创建.
我编辑了你的 plunkr，所以你可以看到整个代码.
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
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.
这篇关于如何使用 Angular UI 选项卡和 UI 网格重绘表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
