Ext 多层表头实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>Insert title here</title><link rel="stylesheet" type="text/css" href="../resources/libs/ext/resources/css/ext-all.css" /><script type="text/javascript" src="../resources/libs/ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="../resources/libs/ext/ext-all.js"></script><script type="text/javascript" src="../resources/ColumnHeaderGroup.js"></script><script type="text/javascript" src="../resources/examples.js"></script><!--注意css中的图片路径 否则效果问题--><link rel="stylesheet" type="text/css" href="../resources/ColumnHeaderGroup.css" /></head><body><div id="column-group-grid"></div></body><script type="text/javascript">Ext.onReady(function() { var structure = {//第二层表格数据 '': ['产品代码', '组合名称','具体单券','盯市净值'], 'VaR95%': ['绝对值', '占比'],'VaR97%':['绝对值', '占比'],'VaR99%':['绝对值', '占比'] }, products = ['ProductX', 'ProductY'], fields = [], columns = [], data = [], continentGroupRow = [], cityGroupRow = []; /* * Example method that generates: * 1) The column configuration for the grid * 2) The column grouping configuration * 3) The data for the store * 4) The fields for the store */ function generateConfig(){ var arr, numProducts = products.length;////////嵌套循环begin //定义第一层国家列 Ext.iterate(structure, function(continent, cities){//continent:代表Asia、Europe cities：代表Berlin、Londeon、Paris continentGroupRow.push({ header: continent, align: 'center', colspan: cities.length//制定占列数 });//定义第二层城市列 Ext.each(cities, function(city){ fields.push({ type: 'int', name: city + continent }); columns.push({ dataIndex: city + continent, header: city, renderer: Ext.util.Format.usMoney }); }); arr = []; for(var i = 0; i < 20; ++i){ arr.push((Math.floor(Math.random()*11) + 1) * 100000); } data.push(arr); }); } // Run method to generate columns, fields, row grouping generateConfig(); var group = new Ext.ux.grid.ColumnHeaderGroup({//插件 ：前面两层表头 rows: [continentGroupRow] }); var grid = new Ext.grid.GridPanel({ renderTo: 'column-group-grid', title: 'Sales By Location', width: 1000, height: 400, store: new Ext.data.ArrayStore({ fields: fields, data: data }), columns: columns, viewConfig: { forceFit: true }, plugins: group });});</script></html>