please help to frozen datagrid column with a merge cell code my code is not work for frozen column, i have try to place data-options="frozen:true" at <thead> but result is blank
<table class="easyui-datagrid" style="width:100%;height:100%"
data-options="rownumbers:false,singleSelect:true,url:'../control/get_data.php',method:'get',onLoadSuccess: onLoadSuccess">
<thead >
<tr data-options="frozen:true">
<th data-options="field:'dept',width:135" rowspan="2">Departemen</th>
<th data-options="field:'objective_group',width:150" rowspan="2">Objective Group</th>
<th data-options="field:'target_group',width:80,align:'center'" formatter="formatPrice" rowspan="2">Target</th>
<th data-options="field:'objective',width:300" rowspan="2">Detail Objective</th>
<th data-options="field:'unit',width:200,align:'center'" rowspan="2">Unit</th>
<th data-options="field:'target_group_detail',width:100,align:'right',frozen:true" formatter="formatPrice" rowspan="2">Target</th>
<th colspan="3">Jan</th>
<th colspan="3">Feb</th>
<th colspan="3">Mar</th>
<th colspan="3">Apr</th>
<th colspan="3">May</th>
<th colspan="3">Jun</th>
<th colspan="3">Jul</th>
<th colspan="3">Aug</th>
<th colspan="3">Sep</th>
<th colspan="3">Oct</th>
<th colspan="3">Nov</th>
<th colspan="3">Dec</th>
</tr>
</thead>
<thead>
<tr>
<!-- Jan -->
<th data-options="field:'T_Jan',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_Jan',width:80,align:'right'" formatter="formatPrice">Actual</th>
<th data-options="field:'P_Jan',width:50,align:'right'">%</th>
<!-- Feb -->
<th data-options="field:'T_Feb',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_Feb',width:80,align:'right'" formatter="formatPrice">Actual</th>
<th data-options="field:'P_Feb',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Mar',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_Mar',width:80,align:'right'" formatter="formatPrice">Actual</th>
<th data-options="field:'P_Mar',width:50,align:'right'">%</th>
<!-- Apr -->
<th data-options="field:'T_Apr',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_Apr',width:80,align:'right'" formatter="formatPrice">Actual</th>
<th data-options="field:'P_Apr',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_May',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_May',width:80,align:'right'" formatter="formatPrice">Actual</th>
<th data-options="field:'P_May',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Jun',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_Jun',width:80,align:'right'" formatter="formatPrice">Actual</th>
<th data-options="field:'P_Jun',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Jul',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_Jul',width:80,align:'right'" formatter="formatPrice">Actual</th>
<th data-options="field:'P_Jul',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Aug',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_Aug',width:80,align:'right'" formatter="formatPrice">Actual</th>
<th data-options="field:'P_Aug',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Sep',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_Sep',width:80,align:'right'" formatter="formatPrice">Actual</th>
<th data-options="field:'P_Sep',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Oct',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_Oct',width:80,align:'right'" formatter="formatPrice">Actual</th>
<th data-options="field:'P_Oct',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Nov',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_Nov',width:80,align:'right'">Actual</th>
<th data-options="field:'P_Nov',width:50,align:'right'">%</th>
<!-- Mar -->
<th data-options="field:'T_Dec',width:80,align:'right'" formatter="formatPrice">Target</th>
<th data-options="field:'A_Dec',width:80,align:'right'" formatter="formatPrice">Actual</th>
<th data-options="field:'P_Dec',width:50,align:'right'">%</th>
</tr>
</thead>
</table>
</body>
<script type="text/javascript">
function onLoadSuccess(data){
var merges = [{
index: 0,
rowspan: 4
},{
index: 4,
rowspan: 5
},{
index: 9,
rowspan: 4
},{
index: 13,
rowspan: 3
}];
var merges1 =[{
index: 0,
rowspan: 4
},{
index: 4,
rowspan: 5
},{
index: 9,
rowspan: 4
},{
index: 13,
rowspan: 3
}];
var merges2 =[{
index: 0,
rowspan: 4
},{
index: 4,
rowspan: 5
},{
index: 9,
rowspan: 4
},{
index: 13,
rowspan: 3
}];
for(var i=0; i<merges.length; i++){
$(this).datagrid('mergeCells',{
index: merges[i].index,
field: 'dept',
rowspan: merges[i].rowspan
});
}
for(var i=0; i<merges1.length; i++){
$(this).datagrid('mergeCells',{
index: merges1[i].index,
field: 'objective_group',
rowspan: merges1[i].rowspan
});
}
for(var i=0; i<merges2.length; i++){
$(this).datagrid('mergeCells',{
index: merges2[i].index,
field: 'target_group',
rowspan: merges2[i].rowspan
});
}
}
</script>
