第一种实现方法:
实现界面:
html代码:
<table id="tt" class="easyui-treegrid" style="width:1000px;"></table>
js代码:
$('#tt').treegrid({
url: '/cost/getInfo.do',
method: 'get',
queryParams:{year:y},
autoRowHeight:true,
animate:true,
lines:true,
height:425,
fitColumns:true,
idField: 'subjectId',
treeField: 'subjectName',
onLoadSuccess: function () { $('#tt').treegrid('collapseAll'); },
columns:[[
{field:'subjectName',title:'科目名称',width:220,align:'left',styler:function(){return 'height:30px;';}},
{field:'realTotal',title:real_Budget,width:200,align:'right'},
<span style="white-space:pre"> </span>{field:'planTotal',title:plan_Budget,width:200,align:'right'},
{field:'completeRate',title:'达成率',width:200,align:'right'}
]]
});
第二种方法:
实现界面
html代码:
<table id="reportDetail" class="easyui-treegrid" style="width:1000px;"
data-options="url:'/report/searchReportDetail.do',idField:'subjectId',treeField:'subject'">
<thead>
<tr>
<th rowspan="2" data-options="field:'subject',width:150,align:'left',styler:function(){return 'height:30px;';}">科目</th>
<th colspan="3" data-options="width:300,align:'right'">$query.month月</th>
<th colspan="3" data-options="width:300,align:'right'" class="querymonth">YTD累计1-$query.month月</th>
<th colspan="2" data-options="width:240,align:'right'">FY年度</th>
</tr>
<tr >
<th data-options="field:'actualMonth',width:100,align:'right'">实际</th>
<th data-options="field:'budgetMonth',width:100,align:'right'">预算</th>
<th data-options="field:'budgetAchieveRate',width:100,align:'right'">预算达成率(%)</th>
<th data-options="field:'ytdActualMonth',width:100,align:'right'">实际</th>
<th data-options="field:'ytdBudgetMonth',width:100,align:'right'">预算</th>
<th data-options="field:'ytdBudgetAchieveRate',width:100,align:'right'">预算达成率(%)</th>
<th data-options="field:'fyBudget',width:118,align:'right'">预算</th>
<th data-options="field:'fyBudgetAchieveRate',width:118,align:'right'">预算达成率(%)</th>
</tr>
</thead>
</table>
js代码:
$('#reportDetail').treegrid({
url: '/AAAA/BBB.do',
method: 'get',
queryParams:{year:y,month:m,deptTwo:t},
autoRowHeight:true,
animate:true,
lines:true,
height:425,
idField: 'subjectId',
treeField: 'subject',
onLoadSuccess: function () {
$('#reportDetail').treegrid('collapseAll');
$("table.datagrid-htable tr:eq(0) td:eq(1) .datagrid-cell-group").text(m+"月");
$("table.datagrid-htable tr:eq(0) td:eq(2) .datagrid-cell-group").text("YTD累计1-"+m+"月");
}
});