Flex 中的动态数据网格列

Posted 2023-02-22

【中文标题】Flex 中的动态数据网格列

【英文标题】：Dynamic datagrid columns in Flex

【发布时间】：2015-11-29 03:12:18

【问题描述】：

我的系统中有<mx:DataGrid>，如下所示。

<mx:DataGrid id="testDG">
  <mx:columns>
    <mx:DataGridColumn headerText="name" dataField="name">
    <mx:DataGridColumn headerText="measure" dataField="measure">
  </mx:columns>
</mx:DataGrid>

它有两列，name 和 measure。我想添加其他数量的列，它是数据网格中相对于measure 的数据。

所以，它看起来像：

name  measure  1-Aug  2-Aug   3-Aug ...

abc   ggggg    20      22      24   ...
xyz   fffff    21      19      20   ...
pqr   hhhhh    30      21      13   ...

...    ...     ...     ...     ...

我想动态添加date 明智的结果，后跟measure 列。 那么，有可能吗？如何在 Flex 中的度量之后添加动态列？

【参考方案1】：

这个怎么样？

// Get current columns here.
var cols: Array = grid.columns;

var col1:DataGridColumn = new DataGridColumn();
col1.headerText = "1-Aug";
col1.dataField = "foo";
cols.push(col1);

var col2:DataGridColumn = new DataGridColumn();
col2.headerText = "2-Aug";
col2.dataField = "baz";
cols.push(col2);

grid.columns = cols;

如果你想从 1-Aug 到 31-Aug 加上这些 datafield 就像 val1~val31，这样怎么样？

var cols: Array = grid.columns;
for (var i:int=1; i<=31;i++)
    var col:DataGridColumn = new DataGridColumn();
    col.headerText = i.toString()+"-Aug";
    col.dataField = "val"+i.toString();
    cols.push(col);

grid.columns = cols;

如果你想添加其他月份，你应该从日历中获取而不是静态的 31 值。

更新： 2015 年 10 月 1 日 16:40(JST)

spark.DataGrid 与 mx.DataGrid 略有不同。 这是 spark.DataGrid 的代码。

// Get current columns here.
var list: ArrayList = grid.columns as ArrayList;
var cols: Array = list.source;

var col: GridColumn = new GridColumn();
col.headerText = "1-Aug";
col.dataField = "foo";
cols.push(col);

// Redefine columns.
grid.columns = new ArrayList(cols);

<s:DataGrid id="grid">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="type" />
            <s:GridColumn dataField="name" />
        </s:ArrayList>
    </s:columns>
</s:DataGrid>

【讨论】：

这比我的解决方案更好，因为你在重复使用立柱，而我再次声明它们。

谢谢，火花数据网格可以做到这一点吗？

【参考方案2】：

DataGrid 具有属性columns。它可用于动态设置列。见例子：

var columns:Array = [];
var nameColumn:DataGridColumn = new DataGridColumn("name");
nameColumn.dataField = "name";
columns.push(nameColumn);
var measureColumn:DataGridColumn = new DataGridColumn("measure");
measureColumn.dataField = "measure";
columns.push(measureColumn);
var newColumn:DataGridColumn = new DataGridColumn("1-Aug");
newColumn.dataField = "1AugValue";
columns.push(newColumn);
...
dataGrid.columns = columns;

据我所知，当您需要更改列结构同时保留已经存在的列时，您需要创建新数组并再次声明已经存在的列。

【讨论】：

不，name, measure 列已经是静态的了。只想添加无限数量的date 动态列。

填充columns 属性使DataGrid 根据提供的数组重新创建其列。因此，假设您只提供 1-Aug 列，您实际上会丢失 name 和 measure 列。如果您只想添加1-Aug 列而不是触摸name 和measure 列，那么我会说这是不可能的。

但是日期列的数量是动态的。为此，我需要将其放入循环中。

这应该不是问题。您可能知道列数、它们的名称和数据字段。