angularjs
  • angular-ui
  • ng-grid
  • 2014-03-25 65 views 0 likes 
    0

    这是问题 我有表中NG网这样的:具体NG单元尺寸

    var templateImage = '<div class="ngCellText" ng-class="col.colIndex()"><img src="images/{{row.getProperty(\'faseXD[0].fase\')}}.png"></div>'; 
    var templateText = '<div class="ngCellText" ng-class="col.colIndex()"><p id="gridField" ng-cell-text>{{row.getProperty(col.field)}}</p></div>'; 
    $scope.gridOptions= { 
        data:'request', 
        multiSelect:false, 
        headerCellTemplate:'<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }"><div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}}</div><div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div><div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div><div class="ngSortPriority">{{col.sortPriority}}</div><div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div></div><div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>', 
        columnDefs: [{ field: 'product', displayName: 'product',cellTemplate: templateTesto}, 
         {field:'ticket', visible:false}, 
         { field:'subject', displayName:'subject', cellTemplate: templateTesto}, 
         { field: 'date', displayName: 'date',cellTemplate: templateTesto} , 
         { field: 'faseXD', displayName: 'faseXD',cellTemplate: templateImmgaini,cellClass:'cellImage' }, 
         { displayName: 'Report', cellTemplate:'<div ><button ng-diasbled="pdfenabled" ng-click="reportpdf(row.getProperty(\'ticket\'),row.getProperty(\'faseXD[0].fase\'))"><i class="glyphicon glyphicon-file"></i></button></div>', cellClass:'gridCell' } 
         ] 
    } 
    

    我需要做templateImage从其他列不同,准确地说,我需要改变的宽度。我在网络上发现了一些样本来改变颜色或其他小东西,但不是细胞的尺寸,有可能吗?

    回答

    2

    您可以简单地在columnDefs中设置宽度。

    var templateImage = '<div class="ngCellText" ng-class="col.colIndex()"><img src="images/{{row.getProperty(\'faseXD[0].fase\')}}.png"></div>'; 
        var templateText = '<div class="ngCellText" ng-class="col.colIndex()"><p id="gridField" ng-cell-text>{{row.getProperty(col.field)}}</p></div>'; 
        $scope.gridOptions = { 
        data: 'myData', 
        headerCellTemplate: '<div class="ngHeaderSortColumn {{col.headerClass}}" ng-style="{\'cursor\': col.cursor}" ng-class="{ \'ngSorted\': !noSortVisible }"><div ng-click="col.sort($event)" ng-class="\'colt\' + col.index" class="ngHeaderText">{{col.displayName}}</div><div class="ngSortButtonDown" ng-show="col.showSortButtonDown()"></div><div class="ngSortButtonUp" ng-show="col.showSortButtonUp()"></div><div class="ngSortPriority">{{col.sortPriority}}</div><div ng-class="{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }" ng-click="togglePin(col)" ng-show="col.pinnable"></div></div><div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>', 
        columnDefs: [{ 
         field: 'name', 
         width: '50px', 
         displayName: 'product', 
         cellTemplate: templateImage 
        }, { 
         field: 'age', 
         visible: true 
        }] 
        }; 
    

    Example

    +0

    我就是这样失去了在css文件,我没有尝试的东西那么明显设置它的试验,谢谢:) – mautrok

    相关问题