Question

知道如何将行高调整为ng-grid中的内容？看到文本被包装但未显示，因为该行具有固定高度。我看到几个帖子声称没有支持...想想也许有人可以启发我......

感谢。

enter image description here

这是我的代码：

this.gridOptions = { data: 'tenants.elements',      
        selectedItems: this.mySelections,       
        enableColumnResize: true,
        enableColumnReordering: true,
        enableRowReordering: true,      
        showSelectionCheckbox: true,
        selectWithCheckboxOnly: true,
        showFooter: true,       
        //sortInfo: {fields: ['percent'], directions: ['desc']},
        columnDefs:
               [                    
                    {width: '7%', field:'apartment', displayName:'דירה'},
                    {width: '2%', field:'tenant_type', displayName:'-', cellTemplate: '<i ng-class="tenants.getTenantType(row.entity.tenant_type)" class="fa fa-child"></i>'},
                    {width: '2%', field:'defecto', displayName:'-', cellTemplate: '<i ng-show="row.entity.defecto" class="fa fa-child defecto"></i>'},                  
                    {width: '30%', field:'tenant_name', displayName:'שם דייר', cellTemplate: '<a href="#GetTenantsDebts/{{row.entity.building_id}}/{{row.entity.apartment}}">{{row.entity.tenant_name}}</a>'},
                    {width: '25%' ,field:'phones', displayName:'טלפונים'},
                    {width: '25%' ,field:'mails', displayName:'מיילים'}
                ],
        filterOptions: this.filterOptions,      
        plugins: [new ngGridAutoRowHeightPlugin()]
        //plugins: [new ngGridFlexibleHeightPlugin()]
        }

Answer 1

这是一个插件，一些代码取自ngGridFlexibleHeightPlugin 请注意，高度将在所有行上按最大高度更改

ngGridAutoRowHeightPlugin = function () {
    var self = this;
    self.grid = null;
    self.scope = null;

    self.init = function (scope, grid, services) {
        self.domUtilityService = services.DomUtilityService;
        self.grid = grid;
        self.scope = scope;


        var recalcHeightForData = function () { setTimeout(innerRecalcForData, 1); };
        var innerRecalcForData = function () {
            var gridId = self.grid.gridId,
                rowHeight = self.grid.config.rowHeight;

            $('.' + gridId + ' .ngRow [ng-cell-text]').each(function (index, cellText) {
                //+10 for default top and bottom padding of .ngCellText class
                rowHeight = Math.max(rowHeight, $(cellText).outerHeight() + 10); 
            });

            if (self.grid.config.rowHeight < rowHeight) {

                self.grid.config.rowHeight = rowHeight;

                //update grid's scope.rowHeight as vertical bars height depends on it
                if (scope.$$phase == '$apply' || scope.$$phase == '$digest') {
                    updateGridScopeHeight();
                } else {
                    scope.$apply(updateGridScopeHeight);
                }

                self.domUtilityService.RebuildGrid(self.scope, self.grid);

                function updateGridScopeHeight() {
                    self.grid.$root.scope().rowHeight = rowHeight;
                }
            }

        };

        self.scope.catHashKeys = function () {
            var hash = '',
                idx;
            for (idx in self.scope.renderedRows) {
                hash += self.scope.renderedRows[idx].$$hashKey;
            }
            return hash;
        };

        self.scope.$watch('catHashKeys()', innerRecalcForData);
        self.scope.$watch(self.grid.config.data, recalcHeightForData);
    };
};

此外，将此样式规则添加到您的css（在ng-grid css之后）

.ngCellText {
    white-space: normal !important;
}

Plunker here

如何将行高调整为ng-grid中的内容？

1 个答案: