easyui表格,單元格合併

easyui的合併單元格比較麻煩,官網提供一下方法ui

 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能夠自定義單元格格式,咱們能夠利用此特性,在單元格內內嵌一個兩行一列的表格spa

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),具體代碼爲code

 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}
相關文章
相關標籤/搜索