将 AngularJS ui-grid 与表格一起使用

Question

我在我的应用程序中使用 AngularJS ui-grid。例如，我有一些 50-100 行的表，没关系。现在我想使用 ui.grid.autoresize 模块，它将动态调整网格（表格）的大小而无需滚动。

我正在使用来自这里的帮助 Angular ui-grid dynamically calculate height of the grid
我试图将 ui-grid 属性放在 table 标记中，也放在 div 标记中......但它现在可以工作了。

您可以在下面查看我的示例。

控制器视图

<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>

控制器

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"
       };
}

Answer 1

试试这个...

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');
}

并将类添加到表中..

<table ui-grid="gridData" ui-grid-auto-resize class="grid">