Автоматическое изменение ширины DataGridCoulmn / AdvancedDataGridColumn для соответствия содержимому - PullRequest
Новая
       23

Автоматическое изменение ширины DataGridCoulmn / AdvancedDataGridColumn для соответствия содержимому

6 голосов
/ 21 мая 2010

Я хочу, чтобы DataGridColumn или AdvancedDataGridColumn автоматически меняли свою ширину, чтобы соответствовать содержимому в пределах.

Я новичок в flex.Я хочу реализовать что-то вроде таблиц HTML.

Представленные данные - это простой текст.Некоторые строки имеют немного более длинный текст, в этом случае я хотел бы автоматически увеличить ширину DataGridColumn.

Любая помощь, чтобы решить эту проблему.

Заранее спасибо

Ответы [ 4 ]

5 голосов
/ 21 мая 2010

Вы столкнулись с одной из самых больших проблем DataGrid и AdvancedDataGrid. Я абсолютно ненавижу, как тяжело, чтобы содержимое ячеек выглядело комфортно. По непонятным причинам узкие значения поля появятся в очень широких ячейках, а широкий контент и заголовки будут сокращены.

Это особенно верно для первого и последнего столбцов по некоторым причинам.

Единственное решение, которое я нашел, это установить свойство minWidth для столбцов, и мне нужно сначала просмотреть данные, чтобы найти самые широкие выбросы в этих столбцах и убедиться, что они подходят удобно. Другое решение, которое помогает, состоит в том, чтобы фиктивные столбцы слева и справа имели ширину, minWidths и maxWidths очень небольшого размера, скажем 5, что, кажется, позволяет реальным столбцам в середине «дышать» немного лучше. 1005 * 

<mx:columns>
  <mx:DataGridColumn id="leftDummy" width="5" minWidth="5" maxWidth="5"/>
  <!-- Your "real" columns here, with minWidth assignments -->
  <mx:DataGridColumn id="rightDummy" width="5" minWidth="5" maxWidth="5"/>
</mxcolumns>

Будьте осторожны, хотя. Если вы задаете ширину столбца, он интерпретируется не как буквальное значение или фактический процент, а как некая половинная пропорция. Я могу только предположить, что процедуры определения размера столбцов устали рассчитывать и основываться на какой-то «разумной» интерпретации ширины столбцов - что, конечно, оказывается в большинстве случаев совершенно необоснованным.

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

1 голос
/ 19 июля 2012

Вот как я это делаю, и это работает довольно хорошо ...

Создайте привязываемую переменную и дайте ей начальный номер (скажем, 100), например: 

[Bindable] private var colWidth:int = 100;

Используйте привязку данных для определения размера столбцов, например: 

mx:DataGridColumn width="{colWidth}"

Добавьте обработчик изменения размера в сетку данных, например: 

myDataGrid.addEventListener(ResizeEvent.RESIZE , onDataGridResize);

В обработчике прослушивайте новую ширинуСетка данных, возьмите это число и разделите его на количество столбцов (если все столбцы должны быть равны), или выполните некоторые математические расчеты, чтобы создать «процент» для ширины столбцов, например: 

private function onDataGridResize(event:ResizeEvent):void {
  colWidth = myDataGrid.width / numberOfColumns;
}
0 голосов
/ 05 июля 2011

У меня была такая же проблема, вы должны заранее знать размер вашей более длинной строки, затем назначить MinWidth этот размер и иметь столбец resizeable = 'false'.

у меня сработало

0 голосов
/ 21 мая 2010

Вы можете установить ширину в некоторый фиксированный процент, если вы можете угадать возможную ширину. Но я бы предложил другой вариант:

  1. установить для свойства variableRowHeight сетки данных значение true
  2. установить для свойства wordWrap столбца, который будет иметь более длинный текст, значение true.

Таким образом, ваш длинный текст будет помещен в несколько строк, и будет увеличена только высота строки. просто попробуйте. если вы этого не хотите, я думаю, что вам может понадобиться написать новый класс, расширяющий datagridColumn. 

<mx:DataGrid dataProvider="{testAC}" width="80%" height="100%" variableRowHeight="true">
         <mx:columns>
              <mx:DataGridColumn dataField="company" wordWrap="true"/>                    <mx:DataGridColumn dataField="share"/>
              <mx:DataGridColumn dataField="expense"/>
        </mx:columns>
 </mx:DataGrid>

Cheers, PK

...