Angular UI header 中大写字母之间的网格 space

Question

当我在 header 单元格（例如 GPRS）中使用多个大写字母时，它们会自动以空格分隔 (G P R S)。当我有两个单词（GPRS 信号显示为 G P R S 信号）或两个首字母缩略词（GPRS EDGE 显示为 G P R S E D G E）时，这会变得特别烦人。这意味着是这样的吗？如果是这样，我该如何禁用它？

Answer 1

我刚刚找到解决这个问题的方法。在您的 gridOptions 的 columnDefs 属性中，为包含多个大写字母的列添加一个 displayName。像这样：

$scope.gridOptions = {
  columnDefs: [
    { name: 'GPRS', displayName: 'GPRS', field: 'gprsField' }
  ]
};

Answer 2

回答问题：如何禁用它？

我修改了源代码。我的应用程序正在使用 lib/ui-grid.info-x.x.x/release/ui-grid.js

中文件的本地副本

搜索名为 "readableColumnName" 的函数并替换或注释掉以下内容：

      return columnName;
  //return columnName.replace(/_+/g, ' ')
    // Replace a completely all-capsed word with a first-letter-capitalized version
    //.replace(/^[A-Z]+$/, function (match) {
    //  return angular.lowercase(angular.uppercase(match.charAt(0)) + match.slice(1));
    //})
    // Capitalize the first letter of words
    //.replace(/([\w\u00C0-\u017F]+)/g, function (match) {
    //  return angular.uppercase(match.charAt(0)) + match.slice(1);
    //})
    // Put a space in between words that have partial capilizations (i.e. 'firstName' becomes 'First Name')
    // .replace(/([A-Z]|[A-Z]\w+)([A-Z])/g, " ");
    // .replace(/(\w+?|\w)([A-Z])/g, " ");
    //.replace(/(\w+?(?=[A-Z]))/g, ' ');

换句话说，只是return columnName，不做任何替换。

在测试它是否正常工作之前，请不要忘记重新加载 webpage/javascript 文件。

Answer 3

您还可以在 UI-Grid 中使用显示名称属性：displayName: 'CAPITAL WORDS'

displayName : Column name that will be shown in the header. If displayName is not provided then one is generated using the name.

DEMO

Angular UI header 中大写字母之间的网格 space

Angular UI Grid space between capital letters in header

javascript

grid

user-interface

angularjs

angular-ui-grid