EOS datagrid中如何实现动态表头

【场景描述】：

datagrid中根据日期不同需要动态显示表头（且有单元格合并项），表格中的数据列是非动态的，比如我要看2015年的某公司财报数据，也要看2016年的财报数据，想在同一个表格中实现.效果如下图：

【解答】

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" session="false"%>
<%@ page import="java.util.Date,java.text.SimpleDateFormat" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
String date = df.format(new Date()).toString();
String year = date.substring(0,4);
%>

<head>
<title>报表查询</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="<%=request.getContextPath()%>/common/nui/nui.js"
type="text/javascript">

</script>
</head>
<body style="width: 98%; height: 95%;">
<div align="center">
<h1>集团（股份）公司控股、参股子公司基本情况一览表</h1>
</div>
<div align="right" class="" id="form1">
日期 <input class="nui-datepicker" format="yyyy-MM-dd" id="date" />  <a
class="nui-button" onclick="search" iconCls="icon-find">查询</a>
</div>
<div class="nui-fit">

<div id="datagrid1" showPager="false" ondrawgroup="onDrawGroup"
dataField="guquaninforeports" class="nui-datagrid"
style="width: 100%; height: 100%;"
url="guquan.baseinforeportbiz.queryBaseInfoReports.biz.ext"
pageSize="10" showPageInfo="true"
onselectionchanged="selectionChanged" allowSortColumn="false">
<div property="columns">
<div type="indexcolumn"></div>
<div field="orgid" headerAlign="center" allowSort="true">企业名称</div>
<div field="zczb" headerAlign="center" allowSort="true">
注册资本（万元）</div>
<div field="dictname" headerAlign="center" renderer="onGljcRenderer" allowSort="true">
级次</div>
<div field="cgbl" headerAlign="center" allowSort="true">
持股比例（%）</div>
<div field="zzc" headerAlign="center" allowSort="true">
总资产（万元）</div>
<div field="jzc" headerAlign="center" allowSort="true">
净资产（万元）</div>
<div field="cstz" headerAlign="center" allowSort="true">
初始投资时间</div>
<div field="ljtz" headerAlign="center" allowSort="true">
累计投资（不含分红转增）</div>
<div header="收入（万元、税前）" headerAlign="center">
<div property="columns">
<div field="qnsrje" headerAlign="center" allowSort="true">
<%=Integer.parseInt(year)-2 %>年</div>
<div field="fnsrje" headerAlign="center" allowSort="true">
<%=Integer.parseInt(year)-1 %>年</div>
<div field="dnsrje" headerAlign="center" allowSort="true">
<%=year %></div>
</div>
</div>
<div header="利润（万元、税前）" headerAlign="center">
<div property="columns">
<div field="qnlrje" headerAlign="center" allowSort="true">
<%=Integer.parseInt(year)-2 %>年</div>
<div field="fnlrje" headerAlign="center" allowSort="true">
<%=Integer.parseInt(year)-1 %>年</div>
<div field="dnlrje" headerAlign="center" allowSort="true">
<%=year %></div>
</div>
</div>
<div header="现金分红情况（万元）" headerAlign="center">
<div property="columns">
<div field="qnfhje" headerAlign="center" allowSort="true">
<%=Integer.parseInt(year)-2 %>年</div>
<div field="fnfhje" headerAlign="center" allowSort="true">
<%=Integer.parseInt(year)-1 %>年</div>
<div field="dnfhje" headerAlign="center" allowSort="true">
<%=year %></div>
<div field="fhjehj" headerAlign="center" allowSort="true">
总计</div>
</div>
</div>
<div field="bz" headerAlign="center" allowSort="true">备注</div>
</div>
</div>
</div>
<script type="text/javascript">
nui.parse();
var grid = nui.get("datagrid1");
grid.setFrozenStartColumn(0);
grid.setFrozenEndColumn(8);
nui.get("date").setValue("<%=date %>");
grid.load({"year":"<%=year%>"});
grid.groupBy("dictname","asc");
var GljcGroup = [ {
id : '一级（集团公司）',
text : '集团公司'
}, {
id : '二级（集团控股）',
text : '集团控股子公司'
}, {
id : '二级（集团参股）',
text : '集团参股子公司'
}, {
id : '三级（集团控股下属控股）',
text : '股份控股子公司'
}, {
id : '三级（集团控股下属参股）',
text : '股份参股子公司'
}, {
id : '四级（集团控股下属控股、参股的下属公司）',
text : '股份下属公司）'
}, {
id : '(五级)',
text : '(五级)'
} ];
var Gljc = [ {
id : '一级（集团公司）',
text : '集团公司'
}, {
id : '二级（集团控股）',
text : '集团控股子公司'
}, {
id : '二级（集团参股）',
text : '集团参股子公司'
}, {
id : '三级（集团控股下属控股）',
text : '股份控股子公司'
}, {
id : '三级（集团控股下属参股）',
text : '股份参股子公司'
}, {
id : '四级（集团控股下属控股、参股的下属公司）',
text : '股份下属公司）'
}, {
id : '(五级)',
text : '(五级)'
} ];
function getGljcText(id) {
for (var i = 0, l = 6; i < l; i++) {
var g = Gljc[i];
if (g.id == id) return g.text;
}
return "";
}
function onGljcRenderer(e) {
return getGljcText(e.value);
}
function onDrawGroup(e) {
e.cellHtml = getGljcGroupText(e.value);
}
function getGljcGroupText(id) {
for (var i = 0, l = 6; i < l; i++) {
var g = GljcGroup[i];
if (g.id == id) return g.text;
}
return "";
}

//重新刷新页面
function refresh() {
grid.load();//grid查询
nui.get("update").enable();
}

//查询
function search() {
var date = nui.get("date").getFormValue();
var year = date.substr(0, 4);
var qn = year - 2;
var fn = year - 1;
grid.set({
columns: [
{ type: "indexcolumn" },
{ field: "orgid", headerAlign: "center", allowSort: true, header: "企业名称"},
{ field: "zczb", headerAlign: "center", allowSort: true, header: "注册资本（万元）"},
{ field: "dictname",headerAlign: "center",allowSort: true, header: "级次",renderer:"onGljcRenderer"},
{ field: "cgbl", headerAlign: "center", allowSort: true, header: "持股比例（%）"},
{ field: "zzc", headerAlign: "center", allowSort: true, header: "总资产（万元）"},
{ field: "jzc", headerAlign: "center", allowSort: true, header: "净资产（万元）"},
{ field: "cstz", headerAlign: "center", allowSort: true, header: "初始投资时间" },
{ field: "ljtz", headerAlign: "center", allowSort: true, header: "累计投资（不含分红转增）"},
{ header:"现金分红情况（万元）",headerAlign:"center",columns:[
{ field: "qnsrje", headerAlign: "center", allowSort: true, header: qn+"年",},
{ field: "fnsrje", headerAlign: "center", allowSort: true, header: fn+"年" },
{ field: "dnsrje",headerAlign: "center",allowSort: true, header: year+"年"}
]},
{ header:"利润（万元、税前）",headerAlign:"center",columns:[
{ field: "qnlrje", headerAlign: "center", allowSort: true, header: qn+"年"},
{ field: "fnlrje", headerAlign: "center", allowSort: true, header: fn+"年" },
{ field: "dnlrje", headerAlign: "center", allowSort: true, header: year+"年"}
]},
{ header:"现金分红情况（万元）",headerAlign:"center",columns:[
{ field: "qnfhje", headerAlign: "center", allowSort: true, header: qn+"年"},
{ field: "fnfhje", headerAlign: "center", allowSort: true, header: fn+"年"},
{ field: "dnfhje", headerAlign: "center", allowSort: true, header: year+"年"},
{ field: "fhjehj", headerAlign: "center", allowSort: true, header: "分红合计" }
]},
{ field: "bz", headerAlign: "center", allowSort: true, header: "备注"}
]
});
grid.load({"year":year});
}

//重置查询条件
function reset() {
var form = new nui.Form("#ReportQuery");//将普通form转为nui的form
form.reset();
}

//enter键触发查询
function onKeyEnter(e) {
search();
}
</script>
</body>
</html>

空间快捷链接

页面树结构