Как динамически установить ширину таблицы YUI-данных в зависимости от максимального размера столбца - PullRequest
Новая
       31

Как динамически установить ширину таблицы YUI-данных в зависимости от максимального размера столбца

3 голосов
/ 11 июля 2011

У меня есть таблица данных YUI, и я помещаю в таблицу следующие данные: 

 {key:"name", label:"name", editor: nameChoiceEditor},
 {key:"group", label:"group", editor: groupChoiceEditor},
 {key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor},
 ...

Здесь ширина столбца name устанавливается равной максимальной длине символов, введенных для этого имени, ато же самое с group.Ширина столбца colony установлена ​​равной 210 ​​независимо от длины данных.

Моя проблема в том, что столбец name, имеющий несколько слов, таких как "odaiah chitukuri", отображается в двух строках, например:так: 

  odaiah
  chitukuri

Но когда это одно слово типа «odaiahchitukuri», оно отображается в одной строке, что означает, что столбец корректируется, чтобы соответствовать слову.

У меня должно быть другоеслова в строкеКак это сделать?

Ответы [ 3 ]

3 голосов
/ 29 июля 2011

Заменить пробельные символы на неразрывные.

Попробуйте следующее:

Изменить: 

{key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor},

Кому: 

{key:"colony", label:"colony", width: 210, editor: colonyChoiceEditor
  formatter: function (el, oRecord, oColumn, oData) {
    el.innerHTML = oData.replace(/ /g, ' ');
  }
},
0 голосов
/ 29 июля 2011

В столбце с данными задайте:

  • будет width:100
  • не width:"100px"
  • или width:"100"
  • или width:"100em"

Используйте ширину: 100

вот так, тогда у меня все нормально работает

0 голосов
/ 20 июля 2011

Я не уверен, что вы ищете решение, которое всегда будет держать слова в одной строке ... но, вообще говоря, таблица данных хорошо справляется с правильным распределением столбцов на основе содержимого внутри.В некоторых случаях, хотя я определенно должен был установить ширину столбца вручную.Вот пример для столбца с классом appicon: 

.yui-skin-sam .yui-dt tbody td.appicon {
    width: 40px;
}

Запомните, как только число слов в столбце превысит заданный размер, оно всегда будет перемещаться на следующую строку.

...