Question

如何在HTML或Angular ng-grid的重复单元格列中留空？

有一个返回2列的SQL：

SELECT country, city FROM t ORDER BY country

目前我正在使用Angular 1.2和https://github.com/angular-ui/ui-grid#v2.0.12 在浏览器中显示SQL结果：

Country   City
-------   ---- 
FRANCE    Paris
FRANCE    Lyon
ITALY     Rome
ITALY     Milan

我想隐藏重复的国家/地区名称（仅显示一次）。结果应该是这样的：

Country   City
-------   ---- 
FRANCE    Paris
          Lyon
ITALY     Rome
          Milan

我考虑了3个选项来实现这个目标：

1）在服务器端做额外的工作：而不是将SQL结果返回到前端进行数据按摩以消除结果中的重复国家

2）了解角度的ng-grid是否嵌入了此选项

3）不要使用ng-grid并使用Angular的ng-repeat来构建HTML表格......但仍无法找到删除重复项的方法

Answer 1

我会对数据进行一些操作，并将show值设置为true/false。之后，您可以编写一些自定义单元格模板：

$scope.myData = [
    {
        "country": "FRANCE",
        "city": "Paris",
        "show": true
    },
    {
        "country": "FRANCE",
        "city": "Lyon",
        "show": false
    },
    {
        "country": "ITALY",
        "city": "Rome",
        "show": true
    },
    {
        "country": "ITALY",
        "city": "Milan",
        "show": false
    }
];

var template = '<div class="grid-tooltip">' +
                        '    <div class="ui-grid-cell-contents" data-ng-if="row.entity.show">' +
                        '      {{ COL_FIELD }}' +
                        '    </div>' +
                        '  </div>';

$scope.gridOptions = {
  data:$scope.myData,
  columnDefs: [
    {
      name: 'country',
      displayName: 'Country',
      field: 'country',
      cellTemplate: template
    },
     {
      name: 'city',
      displayName: 'City',
      field: 'city'
    }
    ]
  }

Demo Plunker

它还将为您提供列排序的灵活性

根据SQL隐藏Angular表中的重复列值

1 个答案: