Dodaj link html w każdym z ng-grid

Chcę dodać link do ng-grid. Oto mój kod dla odniesieniaDodaj link html w każdym z 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>

Teraz siatki danych działa poprawnie z wyjątkiem href łącza w sieci. Link nie jest renderowany do znacznika HTML, jest wyświetlany jako zwykły ciąg znaków. chcę dodać link NG-grid z Mydata

Źródło

2013-08-19 rk_sweetrascal

Aktualizacja:

Stwierdzono, że ta odpowiedź nie działa z ui-grid. Jest to zrozumiałe, ponieważ w momencie odpowiedzi istniało tylko ng-grid; jednak podstawienie w miejsce {{row.getProperty(col.field)}} pozwala, aby roztwór był ważny zarówno dla ng-grid jak i ui-grid.

wiem wykorzystywane COL_FIELD w takich sytuacjach na całym raz pisałem tę odpowiedź, więc nie jestem pewien mojego uzasadnienie za odpowiedzi z dłuższym row.getProperty(col.field) & hellip; ale w żadnym wypadku używać COL_FIELD i powinno być dobrze idź z ng-grid i ui-grid.

Original (bez zmian) Odpowiedź:

Wystarczy zdefiniować szablon komórek na polu Link & hellip;

Można to zrobić 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>' 
}

Albo można to zrobić za pomocą zmiennej (aby utrzymać gridOptions trochę czystsze:

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 
}

Albo można nawet umieścić szablon w zewnętrzny plik HTML i punkt do adresu URL:

{ 
    field: 'href', 
    displayName: 'Link', 
    enableCellEdit: false, 
    cellTemplate: 'linkCellTemplate.html' 
}

& hellip; i trzeba tylko zapisać url s href w myData do pracy z tego rozwiązania :)

Look here for an example of a cell template.

Źródło

2013-08-19 16:36:16 Kabb5

kocham ostatni! – jmcollin92

Tak, użycie osobnego pliku HTML dla Twojego szablonu sprawia, że twoja JavaScript jest mniej zagracona i możesz uniknąć frustracji związanych z wycofywaniem cytatów ... zdecydowanie moją preferowaną metodą. – Kabb5

Aby użyć z ulepszoną siatką kątową UI, musiałem usunąć znaczniki DIV. Mój szablon komórki wyglądał wtedy tak: "Visible text". – devinbost

Odpowiedzią że Kabb5 dał jest poprawna, ale wydaje się, że są nowsze wersje UI-siatki, to nie działa. Wszystko odnośnie cellTemplate jest ważny, jednak zamiast

row.getProperty(col.field)

Co trzeba zrobić:

COL_FIELD

To był jedyny sposób udało mi się uzyskać to do pracy.

Źródło

2014-12-07 22:11:13

Dzięki za wskazanie to ... Dodałem aktualizację do mojej odpowiedzi, wspominając, że COL_FIELD może być użyty, aby rozwiązanie działało zarówno z ng-grid, jak i ui-grid – Kabb5

Dobrze.

Levi 's {{COL_FIELD}} współpracuje z 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); 
      };

Źródło

2015-03-10 08:25:47 lapsoft

Aby uzyskać właściwości obiektu w rzędzie, można po prostu użyć row.entity.propertyName

Źródło

2016-02-27 12:50:26

ten pracował dla mnie z UI-grid 4.0.7 i 1.6.6 kątowym, moi właściwości są łatwo dostępne w row.entity:

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

(dodana linia łamie dla jasności, należy usunąć podczas wklejania)

Źródło

2017-12-04 14:08:45 Ekus

Dodaj link html w każdym z ng-grid

Odpowiedz

Powiązane problemy