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>