easyui表格,单元格合并
easyui的合并单元格比较麻烦,官网提供一下方法
1 $('#tt').datagrid({ 2 onLoadSuccess:function(){ 3 var merges = [{ 4 index:2, 5 rowspan:2 6 },{ 7 index:5, 8 rowspan:2 9 },{ 10 index:7, 11 rowspan:2 12 }]; 13 for(var i=0; i<merges.length; i++) 14 $('#tt').datagrid('mergeCells',{ 15 index:merges[i].index, 16 field:'productid', 17 rowspan:merges[i].rowspan 18 }); 19 } 20 });
此方法判断太麻烦了,其实easyui可以自定义单元格格式,我们可以利用此特性,在单元格内内嵌一个两行一列的表格
1 { 2 title: '本周实际', field: 'weekActual', 3 formatter: function (value, row) { 4 var table = fine.workplan.celltable({data:{except:row.weekHourExcept, acutal:value}}); 5 return table; 6 } 7 }
上列代码中 fine.workplan.celltable 为soy模板文件(根据模板和参数生成js),具体代码为
1 {namespace fine.workplan} 2 3 /** 4 @param data 5 */ 6 {template .celltable} 7 <table class="cell-table"> 8 <tr><td class="first-row-cell">{$data.except}</td></tr> 9 10 <tr> 11 <td class="second-row-cell" 12 {if $data.except > $data.acutal}style="background-color:#ada;"{/if} 13 > 14 {$data.acutal} 15 </td> 16 </tr> 17 </table> 18 {/template}