禁用spark数据网格中的几行



是否有一种方法在spark datagrid中以编程方式禁用某些行,在flex 3中,可以使用mouseEventToItemRenderer函数这样做:

override protected function mouseEventToItemRenderer (
            event: MouseEvent): IListItemRenderer {
    var listItem: IListItemRenderer;// = super.mouseEventToItemRenderer(event);
    if (_disableFlag) 
    {
        if (listItem) 
        {
            if (listItem.data) 
            {
                if (disabledRow(listItem.data)) 
                {
                    return null;
                }
            }
        }
    }
    return listItem;
}

然后我实现函数disabledRow,根据一些条件返回true或false,这些条件将指定所选项目是否会被呈现。有没有一种方法在spark数据网格做同样的?

我认为spark数据网格支持网格切换事件。下面我们可以得到

我想这个可能适合你。

更多参考请参考文档

我是这样做的

我创建了类SelectionIndicator, HoverIndicator和CaretIndicator,就像我们在数据网格皮肤中发现的皮肤部分一样,所以皮肤部分CaretIndicator:

<!--- @private -->        
<fx:Component id="caretIndicator">
    <s:Rect implements="spark.components.gridClasses.IGridVisualElement">
        <fx:Script>
            <![CDATA[
                import spark.components.DataGrid;
                import spark.components.Grid;
                /**
                 * @private
                 */
                public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
                {
                    const dataGrid:DataGrid = grid.dataGrid;
                    if (!dataGrid)
                        return;
                    const color:uint = dataGrid.getStyle("caretColor");
                    caretIndicatorFill.color = color;
                }
            ]]>
        </fx:Script>
        <s:stroke>
            <!--- @private -->
            <s:SolidColorStroke id="caretIndicatorFill" color="0x0167FF" weight="1"/>
        </s:stroke>
   </s:Rect>
</fx:Component>

package com.tn.zuro.components
{
    import mx.graphics.SolidColorStroke;
    import spark.components.DataGrid;
    import spark.components.Grid;
    import spark.components.gridClasses.IGridVisualElement;
    import spark.primitives.Rect;
    public class CaretIndicator extends Rect implements IGridVisualElement
    {
        private var caretIndicatorFill:SolidColorStroke ;
        public function CaretIndicator()
        {
            super();
            caretIndicatorFill = new SolidColorStroke();
            this.stroke = caretIndicatorFill;
        }
        public function prepareGridVisualElement(grid:Grid, rowIndex:int, columnIndex:int):void
        {
            const dataGrid:DataGrid = grid.dataGrid;
            if (!dataGrid)
                return;
            const color:uint = dataGrid.getStyle("caretColor");
            caretIndicatorFill.color = color;
        }
    }    
}

同样适用于SelectionIndicator和HoverIndicator,只是不要忘记使用SolidColor而不是solidColorStroke和属性fill或Rect而不是属性stroke。

第二步

在个性化数据网格中,我为gridClick、griddrollover和gridMouseDown事件添加了事件监听器:

this.addEventListener(GridEvent.GRID_CLICK, gridClickHandler);
this.addEventListener(GridEvent.GRID_ROLL_OVER, gridEventHandler);
this.addEventListener(GridEvent.GRID_MOUSE_DOWN, mouse_down_handler);

下面是事件监听器:

protected function mouse_down_handler(event:GridEvent):void
{
    if (_disableFlag)
    {
        if (event.item)
        {
            if (disabledRow(event.item))
            {
                event.grid.caretIndicator = null;
                event.grid.selectionIndicator = null;
            }
        }
    }
}
protected function gridClickHandler(event:GridEvent):void
{
    if (_disableFlag)
    {
        if (event.item)
        {
            if (!disabledRow(event.item))
            {
                event.grid.selectionIndicator = new ClassFactory(SelectionIndicator);
                event.grid.caretIndicator = new ClassFactory(CaretIndicator);
            }
        }
    }
}
protected function gridEventHandler(event:GridEvent):void
{
    if (_disableFlag)
    {
        if (event.item)
        {
            if(disabledRow(event.item))
            {   
                event.grid.hoverIndicator = null;
            }
            else
            {
                event.grid.hoverIndicator = new ClassFactory(HoverIndicator);
            }
        }
    }
}

你可能已经猜到_disableFlag和disabledRow分别是一个布尔值和一个函数。最后一步是最简单的:

第三步

当你使用个性化的dataGrid时,如果你想禁用列,你可以将_disableFlag设置为true,并实现disabledRow,如果满足条件返回true,如果不满足返回false

<custom:NinjaGrid id="ninja"
                 _disableFlag=true
                  creationComplete="ninja_trainingCompleteHandler(event)"/>

protected function ninja_trainingCompleteHandler(event:FlexEvent):void
{
    ninja.disabledRow = beNinja;
}
private function beNinja(ninja:Object):Boolean
{
    if (ninja.knowHowToWalkOnWater == true)
        return true;
    return false;
}

这个解决方案不适用于多行选择模式,我找到了另一个多行选择模式的解决方案。


第二方案

在这个解决方案中,我只使用HoverIndicator组件,翻转事件的事件监听器将保持不变。我不再使用click事件的事件侦听器,在mouse_down_handler函数中,我现在有以下代码:

protected function mouse_down_handler(event:GridEvent):void
{
    if(_disableFlag)
    {
        if (event.item)
        {
            if (!disabledRow(event.item))
            {
                if (!event.ctrlKey)
                {
                    tempItem = event.item;
                    tempSelecteditems = new Vector.<Object>();
                    tempSelecteditems.push(tempItem);
                }
                else
                {
                    if (tempSelecteditems.indexOf(event.item) < 0)
                    {
                        tempSelecteditems.push(event.item);
                    }
                    else
                    {
                        tempSelecteditems[tempSelecteditems.indexOf(event.item)] = null;
                    }
                }
            } 
            else
            {
                if (!event.ctrlKey)
                {
                    selectedItem = tempItem;
                    tempSelecteditems = new Vector.<Object>();
                } 
                else
                {
                    if (tempSelecteditems.length)
                    {
                        selectedItems = tempSelecteditems;
                    }
                    else
                    {
                        selectedItem = tempItem;
                    }
                }
            }
        }
    }
}

最新更新