如何用html做出复杂的报表,使用jquery的tmpl构建复杂报表

Tmpl提供了几种tag：${}：等同于{{=}}，是输出变量，通过了html编码的。{{html}}:输出变量html,但是没有html编码，适合输出html代码。{{if }} {{else}}:提供了分支逻辑。{{each}}:提供循环逻辑，$value访问迭代变量。

现在主要介绍利用tmpl构造复杂一点的表格，比如说动态加载数据以及单元格合并

打分信息

项目

评估细项

分值

评分标准

评分

{{each(i,data) template.itemList}}

{{if i==0||template.itemList[i-1].parentItemName!=data.parentItemName}}

{{= data.parentItemName}}

{{/if}}

{{= data.itemName}}{{= data.maxScore}}{{= data.itemDesc}}{{= data.itemScore}}

{{/each}}

合计 {{= template.sumScore}}

{{each(i,data) template.otherItemList}}

{{= data.parentItemName}}{{= data.itemDesc}}{{= data.itemScore}}

{{/each}}

最后得分{{= template.allSumScore}}综合评语 希望加强管理，继续努力！

$().ready(function() {

$('#templateItemListTmpl').tmpl(data.data).appendTo('#templateItemList');

})

效果图如下