Question

我需要你的帮助。

我有一个数据网格，它使用arraylist作为数据提供者。现在我的要求就是那个arraylist我有一个statusId作为一个变量或者说我在数据网格中显示为一个列的属性。现在我有另一个列，我必须显示三个链接，如编辑，删除和视图，这将基于statusid。你能给我一些想法或例子

吗？

Answer 1

我不是Flex专家，但通常当您想要自定义DataGrid中列的外观时，您可以使用ItemRenderer，如标记所示。在项呈示器中，您可以使用Label组件并设置一系列属性，使它们看起来像链接，然后根据您的条件启用/禁用它们。

以下是我头脑中的一些示例代码，其中包含以下警告：

我正在使用MX DataGrid而不是Spark DataGrid。

为方便起见，我使用的是内联项呈示器，但最好将项呈示器外部化为单独的MXML文件。

<mx:DataGrid id="dataGrid" dataProvider="{dataProvider}" ...>
    <mx:columns>
        <mx:DataGridColumn id="status_id_column" dataField="statusId" headerText="Status" />
        <mx:DataGridColumn id="action_column">
            <mx:itemRenderer>
                <fx:Component>
                    <mx:Label text="View" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
                    <mx:Label text="Edit" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
                    <mx:Label text="Delete" paddingLeft="10" useHandCursor="true" buttonMode="true" mouseChildren="false" enabled="Your condition goes here" />
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

Answer 2

感谢avik的帮助，这部分是正确的，因为我有很多条件，我不能把它放在启用属性。无论如何，我从我这边得到了解决方案：）

这是语法。

    <mx:HBox width="100%">
   <mx:DataGrid id="reportDataGrid" dataProvider="{reportDataGridArrayCollection}"
         variableRowHeight="true" editable="false" rowHeight="75"
         width="100%" height="400" allowDragSelection="false"
         draggableColumns="false" textAlign="center">
    <mx:columns>
     <mx:DataGridColumn sortable="false" dataField="reportId" resizable="false" headerText="" width="0.06" editable="false" textAlign="center"/>
          <mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="reportStatusId" headerWordWrap="true" headerText="Status" width="0.21">
     </mx:DataGridColumn>
     <mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="lockedByUser" headerWordWrap="true" headerText="Locked (Worked) By" width="0.10"/>

     <mx:DataGridColumn resizable="false" headerStyleName="centered" textAlign="left" dataField="" headerWordWrap="true" headerText="Acion" width="0.20">
      <mx:itemRenderer>
       <fx:Component>
        <mx:HBox textAlign="left" width="100%" creationComplete="init1()" > 
        <fx:Script> 
         <![CDATA[ 

          public function init1():void {
           if(data.reportStatusId==0) {
            viewLnk.visible = true;
            viewLnk.includeInLayout = true;
  // this is my condition which you can ignore....          if((data.entityId==1 || data.entityId==2 || data.entityId==3 || data.entityId==4)            ){
             editLnk.visible = true;
             editLnk.includeInLayout = true;
            }
           }
           if(data.reportStatusId==1 
             ) {
            editLnk.visible = true;
            editLnk.includeInLayout = true;
           }
           if(data.reportStatusId==2) {
            reviewLnk.visible = true;
            reviewLnk.includeInLayout = true;
           }
           if(data.reportStatusId==3) {
            saveXMLLnk.visible = true;
            saveXMLLnk.includeInLayout = true;
           }
          }
         ]]> 
        </fx:Script>
         <mx:LinkButton id="editLnk" visible="false" includeInLayout="false" label="Edit" click="outerDocument.editReport(data.reportId)"/>
         <mx:LinkButton id="viewLnk" visible="false" includeInLayout="false" label="View" click="outerDocument.viewReport(data.reportId)"/>
         <mx:LinkButton id="reviewLnk" visible="false" includeInLayout="false" label="Review" click="outerDocument.reviewReport(data.reportId)"/>
           <mx:LinkButton id="saveXMLLnk" visible="false" includeInLayout="false" label="Save XML" click="outerDocument.saveXMLReport(data.reportId)"/>

        </mx:HBox>
       </fx:Component>
      </mx:itemRenderer>
     </mx:DataGridColumn>
    </mx:columns>
   </mx:DataGrid>
  </mx:HBox>

带有条件链接的Flex Datagrid

2 个答案: