今天碰到一個需求,查詢資料列表的列會根據查詢條件而變化.有多少組區域(區域1,區域2...),查詢結果就要有多少列區域數(區域1,區域2..),限制區域數最多5組.

網上搜索實踐後,發現最簡單的就是將會變動的列抽出來,使用columns:[dynamicColumn]來初始化.不變的列使用frozenColumns:[[{field:'test1',title:'',width:10,align:'center'}]]來初始化化.在查詢時,根據當前需要來重新給dynamicColumn賦值,其實dynamicColumn就是一個map,自己組裝.在資料載入成功後,執行$('#tt').datagrid({columns:[[dynamicColumn]]});

我們來看一下具體的例項

首先,初始化datagrid:

getDynamicColumn();
$('#tjDatagrid').datagrid({
          url: '',
          title: '軌跡統計',
          nowrap:false,
          rownumbers:true,
          striped:true,
          toolbar:'#toolbar',
          fitColumns:true,
          pageSize:20,
          pagination:true,
          frozenColumns:[[
          	   {field:'ck',title:'',width:fixWidth(0.08),align:'center', //checkbox:true,
   	 				formatter:function(value,row,index){
                        return '<input type="checkbox" name="checkId_son" id="'+row.GCXH+'" value="'+value+'" >';
			     }
       	  },	
		  {field:'hphm',title:'號牌號碼',width:fixWidth(0.12),align:'center'},
		  {field:'HPZLMC',title:'號牌種類',width:fixWidth(0.12),align:'center'},
		  {field:'HPYSMC',title:'號牌顏色',width:fixWidth(0.12),align:'center'}/* ,
		  {field:'WFXX',title:'違法資訊',width:fixWidth(0.12),align:'center',
		                  formatter:function(value,row,index){
		                    if(value==null){
		                      value=0; 
		                      return value;
		                    }
		                    return '<a href="#" class="link" onclick="jcbkComm.forwardViolation(\''+row.hphm+'\',\''+row.hpzl+'\');"><font color="red"><u>'+value+'</u></font></a>';
		                  }
		  	   		},
		          		{field:'OPERATION',title:'操作',width:fixWidth(0.12),align:'center',
			formatter:function(value,rec,index){
				return "<a href=\"javascript:queryGjImage('"+rec.hphm+"','"+rec.hpzl+"','"+rec.hpys+"')\"><img src='images/Iicon7.gif' title='圖片瀏覽'  /></a>"
			}
		  	   		} */
  	   ]],
 	   columns:[dynamicColumn],
       onClickRow:function (rowIndex,rowData){
           	$('#lastVehDiv').slideDown();
          	 	var fxlx= $('#g_fxlx').val();
           	var condition=$("#g_jsontext").val();
          		jcbkComm.lastVehDetail('lastVehDiv',rowData.hphm,rowData.hpzl,rowData.hpys,fxlx,condition);
        },
        onBeforeLoad:function (param) {
            tjkssj = new Date().getTime();
        },
        onLoadSuccess:function (data) {
       	    dynamicGjDatagrid();
            if(data.pagesign == "0") {
            tjjssj = new Date().getTime();
            $("#tjhs").html(formatFloat((tjjssj-tjkssj)/1000,1)+"秒");      
            }
        }  
});
 

		// 過載動態區域地段
		function dynamicGjDatagrid(){
			getDynamicColumn();
			$('#tjDatagrid').datagrid({
				columns:[dynamicColumn]
			});
		}

// 動態區域欄位組裝
function getDynamicColumn(){
	dynamicColumn.length = 0;
	for(var v=1; v<=k; v++){  
	    var column={};  
	    var field = "area"+v;
	    column["title"]="區域"+v;  
	    column["field"]=field;  
	    column["width"]=fixWidth(0.24/k);
	    column["align"]="center";
	    dynamicColumn.push(column);//當需要formatter的時候自己新增就可以了,原理就是拼接字串.  
	} 
	var columnWfxx={};  
	var field = "area"+v;
	columnWfxx["title"]="違法資訊";  
	columnWfxx["field"]="WFXX";  
	columnWfxx["width"]=fixWidth(0.12);
	columnWfxx["align"]="center";
	columnWfxx["formatter"]=function(value,row,index){
	             if(value==null){
	                 value=0; 
	                 return value;
	               }
	               return '<a href="#" class="link" onclick="jcbkComm.forwardViolation(\''+row.hphm+'\',\''+row.hpzl+'\');"><font color="red"><u>'+value+'</u></font></a>';
	             };
          dynamicColumn.push(columnWfxx);  
	var columnOpreation={};  
	var field = "area"+v;
	columnOpreation["title"]="操作";  
	columnOpreation["field"]="OPERATION";  
	columnOpreation["width"]=fixWidth(0.12);
	columnOpreation["align"]="center";
	columnOpreation["formatter"]=function(value,rec,index){
		return "<a href=\"javascript:queryGjImage('"+rec.hphm+"','"+rec.hpzl+"','"+rec.hpys+"')\"><img src='images/Iicon7.gif' title='圖片瀏覽'  /></a>"
	};
          dynamicColumn.push(columnOpreation);  
}
 

一開始的時候,我是在點選查詢後,就呼叫過載動態欄位dynamicGjDatagrid()方法.這樣不好.如果上次查詢區域數與當前查詢區域數不一樣,在查詢資料等待的過程中,由於表頭提前載入了,會導致頁面不和諧.所以把dynamicGjDatagrid()方法放在資料載入成功之後呼叫比較好.

在動態欄位組裝的方法getDynamicColumn()裡面, 每次要把dynamicColumn清空,將拼好的column push進去.但是你可以看到違法資訊和操作也作為動態的欄位了.其實這兩個是變的,但是要放到最後,所以我就直接拼到最後去了.你可以嘗試一下,看看怎麼能放到最開始的初始化裡面.