Angular UI Grid表头大写字母之间的间距问题

Question

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

- Cox Szg

---

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

Answer 1

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

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

- bbak

---

同时回答问题中的“这是有意为之吗？”部分 - 是的，这是默认设置，因为它允许您在**驼峰式大小写**的列定义中定义一个多字名称，并在列标题中将其显示为间隔单词。 - laurenOlga

还有没有办法在不需要时关闭这个CamelCase函数？我的所有列名都是大写的，这会造成混乱。此外，我所有的列名都带有下划线，如果有相应的功能，那就太好了。 - redfox05

@Russell 我不知道有没有关闭这个CamelCase功能的方法。 - bbak

不幸的是，显示名称好像强制使用驼峰命名法，因此displayName: "Vehicle ID"总是显示为"Vehicle Id"，这很烦人。 - Andrei Drynov

我有动态列名，那么怎么办？ - Dodi

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

换句话说，只需返回列名，不要进行任何替换操作。

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

- rmg

Answer 3

你可以在UI-Grid中使用displayName属性：displayName: '大写字母'

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

演示

- cracker