angular ui - example - Añadir enlace html en cualquiera de ng-grid
link href angular (5)
Derecha.
El {{COL_FIELD}} Levi funciona con 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);
};
Quiero añadir enlace a ng-grid. Aquí está mi código para su referencia
<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>
En este momento, la cuadrícula de datos funciona bien, excepto el enlace href en la cuadrícula. El enlace no se representa en la etiqueta html, se muestra como una cadena normal. Quiero agregar un enlace a ng-grid desde myData
Esto me funcionó con ui-grid 4.0.7 y angular 1.6.6, mis propiedades son fácilmente accesibles en row.entity :
cellTemplate: ''<div class="ngCellText">
<a href="Users/{{row.entity.userId}}">{{row.entity.name}}</a>
</div>''
(agregados saltos de línea para mayor claridad, eliminar al pegar)
La respuesta que dio Kabb5 es correcta, pero parece que para las versiones más nuevas de ui-grid, no funciona. Todo lo relacionado con el cellTemplate es válido, sin embargo, en lugar de
row.getProperty(col.field)
Necesitas hacer:
COL_FIELD
Esta fue la única manera en que pude hacer que esto funcionara.
Para obtener la propiedad del objeto en una fila, solo se puede usar row.entity.propertyName
Actualizar:
Se ha observado que esta respuesta no funciona con ui-grid . Esto es comprensible ya que en el momento de la respuesta solo existía ng-grid ; sin embargo, sustituir {{COL_FIELD}} en lugar de {{row.getProperty(col.field)}} permite que la solución sea válida tanto para ng-grid como para ui-grid .
Sé que usé COL_FIELD en estas situaciones cuando escribí esta respuesta, por lo que no estoy seguro de mi razón para responder con la row.getProperty(col.field) más row.getProperty(col.field) ... pero en cualquier caso, use COL_FIELD y debería estar Bueno para ir con ng-grid y ui-grid .
Respuesta original (sin cambios) :
Solo necesita definir una plantilla de celda para el campo Enlace ...
Usted puede hacer esto en línea:
{
field: ''href'',
displayName: ''Link'',
enableCellEdit: false,
cellTemplate: ''<div class="ngCellText" ng-class="col.colIndex()"><a href="{{row.getProperty(col.field)}}">Visible text</a></div>''
}
O puede hacer esto usando una variable (para mantener sus opciones de cuadrícula un poco más limpias:
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
}
O incluso puedes poner tu plantilla en un archivo HTML externo y apuntar a la URL:
{
field: ''href'',
displayName: ''Link'',
enableCellEdit: false,
cellTemplate: ''linkCellTemplate.html''
}
… Y solo necesita almacenar la URL como href en myData para trabajar con esta solución :)