Question

我想添加到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的链接

Answer 1

<强>更新

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

我知道在我写这个答案的时候我在这些情况下使用了COL_FIELD，所以我不确定我用更长的row.getProperty(col.field)回答我的理由......但无论如何，请使用{ {1}}您最好使用COL_FIELD和ng-grid。

原创（未更改）答案：

您只需要为“链接”字段定义单元格模板...

您可以内联执行此操作：

ui-grid

或者你可以通过使用变量来做到这一点（以保持你的gridOptions更清洁：

{
  field: 'href',
  displayName: 'Link',
  enableCellEdit: false,
  cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a href="{{row.getProperty(col.field)}}">Visible text</a></div>'
}

或者您甚至可以将模板放在外部HTML文件中并指向URL：

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
}

...您只需将{ field: 'href', displayName: 'Link', enableCellEdit: false, cellTemplate: 'linkCellTemplate.html' }中的网址存储在href中即可使用此解决方案：）

Look here for an example of a cell template.

Answer 2

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

row.getProperty(col.field)

你需要这样做：

COL_FIELD

这是我能够让它发挥作用的唯一方式。

Answer 3

右。

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);
          };

Answer 4

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

Answer 5

这对我使用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>'

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

在任何ng-grid中添加html链接

5 个答案: