基于单元格值的单元格模板

时间:2016-10-23 16:53:41

标签: angular-ui-grid celltemplate

我有一个带有第一列行的角度网格必须显示为锚链接或基于该单元格值的javascript条件的标签不会以字符“M'”开头。如果第1列的单元格值以字符' M'开头。列shpuld是一个标签,否则它应该是一个hyeprlink。我相信我必须使用两个不同的单元格模板,但不知道如何调用uigrid的行数据绑定事件。以下是代码。

锚和标签的模板:

var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
               '  <a  class="text-blue-color text-underline" href="' + getURL() + '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}&from=linkcomfort&Style=' + Style + '" target="_blank";">{{row.entity.TagNumber}}</a>' +
               '</div>';
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +
              '  <label>{{row.entity.TagNumber}}</label>' +
              '</div>';

下面是网格

        $scope.ComfortPlanGrid = {
        enableGridMenu: true,
        exporterMenuCsv: true,
        exporterMenuPdf: false,
        gridMenuShowHideColumns: true,
        enableRowSelection: false,
        enableColumnMenus: false,
        enableFiltering: false,
        enablePaging: false         

    };
    $scope.ComfortPlanGrid.columnDefs = config.headers.comfortPlansHeadersGrid;

以下是网格标题

   var headers = {
    comfortPlansHeadersGrid: [
        { field: 'TagNumber', width: 130, displayName: 'Claim Tag Nbr', cellTemplate: linkCellTemplate },
        { field: 'CustomerNumber', width: 200, displayName: 'Customer/Dealer' },
        { field: 'Status', width: 80, cellTooltip: true },
        { field: 'StatusDate', width: 175, displayName: 'Status Date' },
        { field: 'Description', displayName: 'Description', width: 270, cellTemplate: claimDetailTemplate },
        { field: 'ContractNumber', width: 200, displayName: 'Contract Number', headerTooltip: 'Contract Number' },
        { field: 'ServiceDate', width: 175, displayName: 'Service Date', headerTooltip: 'Service Date' }
    ]};

有关如何实现这一目标的任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:0)

请尝试以下代码:

在相关列的coldef中添加celltemplate

cellTemplate: DisplayConditionalTemplate(value)


function DisplayConditionalTemplate(value){
var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +'  <a  class="text-blue-color text-underline" href="' + getURL() + '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}&from=linkcomfort&Style=' + Style + '" target="_blank";">{{row.entity.TagNumber}}</a>' +                  '</div>';
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">'+'  <label>{{row.entity.TagNumber}}</label>' +                  '</div>';

if(value.charAt(0) === 'M')
   return labelCellTemplate;
else
  return linkCellTemplate;
}