rk_*_*cal 19 angular-ui ng-grid
我想添加到ng-grid的链接.这是我的代码供您参考
<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的链接
Kab*_*bb5 36
更新:
已经注意到这个答案不起作用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.
原文(未更改)答案:
您只需要为"链接"字段定义单元格模板...
你可以内联这样做:
{
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'
}
...你只需要存储的URL作为href在myData此解决方案的工作:)
| 归档时间： |
|
| 查看次数： |
28935 次 |
| 最近记录： |