动态生成 DataGrid列

最新推荐文章于 2019-07-05 17:03:00 发布

liwea07

最新推荐文章于 2019-07-05 17:03:00 发布

阅读量470

点赞数

分类专栏： Flex

本文链接：https://blog.csdn.net/liwea07/article/details/24376595

版权

Flex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

针对Flex中DataGrid列的动态生成，如果使用 visible设置其true、false来显示时，进行多次显示、隐藏操作时将出现字段宽度不等，自动换行的问题，影响美观，下面就该问题整理如下：

第一：如遇显示、隐藏列较少的情况处理如下：

checkbox：

<mx:CheckBox id="dateCKB" label="按日期" click="checkBoxclick(event,'objVal1','时间',0,85)" selected="true" />
<mx:CheckBox id="areaCKB" label="按区域" click="checkBoxclick(event,'objVal2','区域',1,80)" selected="true"/>
<mx:CheckBox id="cityCKB" label="按地市" click="checkBoxclick(event,'objVal3','地市',2,75)"/>

DataGrid：

<mx:DataGrid id="pageResultGrid" width="100%" height="100%" minColumnWidth="100" allowMultipleSelection="true" wordWrap="true" variableRowHeight="true" dropEnabled="false" editable="false" textAlign="left" draggableColumns="false" resizableColumns="true" sortableColumns="true" dataProvider="{page.result}" >
<mx:columns>
<mx:DataGridColumn headerText="系统下发量"  dataField="objVal31" textAlign="left" />
<mx:DataGridColumn headerText="有效回复量" dataField="objVal32" textAlign="left" />
</mx:columns>
</mx:DataGrid>

checkbox 事件：

private var cols2:Array = new Array();//存储列
private function checkBoxclick(event:Event,dataField:String,headTxt:String,index:int,width:int):void{
	changeDataGridColumn(dataField,headTxt,index,width);
}
private function changeDataGridColumn(dataField:String,headTxt:String,index:int,width:Number):void { 
				var dgc:DataGridColumn = new DataGridColumn(headTxt); 
				dgc.dataField = dataField;
				dgc.width = width;
				dgc.minWidth = width;
				//添加姓名列
				var dgc1:DataGridColumn = new DataGridColumn("姓名"); 
				dgc1.dataField = "objVal8";
				dgc1.width = 65;
				dgc1.minWidth = 65;
				if(cols2.length == 0){
					if(index == 4){//工号在列表中的位置
						cols2.push({id:index,value:dgc,width:width});
						cols2.push({id:index+1,value:dgc1,width:65});
					}else{
						cols2.push({id:index,value:dgc,width:width});
					}
				}else{
					var isHere:Boolean = false;
					for(var i:int=0;i<=cols2.length-1;i++){
						if(cols2[i].id == index){
							isHere = true;
							if(index == 4){
								cols2.splice(i,2);
							}else{
								cols2.splice(i,1);
							}
							break;
						}
					}
					if(!isHere){
						if(index == 4){
							cols2.push({id:index,value:dgc,width:width});
							cols2.push({id:index+1,value:dgc1,width:65});
						}else{
							cols2.push({id:index,value:dgc,width:width});
						}
					}
				}
				
				cols2.sortOn("id",Array.NUMERIC);//数组排序
			}

creationComplete 事件：

protected function creationHandle(event:FlexEvent):void{// 默认加载时间、区域列
				changeDataGridColumn("objVal1","时间",0,85);
				changeDataGridColumn("objVal2","区域",1,80);
				setColumn();
			}
private function setColumn(){
				if(pageResultGrid.columns.length != 24){//原dataGrid的列数
					var dgcols:Array = pageResultGrid.columns.splice(pageResultGrid.columns.length-24,24); 
				}else{
					var dgcols:Array = pageResultGrid.columns; 
				}
				var totalWidth:int = 0;
				for(var j:int=cols2.length-1;j>=0;j--){
					if(cols2[j].value != ""&& cols2[j].value != null){
						dgcols.unshift(cols2[j].value);//将要显示的列依次加到已有列前面
						totalWidth += cols2[j].width;
					}
				}
				pageResultGrid.columns = dgcols;
				pageResultGrid.validateNow();
//				pageContext.initComponent();
			}

第二：如遇显示、隐藏列较多的情况处理如下：
checkbox：

<mx:CheckBox label="2" id="checkw2" />
<mx:CheckBox label="3" id="checkw3" />
<mx:CheckBox label="4" id="checkw4" />
<mx:CheckBox label="5" id="checkw5"/>
<mx:CheckBox label="6" id="checkw6"/>
<mx:CheckBox label="7" id="checkw7"/>
<mx:CheckBox label="8" id="checkw8"/>

dataGrid：

<mx:DataGrid id="pageResultGrid"  height="100%" width="100%" allowMultipleSelection="true" wordWrap="true" variableRowHeight="true" dropEnabled="false" editable="false" textAlign="left" draggableColumns="false" resizableColumns="true" sortableColumns="true" dataProvider="{page.result}" >
<mx:columns>
<mx:DataGridColumn headerText="序号" dataField="objVal1" textAlign="left" width="55" />
<mx:DataGridColumn headerText="日期" dataField="objVal20" textAlign="left" width="70"/>
<mx:DataGridColumn headerText="回复量" id="headTxt1" dataField="objVal11" textAlign="left" width="80" />
</mx:columns>
</mx:DataGrid>

datashow:
/**数据展示*/

private function dataShow(evt:CommonEvent):void{
				page = evt.data as Page;
				
				var headArr:ArrayList = new ArrayList();
				headArr.addItem("序号");
				headArr.addItem("日期");
				if(checkw2.selected) {
					headArr.addItem("2);
				}
				if(checkw3.selected) {
					headArr.addItem("3");
				}
			    if(checkw4.selected) {
					headArr.addItem("4");
				}
				if(checkw5.selected) {
					headArr.addItem("5");
				}
				if(checkw6.selected) {
					headArr.addItem("6");
				}
				if(checkw7.selected) {
					headArr.addItem("7");
				}
				if(checkw8.selected) {
					headArr.addItem("8");
				}
				if(check01.selected){
					headArr.addItem("01");
				}
				if(check02.selected){
					headArr.addItem("02");
				}
				if(check03.selected){
					headArr.addItem("03");
				}
				if(check04.selected){
					headArr.addItem("04");
				}
				if(check05.selected){
					headArr.addItem("05");
				}
				if(check06.selected){
					headArr.addItem("06");
				}
				if(check07.selected){
					headArr.addItem("07");
				}
				
				pageResultGrid.dataProvider = null;
				pageResultGrid.columns = new Array();
				var tmpWidth:int = 0;
				var i:int=0;
				for(i=0;i<headArr.length;i++) {
					var dgc:DataGridColumn = new DataGridColumn();
					dgc.headerText = ""+headArr.getItemAt(i);
					if(dgc.headerText == "序号") {
						dgc.dataField = "objVal1";
						dgc.width = 55;
						tmpWidth = tmpWidth + 55;
					} else if(dgc.headerText == "日期") {
						dgc.dataField = "objVal20";
						dgc.width = 85;
						tmpWidth = tmpWidth + 85;
					} else if(dgc.headerText == "2") {
						dgc.dataField = "objVal2";
						dgc.width = 80;
						tmpWidth = tmpWidth + 80;
					} else if(dgc.headerText == "3") {
						dgc.dataField = "objVal3";
						dgc.width = 75;
						tmpWidth = tmpWidth + 75;
					} else if(dgc.headerText == "4") {
						dgc.dataField = "objVal4";
						dgc.width = 80;
						tmpWidth = tmpWidth + 80;
					} else if(dgc.headerText == "6") {
						dgc.dataField = "objVal6";
						dgc.width = 150;
						tmpWidth = tmpWidth + 150;
					} else if(dgc.headerText == "7") {
						dgc.dataField = "objVal7";
						dgc.width = 95;
						tmpWidth = tmpWidth + 95;
					} else if(dgc.headerText == "8") {
						dgc.dataField = "objVal8";
						dgc.width = 85;
						tmpWidth = tmpWidth + 85;
					} else if(dgc.headerText == "9") {
						dgc.dataField = "objVal9";
						dgc.width = 80;
						tmpWidth = tmpWidth + 80;
					} else if(dgc.headerText == "01") {
						dgc.dataField = "objVal11";
						dgc.width = 90;
						tmpWidth = tmpWidth + 90;
					} else if(dgc.headerText == "02") {
						dgc.dataField = "objVal12";
						dgc.width = 90;
						tmpWidth = tmpWidth + 90;
					} else if(dgc.headerText == "33") {
						dgc.dataField = "objVal13";
						dgc.width = 90;
						tmpWidth = tmpWidth + 90;
					} else if(dgc.headerText == "04") {
						dgc.dataField = "objVal14";
						dgc.width = 90;
						tmpWidth = tmpWidth + 90;
					} else if(dgc.headerText == "05") {
						dgc.dataField = "objVal15";
						dgc.width = 90;
						tmpWidth = tmpWidth + 90;
					} else if(dgc.headerText == "06") {
						dgc.dataField = "objVal16";
						dgc.width = 90;
						tmpWidth = tmpWidth + 90;
					} else if(dgc.headerText == "07") {
						dgc.dataField = "objVal17";
						dgc.width = 90;
						tmpWidth = tmpWidth + 90;
					} 
					dgc.setStyle("textAlign","left");
					pageResultGrid.columns = pageResultGrid.columns.concat(dgc);
				}
				pageResultGrid.dataProvider = page.result;
				
				pageResultGrid.rowCount = pageContext.page.pageSize;
				
				pageResultGrid.percentWidth = 100;
				pageResultGrid.minWidth = tmpWidth;
				
				pageResultGrid.validateNow();
				pageContext.initComponent();
			}