Title: (Closed) Datagrid Frozen Column with Merge Cell
Post by: shivavalkyre on August 09, 2018, 02:16:38 AM
Hi, 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>
Title: Re: (Closed) Datagrid Frozen Column with Merge Cell
Post by: stworthy on August 09, 2018, 07:26:24 PM
The data-options="frozen:true" can only be applied on the <thead>.
|