位置:首页 » 文章/教程分享 » easyui datagrid 多表头设置 合并

先看效果:

JS代码:

function orderDynaGridFrozen(){
  console.log("orderDynaGridFrozen.init");
  
  var sColumns = "";
  var sColumnsSize = "";
  var sFrozenColumns = "";
  
  var iColSize = 4;
  
	sColumnsSize = sColumnsSize + "{field:'SXS',title:'XS',colspan:"+iColSize+",width:160},";
	sColumnsSize = sColumnsSize + "{field:'SS',title:'S',colspan:"+iColSize+",width:160},";
	sColumnsSize = sColumnsSize + "{field:'SM',title:'M',colspan:"+iColSize+",width:160},";
	sColumnsSize = sColumnsSize + "{field:'SL',title:'L',colspan:"+iColSize+",width:160},";
	sColumnsSize = sColumnsSize + "{field:'SXL',title:'XL',colspan:"+iColSize+",width:160},";
	sColumnsSize = sColumnsSize + "{field:'SXXL',title:'XXL',colspan:"+iColSize+",width:160},";
	
	sFrozenColumns = sFrozenColumns + "[[";
	sFrozenColumns = sFrozenColumns + "{field:'pono',title:'PO号',width:80},";
	sFrozenColumns = sFrozenColumns + "{field:'country',title:'地区',width:100},";
	sFrozenColumns = sFrozenColumns + "{field:'colorno',title:'色号',width:80},";
	sFrozenColumns = sFrozenColumns + "{field:'colorname',title:'颜色名称',width:120},";
	sFrozenColumns = sFrozenColumns + "]]";
	
	sColumns = "[[";
	sColumns = sColumns + sColumnsSize;
	sColumns = sColumns + "],";
	
	sColumns = sColumns + "[";
	
	sColumns = sColumns + "{field:'SXS1',title:'订单数',width:40},";
	sColumns = sColumns + "{field:'SXS2',title:'浮动数',width:40},";
	sColumns = sColumns + "{field:'SXS3',title:'实裁数',width:40},";
	sColumns = sColumns + "{field:'SXS4',title:'实出数',width:40},";
	
	sColumns = sColumns + "{field:'SS1',title:'订单数',width:40},";
	sColumns = sColumns + "{field:'SS2',title:'浮动数',width:40},";
	sColumns = sColumns + "{field:'SS3',title:'实裁数',width:40},";
	sColumns = sColumns + "{field:'SS4',title:'实出数',width:40},";
	
	sColumns = sColumns + "{field:'SM1',title:'订单数',width:40},";
	sColumns = sColumns + "{field:'SM2',title:'浮动数',width:40},";
	sColumns = sColumns + "{field:'SM3',title:'实裁数',width:40},";
	sColumns = sColumns + "{field:'SM4',title:'实出数',width:40},";
	
	sColumns = sColumns + "{field:'SL1',title:'订单数',width:40},";
	sColumns = sColumns + "{field:'SL2',title:'浮动数',width:40},";
	sColumns = sColumns + "{field:'SL3',title:'实裁数',width:40},";
	sColumns = sColumns + "{field:'SL4',title:'实出数',width:40},";
	
	sColumns = sColumns + "{field:'SXL1',title:'订单数',width:40},";
	sColumns = sColumns + "{field:'SXL2',title:'浮动数',width:40},";
	sColumns = sColumns + "{field:'SXL3',title:'实裁数',width:40},";
	sColumns = sColumns + "{field:'SXL4',title:'实出数',width:40},";
	
	sColumns = sColumns + "{field:'SXXL1',title:'订单数',width:40},";
	sColumns = sColumns + "{field:'SXXL2',title:'浮动数',width:40},";
	sColumns = sColumns + "{field:'SXXL3',title:'实裁数',width:40},";
	sColumns = sColumns + "{field:'SXXL4',title:'实出数',width:40},";
	
	sColumns = sColumns + "]]";
	
	console.log('orderDynaGrid.sColumns...',sColumns);
	console.log('orderDynaGrid.sFrozenColumns...',sFrozenColumns);
	
	options={singleSelect:true};
	options.columns = eval(sColumns);
	options.frozenColumns = eval(sFrozenColumns);
	$('#dg_order7').datagrid(options);
}