2016-10-18 7 views

答えて

1

はい、あなたはhtmlファイルをインポートするか、私がやったようなJSで記述することができ、このに、cellTemplateを使用することができます。 http://ui-grid.info/docs/#/tutorial/317_custom_templates

var app = angular.module('app', ['ui.grid', 'ui.grid.edit']); 
 

 
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) { 
 
    $scope.myData = [{ 
 
     "firstName": "Cox", 
 
     "lastName": "Carney", 
 
     "company": "Enormo" 
 
    }, { 
 
     "firstName": "Lorraine", 
 
     "lastName": "Wise", 
 
     "company": "Comveyer" 
 
    }, { 
 
     "firstName": "Nancy", 
 
     "lastName": "Waters", 
 
     "company": "Fuelton" 
 
    }]; 
 
    
 
    var template = ''; 
 
    template += '<div class="ui-grid-cell-contents">'; 
 
    template += ' {{row.entity.firstName}} '; 
 
    template += ' {{row.entity.lastName}}'; 
 
    template += ' </div>'; 
 
    
 
    var columnDefs = [ 
 
     {field: 'firstName', displayName: 'Name', cellTemplate: template}, 
 
     {field: 'company', displayName: 'Company'} 
 
    ]; 
 
    
 
    $scope.gridOptions = { 
 
     data: 'myData', 
 
     columnDefs: columnDefs 
 
    }; 
 
    
 
}]);
<!doctype html> 
 
<html ng-app="app"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script> 
 
    <script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script> 
 
    <link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" /> 
 
    <link rel="stylesheet" href="main.css" type="text/css"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="MainCtrl"> 
 
    <div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div> 
 
</div> 
 

 

 
    <script src="app.js"></script> 
 
    </body> 
 
</html>