Use AngularJS ui-grid with table

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/32905266/use-angularjs-ui-grid-with-table

标签

javascript

html

angularjs

angular-ui-grid