第一種實現方法:

實現介面:

html程式碼:

<table id="tt" class="easyui-treegrid" style="width:1000px;"></table>

$('#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>
 

$('#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+"月");
            }

        });