Question

我正在使用新的Angular UI Grid（计划更换ng-grid）。我的数据在表格中显示之前需要一些格式化。例如，我的服务器返回一个名为＆＃34; status＆＃34;的属性。作为一个数字，但我想把它显示为一个好名字。

如果status = 1显示＆＃34; Todo＆＃34;，如果status = 2显示＆＃34;执行＆＃34;等

如何在UI Grid中完成？

Answer 1

现在首选的方法是使用cellFilter，而不是自定义模板。自定义模板没问题，但是在升级时会增加工作量 - 您必须检查新功能是否需要修改模板。

教程中有一个合理的过滤器示例：http://ui-grid.info/docs/#/tutorial/201_editable

请注意性别列上的cellFilter: 'mapGender'，以及教程中下面进一步定义的过滤器：

.filter('mapGender', function() {
  var genderHash = {
    1: 'male',
    2: 'female'
  };

  return function(input) {
    if (!input){
      return '';
    } else {
      return genderHash[input];
    }
  };
})

Answer 2

第一步，将cellTemplate添加到列中：

$scope.gridOptions.columnDefs = [
    {field:'status', displayName: 'Status',cellTemplate: 'statusTemplate.html'}
];

模板文件应该如下所示（COL_FIELD是实际字段）：

<div style="text-align: center">{{COL_FIELD==1 ? 'Todo' : 'Doing'"}}</div>

希望，你明白了！：）

Answer 3

最简单的方法是使用CellTemplate和appScopeProvider：

  vm.gridOptions = {
        columnDefs: [
            {
                field: 'status',
                cellTemplate: '<div>{{grid.appScope.formatStatus(row)}</div>'
            }
        ],
        appScopeProvider: {
            formatStatus: function (row) {
                return row.entity.status === 1 ? 'Todo' : 'Doing';
            },
        }
    }

UI网格 - 格式化数据

3 个答案: