使用AngularJS UI的网格表 [英] Use AngularJS ui-grid with table

问题描述

我使用AngularJS UI格在我的aplication。我有50-100行一些表例如，请不要介意。现在我想用ui.grid.autoresize模块，将dinamically无需滚动调整电网（表）。

我使用从这里帮助<一个href=\"http://stackoverflow.com/questions/27837335/angular-ui-grid-dynamically-calculate-height-of-the-grid\">Angular UI电网动态计算网格的高度结果
我试图把UI的网格属性表标签，也div标签...但它现在的工作。

您可以查看我下面的例子。

控制器视图

 ＆LT; D​​IV CLASS =面板＆gt;
    ＆LT; D​​IV CLASS =面板标题＆GT; {{someheading}}＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =面板体＆GT;
        ＆LT;表UI格=的GridDataUI并网自动调整大小NG风格=getHeightTable（）＆GT;
            ＆LT; thed＆GT;
               ＆所述; TR＆GT;
                  ＆LT;第i {{文件名}}＆LT; /第i
               ＆LT; / TR＆GT;
            ＆LT; / THEAD＆GT;
            ＆LT;＆TBODY GT;
                ＆LT; TR NG重复=文件中uploadFiles＆GT;
                    ＆所述; TD＆GT; {{file.fileName}}＆下; / TD＆GT;
                    ＆LT; TD＆GT; ....＆LT; / TD＆GT;
                ＆LT; / TR＆GT;
            ＆LT; / TBODY＆GT;
        ＆LT; /表＆gt;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

控制器

<$p$p><$c$c>angular.module('app',['ui_grid','ui.grid.autoResize']).controller('MainController',[$scope,uiGridConstants]){
    $ scope.gridData = {
       roweight：30，
       数据：[]
     };     //我用填充上传的文件数据
     $ scope.gridData.data = $ scope.uploadedFiles;
     功能getHeightTable（）{
        VAR的rowHeight = 30;
        VAR headerHeight = 30;
        返回：$ scope.gridData.data.length *的rowHeight + headerHeight +PX
       };
}

解决方案

试试这个...

<$p$p><$c$c>angular.module('app',['ui_grid','ui.grid.autoResize']).controller('MainController',[$scope,uiGridConstants]){
    $ scope.gridData = {
       roweight：30，
       数据：[]
     };     //我用填充上传的文件数据
     $ scope.gridData.data = $ scope.uploadedFiles;
     VAR的rowHeight = 30;
     VAR headerHeight = 30;
     VAR HEIGHT = $ scope.gridData.data.length *的rowHeight + headerHeight +PX
     $（'格'）的CSS（高度，身高+'重要！）。
}

和添加类表..

 ＆LT;表UI格=的GridDataUI并网自动调整大小类=网格＆GT;
 

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的网格表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！