एनजी-ग्रिड

में से किसी भी में एचटीएमएल लिंक जोड़ें मैं एनजी-ग्रिड में लिंक जोड़ना चाहता हूं। यहाँ अभी डेटा ग्रिड ग्रिड में href लिंक को छोड़कर ठीक काम कर रहा है आपके संदर्भएनजी-ग्रिड

<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>

के लिए मेरे कोड है। लिंक एचटीएमएल टैग को प्रस्तुत नहीं किया जाता है जो इसे सामान्य स्ट्रिंग के रूप में प्रदर्शित किया जाता है। मैं MyData

से एनजी ग्रिड के लिए लिंक जोड़ना चाहते हैं

स्रोत

2013-08-19 rk_sweetrascal

अद्यतन:

यह है कि इस सवाल का जवाब ui-grid साथ काम नहीं करता उल्लेख किया गया है। यह समझ में आता है क्योंकि उत्तर के समय केवल ng-grid अस्तित्व में था; हालांकि, {{row.getProperty(col.field)}} के स्थान पर {{COL_FIELD}} को प्रतिस्थापित करने से समाधान ng-grid और ui-grid दोनों के लिए मान्य होने की अनुमति देता है।

मुझे लगता है मैं समय मैं इस जवाब लिखा चारों ओर इन स्थितियों में COL_FIELD इस्तेमाल किया पता है, तो मैं के साथ लंबे समय तक row.getProperty(col.field) है & hellip का जवाब देने के लिए मेरे औचित्य के बारे में सुनिश्चित नहीं हूँ, लेकिन किसी भी घटना में, COL_FIELD का उपयोग करें और आप के लिए अच्छा होना चाहिए ng-grid और ui-grid के साथ जाएं।

मूल (अपरिवर्तित) उत्तर:

तुम बस लिंक फ़ील्ड है & hellip के लिए एक सेल टेम्पलेट को परिभाषित करने की जरूरत है;

आप इस इनलाइन कर सकते हैं:

{ 
    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 फ़ाइल और यूआरएल को इंगित करें:

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

और नरक; और आपको केवल यूआरएल को स्टोर करने की आवश्यकता है myData में रों href इस समाधान के साथ काम करने के लिए :)

Look here for an example of a cell template.

स्रोत

2013-08-19 16:36:16 Kabb5

मैं पिछले एक से प्यार है! – jmcollin92

हां, आपके टेम्पलेट के लिए एक अलग HTML फ़ाइल का उपयोग करके आपकी जावास्क्रिप्ट कम अव्यवस्थित रहती है और आप उद्धरण से बचने की निराशा से बच सकते हैं ... निश्चित रूप से मेरी पसंदीदा विधि भी। – Kabb5

अपग्रेड किए गए कोणीय यूआई ग्रिड के साथ उपयोग करने के लिए, मुझे div टैग को हटाने की आवश्यकता थी। मेरा सेल टेम्पलेट तब इस तरह दिखता था: 'Visible text'। – devinbost

जवाब यह है कि Kabb5 दिया सही है, लेकिन ऐसा लगता है कि ui ग्रिड के नए संस्करण के लिए, यह काम नहीं करता। cellTemplate के बारे में सब कुछ वैध है, तथापि, के बजाय

row.getProperty(col.field)

आप क्या करने की जरूरत:

COL_FIELD

यही एक रास्ता है कि मैं इस काम करने के लिए प्राप्त करने में सक्षम था।

स्रोत

2014-12-07 22:11:13

इंगित करने के लिए धन्यवाद यह बाहर ... मैंने अपने जवाब में एक अपडेट जोड़ा है जिसमें यह उल्लेख किया गया है कि COL_FIELD का उपयोग एनजी-ग्रिड और यूई-ग्रिड दोनों के साथ समाधान करने के लिए किया जा सकता है – Kabb5

दाएं।

लेवी का {{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); 
      };

स्रोत

2015-03-10 08:25:47 lapsoft

एक पंक्ति में वस्तु की संपत्ति प्राप्त करने के लिए, एक बस का उपयोग कर सकते row.entity.propertyName

स्रोत

2016-02-27 12:50:26

इस के साथ ui ग्रिड 4.0.7 और कोणीय 1.6.6 मेरे लिए काम किया, मेरे गुण में आसानी से उपलब्ध हैं row.entity:

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

(जोड़ा लाइन स्पष्टता के लिए टूट जाता है, को दूर जब चिपकाने)

स्रोत

2017-12-04 14:08:45 Ekus

एनजी-ग्रिड

उत्तर

संबंधित मुद्दे