19

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

4

5 回答 5

36

更新：

已经注意到，此答案不适用于ui-grid. 这是可以理解的，因为在答案时只ng-grid存在；但是，替换{{COL_FIELD}}代替{{row.getProperty(col.field)}}允许解决方案对ng-grid和都有效ui-grid。

我知道我COL_FIELD在写这个答案的时候在这些情况下使用过，所以我不确定我用更长的时间回答的理由row.getProperty(col.field)……但无论如何，使用COL_FIELDand you should be good to go with ng-gridand 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此解决方案:)

在此处查看单元格模板的示例。

于 2013-08-19T16:36:16.243 回答
2

Kabb5给出的答案是正确的，但似乎对于较新版本的ui-grid，它不起作用。然而，关于 cellTemplate 的一切都是有效的，而不是

row.getProperty(col.field)

你需要做：

COL_FIELD

这是我能够让它工作的唯一方法。

于 2014-12-07T22:11:13.443 回答
1

Right.

Levi's {{COL_FIELD}} works with 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);
          };
于 2015-03-10T08:25:47.973 回答
1

要连续获取对象的属性，可以使用row.entity.propertyName

于 2016-02-27T12:50:26.443 回答
0

这对我来说适用于 ui-grid 4.0.7 和 angular 1.6.6，我的属性可以在row.entity中轻松访问：

cellTemplate: '<div class="ngCellText">
                  <a href="Users/{{row.entity.userId}}">{{row.entity.name}}</a>
               </div>'

（为清楚起见添加了换行符，粘贴时删除）

于 2017-12-04T14:08:45.073 回答