Dojox Datagrid, добавьте span в каждую ячейку, чтобы css nowrap работал в IE7

Поскольку элемент nowrap on td не работает в IE, см. этот вопрос, я отчаянно нуждаюсь в помощи, как добавить элемент span с nowrap в каждую ячейку в сетке данных Dojox без необходимости определять средства форматирования полей для достижения этой цели.

См. jsfiddle здесь http://jsfiddle.net/HkxHZ/4/

Используя этот css, я получаю то, что хочу в Chrome и FF, то есть без переноса слов и скрытого переполнения. Но это не работает в IE..

<style type="text/css">

.dojoxGridRowTable {
    table-layout: fixed;
    width: 0px;}

.dojoxGrid .dojoxGridCell {
    text-align: left;
    overflow:hidden;
    white-space:nowrap;}

</style>​

dojox.grid.datagrid
person andersarbast    schedule 06.12.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Этот метод похож на автоматический размер в том смысле, что ширина каждого столбца в DataGrid будет достаточно большой, чтобы отображать ваши данные без переноса.

Что вам нужно сделать, так это рассчитать правильную ширину для каждого столбца макета сетки на основе размера PX текста в описании столбца и данных для этого столбца. Это необходимо сделать перед созданием макета сетки.

Вот как вы получаете правильную ширину в px. Добавьте на свою страницу следующий HTML-код: css:

   #test
   {
   position: absolute;
   visibility: hidden;
   height: auto;
   width: auto;
   }

   <div id="test"></div>

1) Получите размер шрифта, используемый в вашем DataGrid

2) Получите объект div и установите размер шрифта в соответствии с тем, что используется в сетке.

   <div id="test"></div>

 var tst_item = window.document.getElementById("test");
 tst_item.style.fontSize = grid_fnt_sz;

3) Поместите описание каждого столбца и элемент данных, предназначенный для вашего DataGrid, в скрытый div:

 tst_item.innerHTML = "Your data";
 var widthPX = (tst_item.clientWidth + 1); //Width of text in PX

Сохраните этот widthPX в массиве для каждого столбца, сохраняя только самое большое значение, найденное для столбца.

4) При создании макета для вашей сетки установите ширину столбца на наибольшую ширину из описания столбца и данных для этого столбца.

Этот метод гарантирует, что ширина каждого столбца будет достаточно большой, чтобы отображать ваши данные без переноса. В зависимости от ваших потребностей вы можете настроить логику, чтобы делать то, что вам нужно. Это может быть невозможно при больших объемах данных. Но это прекрасно работает для меня.

person GoinOff    schedule 12.12.2012