首页 > 代码库 > https://github.com/angular-ui/ui-grid/wiki/Templating

https://github.com/angular-ui/ui-grid/wiki/Templating

https://github.com/angular-ui/ui-grid/wiki/Templating

    $scope.gridOptions = {
        data: self.myData,
        enableCellEditOnFocus: true, //enables the editor on a single click, if you use enableCellEdit: true you would have to doubleclick
        columnDefs: [{ field: ‘firstName‘, displayName: ‘First Name‘, width: 90 },
                     { field: ‘lastName‘, displayName: ‘Last Name‘, width: 80 },
                     { field: ‘age‘, cellClass: ‘ageCell‘, headerClass: ‘ageHeader‘, 
                       editableCellTemplate: ‘<div><form name="inputForm"><input type="number" ng-class="\‘colt\‘ + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD"></form></div>‘ } ]
 };


 
  • 387
  • 2,382

angular-ui/ui-grid

Code Issues 1,324 Pull requests 8 Projects 0 Wiki Pulse Graphs

Templating

Omaigad edited this page on 3 Aug 2016 · 40 revisions

Pages 10

  • Home
  • Configuration Options
  • Contributing to ui grid
  • Defining columns
  • Examples
  • Getting started
  • Grid Events
  • Plugins
  • Sorting
  • Templating
Clone this wiki locally

Check latest default templates at ui-grid/templates

Row Templates


Default Row Template:

// passed in as a string
    <div ng-style="{ ‘cursor‘: row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div>

Example:

    $scope.gridOptions = {
        data: self.myData,
        rowTemplate: ‘<div ng-style="{\‘cursor\‘: row.cursor, \‘z-index\‘: col.zIndex() }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}" ng-cell></div>‘
 };

That way you can add some styling!

Default header template:

<div ng-style="{ height: col.headerRowHeight }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngHeaderCell" ng-header-cell></div>

Double Click on Row Template:

Example:

    $scope.gridOptions = {
        data: self.myData,
        rowTemplate: ‘<div ng-dblclick="onDblClickRow(row)" ng-style="{ \’cursor\’: row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}"><div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }">&nbsp;</div><div ng-cell></div></div>‘
 };

    $scope.onDblClickRow = function(rowItem) {
        // do something here with rowItem.rowIndex
    };

Cell Templates


Default Cell Template:

<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col)}}</div>

Example:

    $scope.gridOptions = {
        data: self.myData,
        columnDefs: [{ field: ‘firstName‘, displayName: ‘First Name‘, width: 90, cellTemplate: ‘<div class="ui-grid-cell-contents" >{{grid.getCellValue(row, col)}}</div>‘ },
                     { field: ‘lastName‘, displayName: ‘Last Name‘, width: 80 },
                     { field: ‘age‘, cellClass: ‘ageCell‘, headerClass: ‘ageHeader‘ } ]
 };

Editable Cell Templates


It is possible to make the cells editable, and you can even define your own template for the editor.

Default Editable Cell Template:

<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="‘colt‘ + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD"></form></div>

Example (‘number‘ style input for the age column):

    $scope.gridOptions = {
        data: self.myData,
        enableCellEditOnFocus: true, //enables the editor on a single click, if you use enableCellEdit: true you would have to doubleclick
        columnDefs: [{ field: ‘firstName‘, displayName: ‘First Name‘, width: 90 },
                     { field: ‘lastName‘, displayName: ‘Last Name‘, width: 80 },
                     { field: ‘age‘, cellClass: ‘ageCell‘, headerClass: ‘ageHeader‘, 
                       editableCellTemplate: ‘<div><form name="inputForm"><input type="number" ng-class="\‘colt\‘ + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD"></form></div>‘ } ]
 };

When editing a cell, the ng-cell-has-focus directive will broadcast a message named ngGridEventStartCellEdit to let all children know that you can now give yourself focus. When the editable cell template is done with editing (usually on a blur event) you need to emit ngGridEventEndCellEdit to let ng-cell-has-focus know that you are done editing and it will then show the non-editable cell template. The reasoning for this is (good quote): "Now I can wrap my input elements in divs/spans, whatever and control exactly what element‘s blur triggers the end edit" - @swalters.

If you search for the ‘ngInput‘ directive in ng-grid‘s source code, you will find that that is exactly what this directive implements for input elements. So if you need to create your own ‘cell editor‘, you could create your own directive that would listen to and emit the right events, to make your component work as expected.

An example (used for ng-input directive):

scope.$on( ‘uiGridEventBeginCellEdit‘, function () { elm.focus(); } ); //focus the input element on ‘start cell edit‘
angular.element( elm ).bind( ‘blur‘, function () { scope.$emit( ‘uiGridEventEndCellEdit‘ ); } ); //when leaving the input element, emit the ‘end cell edit‘ event

Remember also to name the form as ‘inputForm‘ in order to enable CANCEL EDIT and END EDIT differentiation based on form validation.

Header Cell Templates


Default Header Cell Template:

<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>

Example:

var myHeaderCellTemplate = ‘<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>+
                             ‘<div ng-show="col.resizable" class="ngHeaderGrip" ng-click="col.gripClick($event)" ng-mousedown="col.gripOnMouseDown($event)"></div>‘;
$scope.gridOptions = {
        data: self.myData,
        columnDefs: [{ field: ‘firstName‘, displayName: ‘First Name‘, width: 90, headerCellTemplate: myHeaderCellTemplate },
                     { field: ‘lastName‘, displayName: ‘Last Name‘, width: 80 },
                     { field: ‘age‘, cellClass: ‘ageCell‘, headerClass: ‘ageHeader‘ ]
 };
  • 4,744

https://github.com/angular-ui/ui-grid/wiki/Templating