问题描述
我想添加链接到ng-grid.这是我的代码供您参考
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>
目前，数据网格工作正常，除了网格中的href链接.链接未呈现到html标签，它显示为普通字符串.我想从myData添加到ng-grid的链接
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
推荐答案
更新:
已经注意到，该答案不适用于ui-grid.这是可以理解的，因为在回答时只有ng-grid存在；但是，用{{COL_FIELD}}代替{{row.getProperty(col.field)}}可以使该解决方案对于ng-grid和ui-grid均有效.
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.
我知道我在写此答案时就在这些情况下使用了COL_FIELD，因此我不确定使用更长的row.getProperty(col.field)…回答的理由，但无论如何，请使用COL_FIELD并ng-grid和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.
原始(未更改)答案:
您只需要为链接"字段定义一个单元格模板…
You just need to define a cell template for the Link field…
您可以内联:
{
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更加整洁:
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
}
或者您甚至可以将模板放在外部HTML文件中，然后指向URL:
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'
}
…并且您只需要在myData中将URL存储为href即可使用此解决方案:)
…and you only need to store the URL as href in myData to work with this solution :)
这篇关于在ng-grid的任何人中添加html链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！