Flex 4 DataGrid 實現垂直表頭（行表頭）佈局的技術方案

需求

DataGrid 默認橫向表頭，需求首列為字段名（垂直表頭），次列為數值。

方案對比

1. 數據轉置 + 普通 DataGrid：將原始行列互換後綁定，表頭自動變為字段名。缺點：數據結構改動大，排序/篩選邏輯需重寫。
2. 自定義 ItemRenderer：每行渲染為「標籤 + 輸入框」雙列佈局，數據源保持不變。優點：非侵入式，保留 DataGrid 原生功能。
3. 使用 AdvancedDataGrid + 分組：將字段作為分組字段，單行數據展開為多行。配置複雜。

推薦：自定義 ItemRenderer 實現

<mx:DataGrid dataProvider="{dp}">
    <mx:columns>
        <mx:DataGridColumn headerText="屬性" dataField="label" rendererIsEditor="true">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:Label text="{data.label}"/>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn headerText="值" dataField="value" editorDataField="text">
            <mx:itemEditor>
                <fx:Component>
                    <mx:TextInput text="{data.value}"/>
                </fx:Component>
            </mx:itemEditor>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

數據源格式：[{label:"姓名", value:"張三"}, {label:"年齡", value:28}]。

參考資源

百度知道：Flex 垂直表頭實現

總結

通過 ItemRenderer 將單行數據渲染為「鍵值對」雙列，以最小代價實現垂直表頭效果，保持 DataGrid 排序、編輯、選中等原生能力。