禁用火花数据网格中的几行

Question

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 datagrid 有没有办法做同样的事情？

Answer 1

我认为 spark datagrid 支持 gridrollover 事件。在此之下，我们可以得到

itemrender 我认为这可能适合你

更多参考请参考Documentation

Answer 2

好的，我就是这样做的

第一步

我创建了类 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、gridRollOver和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;
                    }
                }
            }
        }
    }
}