Question

我应该在网格中显示图像我有这个代码：

$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>'},
                ] 
            };

    });

除了图像高度（它以行高显示）

以外都可以正常工作

我试过

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模板上

但它不起作用那么有没有办法设置行/单元格的高度？

Answer 1

如果你知道^^

，这很简单

$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-grid如何设置行或单元格高度

1 个答案: