javascript - UI GRID - Custom Cell Templates Code Separation - Stack Overflow

admin管理员组

文章数量:1336192

I am trying to customize the cells using cellTemplates in UI-GRID. For this, I am defining templates in .js file, like this :

var template1 = '<div class="div1">{{COL_FIELD}}</div>';

var template2 = '<div class="div2">{{COL_FIELD}}</div>';

var template3 = '<div class="div3">{{COL_FIELD}}</div>';

I want to separate the HTML codes from .js file. Is there a way to define these templates separately in some .html file and using them in .js file. ?

Please Help.

I am trying to customize the cells using cellTemplates in UI-GRID. For this, I am defining templates in .js file, like this :

var template1 = '<div class="div1">{{COL_FIELD}}</div>';

var template2 = '<div class="div2">{{COL_FIELD}}</div>';

var template3 = '<div class="div3">{{COL_FIELD}}</div>';

I want to separate the HTML codes from .js file. Is there a way to define these templates separately in some .html file and using them in .js file. ?

Please Help.

• javascript
• html
• angularjs
• ng-grid
• angular-ui-grid

Share Improve this question Follow asked Jul 8, 2015 at 18:25 Rishi KatyalRishi Katyal 17566 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can use cellTemplate differents ways:

var columnDefs = [
  { field: 'name', cellTemplate: 'name-template.html' },
  { field: 'name', cellTemplate: 'myTemplateId' },
  { field: 'name', cellTemplate: $.get('url-to-your-template.html') }
];

Your template can contain:

<div class="ui-grid-cell-contents"><a href="mailto:{{ COL_FIELD }}">Send E-Mail</a></div>

You can achieve it by coding as mentioned below

<script type = "text/ng-template" id = "myTemplate.html">
  <div class="ui-grid-cell-contents"><a href="mailto:{{ COL_FIELD }}">Send E-Mail</a></div>
</script>

and then in your column definition provide the id mentioned for script tag in cellTemplate

var columnDefs = [
{ field: 'name', cellTemplate: 'myTemplate.html' }  
];

本文标签： javascriptUI GRIDCustom Cell Templates Code SeparationStack Overflow