sban

在datagrid里最左边放一个checkbox框，用户可以单击checkbox的头全选，或者取消，不知道如何实现…

最近收到的一位同仁的询问，如上。实现代码简略如下：

various_of_itemRenderer_in_datagrid_and_checkBox.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;
			import mx.controls.dataGridClasses.DataGridListData;

			[Bindable]
			private var myXmlData : XML = <sites>
					<site selected="false" site="www.adobe.com" />
					<site selected="false" site="bbs.9ria.com" />
					<site selected="true" site="sban.biz" />
				</sites>;

			public function selectOneItem(row :int, selected :Boolean) :void
			{
				myXmlData.site[row].@selected = selected;
			}

			public function selectAllItems(selected :Boolean) :void
			{
				for each(var site : XML in myXmlData.site)
					site.@selected = selected;
			}
		]]>
	</fx:Script>

	<mx:DataGrid id="myDataGrid" sortableColumns="false" dataProvider="{ myXmlData.site}">
		<mx:columns>
			<mx:DataGridColumn width="50" headerText="" dataField="@selected"
				   headerRenderer="sban.flexPuzzles.DataGridItemCheckBoxHeaderRenderer"
				   itemRenderer="sban.flexPuzzles.DataGridItemCheckBoxRenderer" />
			<mx:DataGridColumn width="120" headerText="site" textDecoration="underline" dataField="@site" />
		</mx:columns>
	</mx:DataGrid>
</s:Application>

DataGridItemCheckBoxHeaderRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
	  xmlns:s="library://ns.adobe.com/flex/spark"
	  xmlns:mx="library://ns.adobe.com/flex/mx"
	  focusEnabled="false">
	<fx:Script>
		<![CDATA[
			import mx.binding.utils.BindingUtils;
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.events.FlexEvent;

			protected function checkbox1_changeHandler(event:Event):void
			{
				parentDocument.selectAllItems(event.target.selected);
			}
		]]>
	</fx:Script>
	<s:CheckBox id="myChkbox" change="checkbox1_changeHandler(event)" />
</s:MXDataGridItemRenderer>

DataGridItemCheckBoxRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
		  xmlns:s="library://ns.adobe.com/flex/spark"
		  xmlns:mx="library://ns.adobe.com/flex/mx"
		  focusEnabled="false">

	<fx:Script>
		<![CDATA[
			import mx.binding.utils.BindingUtils;
			import mx.controls.dataGridClasses.DataGridColumn;
			import mx.events.FlexEvent;

			protected function checkbox1_changeHandler(event:Event):void
			{
				parentDocument.selectOneItem(dataGridListData.rowIndex, event.target.selected);
			}

		]]>
	</fx:Script>
	<s:CheckBox id="myChkbox" selected="{dataGridListData.label == 'true'}"
				change="checkbox1_changeHandler(event)"/>
</s:MXDataGridItemRenderer>

sban 2010/6/30 转载请注明作者及出处 非商业。

• No Related Posts