angularjs NG-电网如何设置行或单元格高度 [英] angularjs ng-grid how to set row or cell height

查看:245
本文介绍了angularjs NG-电网如何设置行或单元格高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我要在网格中显示图像
我这有code:

I should display an image in the grid I've got this code:

$scope.gridOptions = {
            data: 'items',
            enablePaging: true,
            showFooter: true,
            enablePinning: true,
            totalServerItems:'totalServerItems',
            pagingOptions: $scope.pagingOptions,
            filterOptions: $scope.filterOptions,
            showSelectionCheckbox: true,
            multiSelect: false,
            rowTemplate: '<div ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex(),\'height\': \'150px\' }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>',
            columnDefs: [
                    {field: 'id', displayName: 'Id'}, 
                    {field:'firstname', displayName:'Name'}, 
                    {field: 'surname', displayName:'Cognome'},
                    {field: 'email', displayName:'Email'},
                    {field: 'address', displayName:'Indirizzo'},
                    {field: 'city', displayName:'Città'},
                    {field: 'zip', displayName:'Cap'},
                    {field: 'birthday', displayName:'Data di nascita'},
                    {field: 'joined', displayName:'Registrazione'},
                    {field: 'ip', displayName:'Ip'},
                    {field: 'url', displayName:'Prodotto',cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><img src="./assets/base/img/products/{{row.getProperty(\'url\')}}" /></div>'},
                ] 
            };

    });

所有作品图像高度以及节选(它显示的行高度)

all works well excepts of the image height (it is displayed with the row height)

我试着

rowTemplate: '<div ng-style="{\'cursor\': row.cursor, \'z-index\': col.zIndex(),\'height\': \'150px\' }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>',

或者干脆把款式上的div IMG模板

or simply put the style on the div img template

,但它不工作
那么有没有一种方法来设置行/单元格的高度?

but it doesn't work so is there a way to set the height of the row/cell ?

推荐答案

如果你知道这很简单^^

It's very simple if you know ^^

$scope.gridOptions = {
            data: 'items',
            rowHeight: 80,
            enablePaging: true,
            showFooter: true,
            enablePinning: true,
            totalServerItems:'totalServerItems',
            pagingOptions: $scope.pagingOptions,
            filterOptions: $scope.filterOptions,
            showSelectionCheckbox: true,
            multiSelect: false,
            columnDefs: [
                    {field: 'id', displayName: 'Id'}, 
                    {field:'firstname', displayName:'Name'}, 
                    {field: 'surname', displayName:'Cognome'},
                    {field: 'email', displayName:'Email'},
                    {field: 'address', displayName:'Indirizzo'},
                    {field: 'city', displayName:'Città'},
                    {field: 'zip', displayName:'Cap'},
                    {field: 'birthday', displayName:'Data di nascita'},
                    {field: 'joined', displayName:'Registrazione'},
                    {field: 'ip', displayName:'Ip'},
                    {field: 'url', displayName:'Prodotto',cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><img src="./assets/base/img/products/{{row.getProperty(\'url\')}}" /></div>'},
                ] 
            };

    });

只需添加的rowHeight:80 ,以网格选项

这篇关于angularjs NG-电网如何设置行或单元格高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆