标题中大写字母之间的角度 UI 网格空间答案

【问题标题】：Angular UI Grid space between capital letters in header标题中大写字母之间的角度 UI 网格空间
【发布时间】：2015-04-28 00:23:35
【问题描述】：

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

【问题讨论】：

我遇到了与 ui-grid v3.0.0-RC.18-e4b2293 - 2015-01-29 完全相同的问题

标签： javascript angularjs user-interface grid angular-ui-grid

【解决方案1】：

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

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

【讨论】：

这解决了我的问题：添加一个 displayName 就可以了。谢谢！
也回答“这就是这样的意思吗？”问题的一部分 - 是的，这是默认设置，因为它允许您在 Camel Case 的列定义中定义一个多字名称，并将其显示为列标题中的间隔字。
如果您不需要，有没有办法关闭这个 CamelCase 功能？我所有的列名都是大写字母，这会导致混乱。此外，我的所有列名都带有下划线，所以如果有这样的功能，那就太好了。
@Russell 我不知道有什么方法可以关闭这个 CamelCase 功能
我有动态列名，然后呢？

【解决方案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, "$1 $2");
    // .replace(/(\w+?|\w)([A-Z])/g, "$1 $2");
    //.replace(/(\w+?(?=[A-Z]))/g, '$1 ');

也就是说，只返回columnName，不做任何替换。

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

【讨论】：

【解决方案3】：

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

displayName ：将在标题中显示的列名。如果未提供 displayName 则使用该名称生成一个。

DEMO

【讨论】：