特定的ng细胞维度

时间:2014-03-25 15:13:01

标签: angularjs angular-ui ng-grid

这就是问题所在 我有这样的ng-grid表:

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与其他列不同,确切地说我需要更改宽度。我在网上发现了一些样本来改变颜色或其他小东西,但不是细胞的尺寸,有可能吗?

1 个答案:

答案 0 :(得分: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