使用带有表格的 AngularJS ui-grid [英] Use AngularJS ui-grid with table
问题描述
我在我的应用程序中使用了 AngularJS ui-grid.我有一些表格，例如有 50-100 行，没关系.现在我想使用 ui.grid.autoresize 模块，该模块将动态调整网格(表格)的大小而无需滚动.
我正在使用这里的帮助 Angular ui-grid 动态计算网格高度
我试图将 ui-grid 属性放在 table 标签中，也在 div 标签中......但它现在可以工作了.
您可以在下面查看我的示例.
控制器视图
<tr ng-repeat="上传文件中的文件"><td>{{file.fileName}}</td><td>....</td></tr></tbody>控制器
angular.module('app',['ui_grid','ui.grid.autoResize']).controller('MainController',[$scope,uiGridConstants]){$scope.gridData = {体重 : 30,数据:[]};//我正在用上传的文件填充数据$scope.gridData.data = $scope.uploadedFiles;函数 getHeightTable(){var rowHeight = 30;var headerHeight = 30;返回:$scope.gridData.data.length * rowHeight + headerHeight + "px"};}试试这个...
angular.module('app',['ui_grid','ui.grid.autoResize']).controller('MainController',[$scope,uiGridConstants]){$scope.gridData = {体重 : 30,数据:[]};//我正在用上传的文件填充数据$scope.gridData.data = $scope.uploadedFiles;var rowHeight = 30;var headerHeight = 30;var height = $scope.gridData.data.length * rowHeight + headerHeight + "px"$('.grid').css('height',height + ' !important');}并将类添加到表..
I am using AngularJS ui-grid in my aplication. I have some table for example with 50-100 rows, nevermind. Now i want to use ui.grid.autoresize module which will dinamically resize the grid(table) with no need of scrolling.
I am using help from here Angular ui-grid dynamically calculate height of the grid
I tried to put ui-grid properties in table tag, also in div tag... but it's now working.
You can view my example below.
Controller view
<div class="panel>
<div class="panel-heading">{{someheading}}</div>
<div class="panel-body">
<table ui-grid="gridData" ui-grid-auto-resize ng-style="getHeightTable()">
<thed>
<tr>
<th>{{filename}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in uploadFiles">
<td>{{file.fileName}}</td>
<td>....</td>
</tr>
</tbody>
</table>
</div>
</div>
Controller
angular.module('app',['ui_grid','ui.grid.autoResize']).controller('MainController',[$scope,uiGridConstants]){
$scope.gridData = {
roweight : 30,
data:[]
};
//I am populating data with uploaded files
$scope.gridData.data = $scope.uploadedFiles;
function getHeightTable(){
var rowHeight = 30;
var headerHeight = 30;
return : $scope.gridData.data.length * rowHeight + headerHeight + "px"
};
}
解决方案 try this...
angular.module('app',['ui_grid','ui.grid.autoResize']).controller('MainController',[$scope,uiGridConstants]){
$scope.gridData = {
roweight : 30,
data:[]
};
//I am populating data with uploaded files
$scope.gridData.data = $scope.uploadedFiles;
var rowHeight = 30;
var headerHeight = 30;
var height = $scope.gridData.data.length * rowHeight + headerHeight + "px"
$('.grid').css('height',height + ' !important');
}
and add class to table..
<table ui-grid="gridData" ui-grid-auto-resize class="grid">
这篇关于使用带有表格的 AngularJS ui-grid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆