UI GRID - 自定义单元格模板代码分离

Question

我正在尝试使用 UI-GRID 中的 cellTemplates 自定义单元格。为此，我在 .js 文件中定义模板，如下所示：

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

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

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

我想将 HTML 代码从 .js 文件中分离出来。有没有办法在一些 .html 文件中单独定义这些模板并在 .js 文件中使用它们。？

请帮忙。

Answer 1

您可以使用 cellTemplate 不同的方式：

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

您的模板可以包含：

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

Answer 2

您可以通过如下编码实现

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

然后在您的列定义中提供在 cellTemplate

中为脚本标记提到的 ID

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

UI GRID - 自定义单元格模板代码分离

UI GRID - Custom Cell Templates Code Separation

html

javascript

angularjs

ng-grid

angular-ui-grid