针对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();
}