0

私はこのコードを持っているグリッドに画像を表示する必要があります:

$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 テンプレートに配置します

行/セルの高さを設定する方法はありますか?

4

1 に答える 1

8

知っていればとても簡単です^^

$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を追加するだけです

于 2013-10-02T07:57:30.293 に答える