Flex Datagrid 通过复选框动态添加行答案

【问题标题】：Flex Datagrid dynamically adding rows via checkboxexFlex Datagrid 通过复选框动态添加行
【发布时间】：2010-12-24 19:31:14
【问题描述】：

有谁知道如何通过复选框向数据网格添加新行。

示例：

  checkbox 1 : label (PS2)
  checkbox 2 : label (PS3)
  checkbox 3 : label (PSP)

通过选择一个或所有这些复选框，我可以添加一个新的 Datagrid 行。

  Datagrid

  Console           price
  row1 PS2           $20,
  row2 PS3           $30,
  row3 PSP           $15,

我希望这个例子足够清楚谢谢

【问题讨论】：

标签： apache-flex select datagrid checkbox

【解决方案1】：

从 CheckBox 的 change 事件处理程序将项目添加到 DataGrid 的 dataProvider - 确保检查现有项目（并在未选中复选框时删除它们）以避免重复。如果您可以发布 DataGrid 的代码，我们也许可以提供一个示例代码来展示如何做到这一点。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="create()">
    <mx:DataGrid id="dg" dataProvider="{dp}">
      <mx:columns>
        <mx:DataGridColumn dataField="console"/>
        <mx:DataGridColumn dataField="price"/>
      </mx:columns>
    </mx:DataGrid>
    <mx:CheckBox id="cb1" change="onCheck(event)"/>
    <mx:CheckBox id="cb2" change="onCheck(event)"/>
    <mx:CheckBox id="cb3" change="onCheck(event)"/>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            private var prices:Array = ["$20", "$30", "$15"];
            private var labels:Array = ["PS1", "PS2", "PS3"];
            private var checkBoxes:Array;
            [Bindable]public var dp:ArrayCollection;
            private function create():void
            {
                checkBoxes = [cb1, cb2, cb3];
                for(var i:Number = 0; i < labels.length; i++)
                    CheckBox(checkBoxes[i]).label = labels[i];
                dp = new ArrayCollection([]);
            }
            private function onCheck(event:Event):void
            {
                var cb:CheckBox = CheckBox(event.currentTarget);
                var index:Number = indexOf(cb.label);
                if(cb.selected && index == -1)
                    dp.addItem({console:cb.label, 
                        price:prices[labels.indexOf(cb.label)]});
                else if(!cb.selected && index != -1)
                    dp.removeItemAt(index);
            }
            private function indexOf(str:String):Number
            {
                for(var i:Number = 0; i < dp.length; i++)
                {
                    var item:Object = dp.getItemAt(i);
                    if(item.console == str)
                        return i;
                }
                return -1;
            }
        ]]>
    </mx:Script>
</mx:Application>

【讨论】：

感谢您的回答。我用过你的概念。我删除了价格变量。因为价格列的值设置为可编辑。价格可以由用户设置。但现在我被困在另一个问题上？我如何捕获这些行的值并将它们分别存储在它们的 onw var 中。因此意思是：将ps1价格的列值存储在var pricePS1中将ps2价格的列值存储在var pricePS2中将ps3价格的列值存储在var pricePS3等中，感谢您的帮助DJ