web-dev-qa-db-fra.com

Ajouter un lien html dans n'importe qui de ng-grid

Je veux ajouter un lien vers ng-grid. Voici mon code pour votre référence 

<html ng-app="myApp">  
<head lang="en">
    <meta charset="utf-8">
    <title>Getting Started With ngGrid Example</title>  
    <link href="../../Content/ng-grid.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>
    <script src="../../Scripts/angular.js" type="text/javascript"></script>
    <script src="../../Scripts/ng-grid.js" type="text/javascript"></script>
    <script src="../../Scripts/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        var app = angular.module('myApp', ['ngGrid']);
        app.controller('MyCtrl', function ($scope) {
            $scope.myData = [{ name: "RK.PRABAKAR", age: 25, href: "<a href='#'>Link1</a>" },
                 { name: "Yoga", age: 27, href: "<a href='#'>Link1</a>" },
                 { name: "James", age: 27, href: "<a href='#'>Link1</a>" },
                 { name: "Siva", age: 35, href: "<a href='#'>Link1</a>" },
                 { name: "KK", age: 27, href: "<a href='#'>Link1</a>"}];

            $scope.pagingOptions = {
                pageSizes: [2, 4, 6],
                pageSize: 2,
                currentPage: 1
            };

            $scope.gridOptions = {
                data: 'myData',
                enablePaging: true,
                showFooter: true,
                enableCellSelection: true,
                enableRowSelection: false,
                enablePinning: true,
                pagingOptions: $scope.pagingOptions,
                enableCellEdit: true,
                columnDefs: [{ field: 'name', displayName: 'Name', enableCellEdit: true },
                 { field: 'age', displayName: 'Age', enableCellEdit: true },
                 { field: 'href', displayName: 'Link', enableCellEdit: false }]
            };
        });
    </script>
    <style>
    .gridStyle {
border: 1px solid rgb(212,212,212);
width: 500px; 
height: 300px;
}
    </style>
</head>
<body data-ng-controller="MyCtrl">
    <div class="gridStyle" data-ng-grid="gridOptions"></div>
</body>

À l’heure actuelle, la grille de données fonctionne correctement, sauf le lien href dans la grille . Le lien n’est pas rendu en balise HTML. Il est affiché sous forme de chaîne normale .

angular-uing-grid
19
rk_sweetrascal

Mettre à jour:

Il a été noté que cette réponse ne fonctionne pas avec ui-grid. Cela est compréhensible car au moment de la réponse, seul ng-grid existait; toutefois, remplacer {{COL_FIELD}} au lieu de {{row.getProperty(col.field)}} permet à la solution d'être valide pour ng-grid et ui-grid.

Je sais que j’ai utilisé COL_FIELD dans ces situations à peu près au moment où j’ai écrit cette réponse. Je ne suis donc pas sûr du bien-fondé de ma réponse avec row.getProperty(col.field) plus long… mais de toute façon, utilisez COL_FIELD et vous devriez pouvoir utiliser ng-grid et ui-grid .

Original (inchangé) Réponse:

Il vous suffit de définir un modèle de cellule pour le champ Lien…

Vous pouvez faire cela en ligne:

{
  field: 'href',
  displayName: 'Link',
  enableCellEdit: false,
  cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a href="{{row.getProperty(col.field)}}">Visible text</a></div>'
}

Ou vous pouvez le faire en utilisant une variable (pour garder vos gridOptions un peu plus propres:

var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
                       '  <a href="{{row.getProperty(col.field)}}">Visible text</a>' +
                       '</div>';

{
  field: 'href',
  displayName: 'Link',
  enableCellEdit: false,
  cellTemplate: linkCellTemplate
}

Ou vous pouvez même placer votre modèle dans un fichier HTML externe et pointer sur l'URL:

{
  field: 'href',
  displayName: 'Link',
  enableCellEdit: false,
  cellTemplate: 'linkCellTemplate.html'
}

… Et il vous suffit de stocker l'URL sous la forme href dans myData pour utiliser cette solution :)

Regardez ici pour un exemple de modèle de cellule.

36
Kabb5

La réponse donnée par Kabb5 est correcte, mais il semble que pour les versions plus récentes de ui-grid, cela ne fonctionne pas. Tout ce qui concerne le cellTemplate est valable, cependant, au lieu de

row.getProperty(col.field)

Tu as besoin de faire:

COL_FIELD

C'était la seule façon pour moi de faire en sorte que cela fonctionne.

2
Levi Rosol

Droite. 

Le {{COL_FIELD}} de Levi fonctionne avec angular-ui-grid 3.0.0-rc.20.

$scope.gridOptions.columnDefs = [
            { name: 'firstname' },
            { name: 'lastname'},
            { name: 'email', displayName: 'Email', allowCellFocus : false },
            {
              field: 'viewUrl',
              displayName: 'View',
              enableCellEdit: false,
              cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a ng-href="{{COL_FIELD}}" class="glyphicon glyphicon-eye-open green"></a></div>'
            },
            {
              field: 'editUrl',
              displayName: 'Edit',
              enableCellEdit: false,
              cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a ng-href="{{COL_FIELD}}" class="glyphicon glyphicon-pencil blue"></a></div>'
            },
            {
              field: 'id',
              displayName: 'Delete',
              enableCellEdit: false,
              cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="grid.appScope.deleteUser(COL_FIELD)" class="glyphicon glyphicon-remove red"></a></div>'
            }
        ];

$scope.deleteUser = function(userId) {
            alert('Delete '+userId);
          };
1
lapsoft

Pour obtenir la propriété de l'objet dans une ligne, il suffit d'utiliser row.entity.propertyName

1
Khasan 24-7

Cela a fonctionné pour moi avec ui-grid 4.0.7 et 1.6.6 angulaire, mes propriétés sont facilement accessibles dans row.entity : 

cellTemplate: '<div class="ngCellText">
                  <a href="Users/{{row.entity.userId}}">{{row.entity.name}}</a>
               </div>'

(ajout de sauts de ligne pour plus de clarté, à supprimer lors du collage)

0
Ekus