2015-02-25 8 views
13

Quando si utilizzano più lettere maiuscole nelle celle dell'intestazione (ad esempio GPRS) vengono automaticamente separate da spazi (G P R S). Ciò diventa particolarmente fastidioso quando ho due parole (il segnale GPRS è visualizzato come segnale G P R S) o due acronimi (GPRS EDGE viene visualizzato come G P R S E D G E). Questo dovrebbe essere così? In tal caso, come posso disabilitarlo?UI angolare Spazio griglia tra lettere maiuscole nell'intestazione

+1

Sto avendo questo problema esattamente lo stesso con ui-grid v3.0.0-RC.18-e4b2293 - 2015/01/29 – bbak

risposta

30

Ho appena trovato un modo per aggirare questo. Nella proprietà columnDefs della tua grigliaOpzioni aggiungi un displayName per la colonna che contiene più lettere maiuscole. Qualcosa del genere:

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

Questo ha risolto il mio problema: l'aggiunta di un displayName fa il trucco . Grazie! –

+2

Anche per rispondere "È così che dovrebbe essere così?" parte della domanda - Sì, questa è l'impostazione predefinita in quanto consente di definire un nome di più parole nella definizione della colonna in ** [Camel Case] ​​(http://en.wikipedia.org/wiki/CamelCase) ** e deve essere visualizzato come parole distanziate nell'intestazione della colonna. – laurenOlga

+0

Fantastico! Grazie: D –

1

Per rispondere alla domanda: come posso disabilitarlo?

Ho modificato il codice sorgente. La mia applicazione utilizza una copia locale del file in lib/ui-grid.info-xxx/rilascio/ui-grid.js

Cercare la funzione chiamata "readableColumnName" e sostituire o commentare la seguente:

 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 '); 

In altre parole, è sufficiente restituire columnName, non eseguire alcuna sostituzione.

Non dimenticare di ricaricare i file pagina web/javascript prima di verificare che funzioni correttamente.

1

È inoltre possibile utilizzare la proprietà nome visualizzato nell'interfaccia utente dalla griglia: displayName: 'CAPITAL WORDS'

displayName: Nome della colonna che verrà mostrato nell'intestazione. Se displayName non viene fornito, ne viene generato uno utilizzando il nome.

DEMO