在任何 ng-grid 中添加 html 链接 [英] Add html link in anyone of ng-grid
问题描述
我想添加到 ng-grid 的链接.这是我的代码供您参考
<head lang="zh-cn"><meta charset="utf-8"><title>ngGrid 示例入门</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: "Link1</a>"},{ name: "Siva", age: 35, href: "Link1</a>"},{ name: "KK", age: 27, href: "Link1</a>"}];$scope.pagingOptions = {页面大小:[2, 4, 6],页面大小:2，当前页:1};$scope.gridOptions = {数据:'我的数据'，启用分页:真，显示页脚:真实，enableCellSelection: 真，enableRowSelection: 假，启用固定:真，pagingOptions: $scope.pagingOptions,enableCellEdit: 真,columnDefs: [{ field: 'name', displayName: 'Name', enableCellEdit: true },{ field: 'age', displayName: 'Age', enableCellEdit: true },{ field: 'href', displayName: 'Link', enableCellEdit: false }]};});<风格>.gridStyle {边框:1px 实心 rgb(212,212,212)；宽度:500px；高度:300px；}</风格><body data-ng-controller="MyCtrl"><div class="gridStyle" data-ng-grid="gridOptions"></div>现在数据网格工作正常，除了网格中的 href 链接.链接不会呈现为 html 标签，它显示为普通字符串.我想从 myData 添加到 ng-grid 的链接
更新:
已注意到此答案不适用于 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.
原文(不变)答案:
您只需要为链接字段定义一个单元格模板…
您可以内联执行此操作:
<代码>{字段:'href'，显示名称:'链接'，enableCellEdit: 假，cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a href="{{row.getProperty(col.field)}}">可见文本</a></div>'}或者你可以通过使用一个变量来做到这一点(让你的 gridOptions 更干净一点:
var linkCellTemplate = ''+' <a href="{{row.getProperty(col.field)}}">可见文本</a>'+'</div>';{字段:'href'，显示名称:'链接'，enableCellEdit: 假，单元格模板:链接单元格模板}或者您甚至可以将模板放在外部 HTML 文件中并指向 URL:
<代码>{字段:'href'，显示名称:'链接'，enableCellEdit: 假，cellTemplate: 'linkCellTemplate.html'}…您只需要在 myData 中将 URL 存储为 href 即可使用此解决方案:)
I want to add link to ng-grid.
Here is my code for your reference
<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>
Right now data grid is working fine except href link in grid.
Link is not rendered to html tag it is displayed as normal string.
I want to add link to ng-grid from myData
解决方案 Update:
It has been noted that this answer does not work with ui-grid. This is understandable since at the time of the answer only ng-grid existed; however, substituting {{COL_FIELD}} in place of {{row.getProperty(col.field)}} allows the solution to be valid for both ng-grid and ui-grid.
I know I used COL_FIELD in these situations around the time I wrote this answer, so I'm not sure of my rationale for answering with the longer row.getProperty(col.field)…but in any event, use COL_FIELD and you should be good to go with ng-grid and ui-grid.
Original (unchanged) Answer:
You just need to define a cell template for the Link field…
You can do this inline:
{
field: 'href',
displayName: 'Link',
enableCellEdit: false,
cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a href="{{row.getProperty(col.field)}}">Visible text</a></div>'
}
Or you can do this by using a variable (to keep your gridOptions a little cleaner:
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
}
Or you could even put your template in an external HTML file and point to the URL:
{
field: 'href',
displayName: 'Link',
enableCellEdit: false,
cellTemplate: 'linkCellTemplate.html'
}
…and you only need to store the URL as href in myData to work with this solution :)
Look here for an example of a cell template.
这篇关于在任何 ng-grid 中添加 html 链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
