在ng网格的任何人中添加html链接。
我想添加到ng网格的链接。这是我的代码供你参考
<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>
现在，除了网格中的href链接之外，数据网格正在正常工作。链接没有呈现到html标记，而是显示为普通字符串。我想从myData添加到ng网格的链接。
回答 5
Stack Overflow用户
发布于 2013-08-19 16:36:16
更新：
已经注意到，这个答案不适用于ui-grid。这是可以理解的，因为在回答时只有ng-grid存在；但是，用{{COL_FIELD}}代替{{row.getProperty(col.field)}}可以使解决方案对ng-grid和ui-grid都有效。
我知道我在写这个答案的时候在这些情况下使用了COL_FIELD，所以我不确定我用更长的row.getProperty(col.field)…来回答的理由但是无论如何，请使用COL_FIELD，您应该可以很好地使用ng-grid和ui-grid。
原始(未更改)答案：
您只需要为Link…定义一个单元模板
您可以在内联中这样做：
{
field: 'href',
displayName: 'Link',
enableCellEdit: false,
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a href="{{row.getProperty(col.field)}}">Visible text</a></div>'
}也可以通过使用变量(以保持gridOptions更干净一点)来做到这一点：
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
}或者，您甚至可以将模板放在外部HTML文件中并指向URL：
{
field: 'href',
displayName: 'Link',
enableCellEdit: false,
cellTemplate: 'linkCellTemplate.html'
}…而且您只需要在href中将URL存储在myData中就可以使用以下解决方案:)
Look here for an example of a cell template.
Stack Overflow用户
发布于 2014-12-07 22:11:13
Kabb5给出的答案是正确的，但是对于新版本的ui网格，它似乎不起作用。但是，有关cellTemplate的所有内容都是有效的，而不是
row.getProperty(col.field)你得做：
COL_FIELD这是我唯一能让这件事起作用的方法。
Stack Overflow用户
发布于 2015-03-10 08:25:47
正确的。
Levi的{{COL_FIELD}}与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);
};https://stackoverflow.com/questions/18310007
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号