`
yunzhongxia
  • 浏览: 648367 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

设置DataGrid的DataGridColumn的width

 
阅读更多

       DataGrid的column的width属性不接受百分比,只接受一个具体的像素值。但是可以设置为一个小数,所有列的小数值的和必须为1,其实还是可以设置百分比的。如果你resize 大小之后有时你会发现列的大小会发生细微的变化。因此这种方法设置列还是不精确的。

  

       导致这种原因是DataGrid在处理horizontalScrollPolicy写的不够严密造成的。

 

       我们可以大概看下mx中DataGrid的resize事件是怎么写的。

    

      

  override mx_internal function resizeColumn(col:int, w:Number):void
    {
        // there's a window of time before we calccolumnsizes
        // that someone can set width in AS
        if ((!visibleColumns || visibleColumns.length == 0) && (!visibleLockedColumns || visibleLockedColumns.length == 0))
        {
            _columns[col].setWidth(w);
            _columns[col].preferredWidth = w;
            return;
        }

        if (w < _columns[col].minWidth)
            w = _columns[col].minWidth;

        // hScrollBar is present
        if (_horizontalScrollPolicy == ScrollPolicy.ON ||
            _horizontalScrollPolicy == ScrollPolicy.AUTO)
        {
            // adjust the column's width
            _columns[col].setWidth(w);
            _columns[col].explicitWidth = w;
            _columns[col].preferredWidth = w;
            columnsInvalid = true;
        }
        else
        {
            // find the columns in the set of visible columns;
            var n:int = _columns.length;
            var i:int;
            for (i = 0; i < n; i++)
            {
                if (col == _columns[i].colNum)
                    break;
            }
            if (i >= _columns.length - 1)   // no resize of right most column
                return;
            col = i;

            // we want all cols's new widths to the right of this to be in proportion
            // to what they were before the stretch.

            // get the original space to the right not taken up by the column
            var totalSpace:Number = 0;
            var lastColumn:DataGridColumn;
            var newWidth:Number;
            //non-resizable columns don't count though
            for (i = col + 1; i < n; i++)
            {
                if (_columns[i].visible)
                    if (_columns[i].resizable)
                        totalSpace += _columns[i].width;
            }

            var newTotalSpace:Number = _columns[col].width - w + totalSpace;
            if (totalSpace)
            {
                _columns[col].setWidth(w);
                _columns[col].explicitWidth = w;
            }

            var totX:Number = 0;
            // resize the columns to the right proportionally to what they were
            for (i = col + 1; i < n; i++)
            {
                if (_columns[i].visible)
                    if (_columns[i].resizable)
                    {
                        newWidth = Math.floor(_columns[i].width
                                                    * newTotalSpace / totalSpace);
                        if (newWidth < _columns[i].minWidth)
                            newWidth = _columns[i].minWidth;
                        _columns[i].setWidth(newWidth);
                        totX += _columns[i].width;
                        lastColumn = _columns[i];
                    }
            }

            if (totX > newTotalSpace)
            {
                // if excess then should be taken out only from changing column
                // cause others would have already gone to their minimum
                newWidth = _columns[col].width - totX + newTotalSpace;
                if (newWidth < _columns[col].minWidth)
                    newWidth = _columns[col].minWidth;
                _columns[col].setWidth(newWidth);
            }
            else if (lastColumn)
            {
                // if less then should be added in last column
                // dont need to check for minWidth as we are adding
                lastColumn.setWidth(lastColumn.width - totX + newTotalSpace);
            }
        }
        itemsSizeChanged = true

        invalidateDisplayList();
    }

 

    注意上面红色字体的代码,你会发现如果horizontalScrollPolicy为off的时候,flex处理column宽度的时候是按照一种比例来计算的,并不是期待的那种方式。

  

    最后一列的宽度是表格的宽度减去前面所有列的宽度。而前面列是按照Math.floor取得百分比的值,这肯定就会产生一些差值。

 

    知道原因后,我们就可以知道如何解决这个问题了。

    方法一:重写resizeColumn

    方法二:监听DataGrid的resize事件,在resize事件中重新的设置cloumn的width。你可以按照第一次创建column宽度的算法重写设置。另外,如果你想写的完美的话,你可以同时支持固定值和百分比。

 

 

 

 

 

 

 

 

 

     

1
0
分享到:
评论

相关推荐

    flex 映射DataGrid,修改DataGridColumn显示值

    在Flex中,我们可以通过多种方式来定制DataGrid中的DataGridColumn的显示内容,例如更改显示的文本或者根据不同的条件显示不同的符号等。下面我们将详细探讨如何实现这些功能。 ### 1. 自定义DataGridColumn显示...

    WinCE下设置DataGrid的栏位宽度

    你可以通过遍历DataGrid的Columns集合来设置每个列的Width属性。例如,使用C#编写如下代码: ```csharp foreach (DataGridColumn column in dataGrid.Columns) { column.Width = new DataGridLength(100); // ...

    flex datagrid

    - MXML 方式:在 MXML 文件中,你可以直接通过 `&lt;mx:DataGrid&gt;` 标签创建 DataGrid,设置其位置和大小。例如: ```xml &lt;mx:DataGrid y="10" width="250" right="10"&gt; &lt;/mx:DataGrid&gt; ``` - ActionScript 方式...

    DataGrid自定义列标题

    通过设置DataGridColumn的HeaderStyle,可以应用自定义的样式,例如改变字体、颜色、大小等: ```xml &lt;DataGrid&gt; &lt;DataGrid.ColumnHeaderStyle&gt; &lt;/DataGrid.ColumnHeaderStyle&gt; ... &lt;/DataGrid&gt; ``` ...

    DataGrid 数据的拖动

    当设置为`true`时,用户可以将DataGrid中的行或单元格拖拽到另一个位置,如果是同一DataGrid内,则实现重排;如果目标是另一个DataGrid,则实现跨DataGrid的数据移动。 #### dragEnabled:Boolean `dragEnabled`...

    WPF根据xml配置文件加载DataGrid列.zip

    dataGridColumn.Width = width ?? DataGridLength.Auto; // 将新创建的列添加到DataGrid中 myDataGrid.Columns.Add(dataGridColumn); } ``` 在实际项目中,可能还需要考虑数据绑定、异常处理、以及如何根据XML...

    DataGrid表头合并和单元格内容合并-升级版

    1. **定义多层表头**:这可能需要创建多个DataGridColumn,并设置它们的Header属性来表示层级关系。同时,利用Column Span属性来控制表头跨越的列数。 2. **设置列宽和布局**:确保每个合并后的表头占据适当的宽度...

    wpf 动态合并datagrid表头单元格

    根据这个数量,我们可以动态地调整当前列的`Header`和`Width`属性,以及隐藏或显示相应的列。此外,还可以利用`DataTrigger`或`MultiDataTrigger`来控制何时合并表头。 5. **代码示例**: ```xml &lt;DataGrid&gt; ...

    flex动态生成datagrid表头

    3. **设置列数据**:通过遍历数据源,动态创建并添加DataGridColumn到DataGrid: ```actionscript for each (var column:Object in columns) { var dataGridColumn:DataGridColumn = new DataGridColumn(); ...

    Flex教程之DataGrid用法

    在ActionScript中,可以通过动态创建`DataGridColumn`对象并将其添加到`DataGrid`的`columns`属性中来设置表头。 ```actionscript var column1:DataGridColumn = new DataGridColumn(); column1.headerText = "序号...

    Flex DataGrid实现动态列,动态列值

    var dataGridColumn:... dataGridColumn.width=150; dataGridColumn.editable=false; var arrays:Array = new Array(); arrays= dataGrid.columns; arrays.push(dataGridColumn); dataGrid.columns = arrays;

    wpf datagrid排序列表头文字右边的升降箭头

    首先,`DataGrid`的排序功能主要依赖于`DataGridColumn`对象的`SortDirection`属性和`SortMemberPath`属性。`SortDirection`定义了当前的排序方向,可以是`Ascending`(升序)或`Descending`(降序)。`...

    flex组件之DataGrid高级用法实例源码

    例如,可以创建自定义的Column类,继承自mx.controls.dataGridClasses.DataGridColumn,然后设置headerText、dataField、width等属性,还可以添加renderFunction来自定义单元格的渲染。 2. **数据绑定** DataGrid...

    Flex教程DataGrid归类.pdf

    - 可以通过设置DataGrid的属性如宽度(width)、位置(x,y)和可编辑性(editable)来定义其外观和行为。 - 在MXML中创建DataGrid的格式通常包括指定标签 mx:DataGrid。 - DataGrid组件中可以嵌套使用其他组件,如 mx:...

    flex 自定义dataGrid渲染器.根据数据变色

    在DataGrid中,我们可以通过设置`itemRenderer`属性来指定特定列使用我们的自定义渲染器。例如: ```xml &lt;mx:DataGridColumn headerText="数据列" dataField="yourDataField" itemRenderer="utils....

    Flex使用弹出窗口为DataGrid添加新数据

    &lt;mx:DataGrid dataProvider="{dataGriddataProvider}" width="100%" height="100%"&gt; &lt;mx:DataGridColumn headerText="字段1" dataField="field1"/&gt; &lt;mx:DataGridColumn headerText="字段2" dataField="field2"/&gt;...

    WPF DataGrid

    2. 列宽调整:使用 `DataGridColumn.Width` 设置列宽策略,以优化渲染性能。 3. 使用 `ObservableCollection`:实时更新数据源,`DataGrid` 将自动响应变化。 综上所述,`WPF DataGrid` 是一个功能丰富的控件,它...

    ComboBox in DataGrid tutorial

    &lt;s:DataGrid id="dtGrid" width="100%" height="100%" itemRenderer="com.mycompany.renderers.ComboBoxRenderer"&gt; &lt;/s:DataGrid&gt; ``` #### 3. 实现ComboBoxRenderer 创建一个名为`ComboBoxRenderer`的新类,该类...

    改变flex DataGrid单元格字体颜色

    &lt;mx:MXGridColumn xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" creationComplete="init()"&gt; &lt;![CDATA[ override public function set data(value:Object):void { super.data = value; if (value ...

    Flex_全选或取消DataGrid中的checkbox

    &lt;mx:DataGridColumn headerText="选" itemRenderer="view.keiyakusakiCheckBox" width="50"/&gt; &lt;mx:DataGridColumn headerText="" dataField="keiyakusakiCode" width="100"/&gt; ``` 这里,`itemRenderer`属性指定了...

Global site tag (gtag.js) - Google Analytics