读书人

设立DataGrid的DataGridColumn的width

发布时间: 2012-08-27 21:21:57 作者: rapoo

设置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宽度的算法重写设置。另外,如果你想写的完美的话,你可以同时支持固定值和百分比。

?

?

?

?

?

?

?

?

?

?????

读书人网 >Web前端

热点推荐