如何在ui-grid headers中显示带括号？

Question

我有一个 object 数组要像这样显示在 ui-grid 中。

JS

var arr = [{
    'Reference': 1,
    'Nominal load (daN)': 'xx',
    'Nominal static deflection (mm)': 'yy'
}, {
    'Reference': 2,
    'Nominal load (daN)': 'xx1',
    'Nominal static deflection (mm)': 'yy1'
}, {
    'Reference': 3,
    'Nominal load (daN)': 'xx2',
    'Nominal static deflection (mm)': 'yy2'
}];

$scope.gridOptions= arr;

HTML

 <div ui-grid=" {data: gridOptions}" class="grid"> </div>

但是我的 ui-grid 不显示第二列和第三列，因为 headers

中的括号 ( 'Nominal load (daN)' and 'Nominal static deflection (mm)' )

Answer 1

你可以这样做，这样 "field" 属性从要映射的对象映射到属性，并且可以使用 "displayName"提供自定义名称：

javascript:

 $scope.gridOptions = {
      columnDefs: [
        { field: 'Reference'
        },
        { field: 'Nominal load (daN)',
          displayName: 'Nominal load (daN)'
        },
        { field: 'Nominal static deflection (mm)',
          displayName: 'Nominal static deflection (mm)'
        }
       ],
      data: arr
   };

HTML:

<div ui-grid="gridOptions" class="grid"></div>

Answer 2

我刚刚在HTML中调用了'columnDefs'和'data'，然后我尝试用JS填充它。

HTML

<div ui-grid=" {data: gridOptions, columnDefs: gridColumns, enableColumnMenus: false}" ui-grid-pagination class="grid"> </div>

JS

$scope.setColumnDefs = function() {

      var columnDefs = [{
        field: 'ref',
        displayName: 'Référence'
      }, {
        field: 'charge',
        displayName: 'Charge nominale (daN)'
      }, {
        field: 'fleche',
        displayName: 'Flèche sous charge nominale (mm)'
      }];

    $scope.gridColumns = columnDefs;
  };
$scope.setColumnDefs();
$scope.gridOptions = data;

如何在ui-grid headers中显示带括号？

how to display with parentheses in ui-grid headers?

javascript

angularjs

angular-ui-grid