JQuery模板开发
通过ajax获取一个json数据字符串，将数据显示在页面中，初始页面（假设一个公司需要做一个发票，但是一次打印多个发票信息，获取到的数据是一个json字符串，而这个json字符串包含需要打印的全部信息）
<body onfocusout="parent.setEmailRange();"> <div> <table> <th> <tr> <td colspan="7"> <img> </td> </tr> <tr> <td colspan="7"> <span>XXXXXX销售公司售后配件</span> </td> </tr> <tr> <td colspan="7">仓库地点：<span></span></td> </tr> <tr> <td colspan="7"> <span>售货配件入库单</span> </td> </tr> <tr> <td colspan="3">入库单号：<span></td> <td colspan="4">入库类型：<span></span></td> </tr> <tr> <td colspan="3">入库时间：<span></span></td> <td colspan="4">业务单据号：S00001<span></span></td> </tr> </th> <tbody> <tr> <td>序号</td> <td>零件编号</td> <td>零件名称</td> <td>单位</td> <td>数量</td> <td>零件供应商</td> <td>备注</td> </tr> <tr> <td>质检结论：</td> <td colspan="3"> </td> <td colspan="3">质检签章：</td> </tr> <tr> <td>送货人：</td> <td colspan="3"> </td> <td colspan="3">收货人：</td> </tr> <tr> <td colspan="7">备注：本表一式三联。一联库房留存，二联计划物流部留存，三联财务部门留存。</td> </tr> <tr> <td colspan="7"></td> </tr> </tbody> </table> </div> </body>
js代码
//获取数据
var rownum = 1;
var list = GetDetailList(condition);
//数据分组（看下面的讲解）
var obj = {};
list.forEach(function (r, i) {
var name = r.mcs_name;
if (!!!obj[name]) {
obj[name] = [];
}
obj[name].push(r);
})
//获取到id为printArea下的页面信息，将没有数据的table作为模板保存起来
var htmlTemplate = $("#printArea").html()
for (var key in obj) {//遍历json中的每一个成员
var arr = obj[key];
//将第一个数据加载至页面中
var $table = $("#printArea");
if (rownum !== 1) {//判断是不是第一条数据，不是的话就把上面保存的htlm页面赋给$table
$table = $(htmlTemplate);
}
//添加表头信息
//这里arr[0]是因为一条主数据下包含了很多子数据，而这里显示的是主数据，
//而主数据又是包含在每一条子数据中的，主数据不需要循环所以就取每条主数据
//的第一条子数据显示表头信息
$table.find("#mcs_name").html(arr[0]["字段名"]);
$table.find("#mcs_spmpurchaseorderid").html(arr[0]["字段名"]);
$table.find("#mcs_spmwarehouseid").html(arr[0]["字段名"]);
$table.find("#time").html(arr[0]["字段名"]);
$table.find("#mcs_receivetype").html(arr[0]["字段名"]);
//添加信息
var html = "";
for (var i = 0; i < arr.length; i++) {
//获取表头信息
//表单信息
html += "<tr class=‘tbody_tr‘>";
html += "<td>" + arr[i]["字段名"] + "</td>";
html += "<td>" + arr[i]["字段名"] + "</td>";
html += "<td>" + arr[i]["字段名"]+ "</td>";
html += "<td>个</td>";
html += "<td>" + arr[i]["字段名"]+ "</td>";
html += "<td>" + arr[i]["字段名"] + "</td>";
html += "<td>" + arr[i]["字段名"] + "</td>";
html += "</tr>";
}
//将数据信息添加至#tbody_title中进行渲染显示
$table.find("#tbody_title").after(html);
//首次数据是直接添加在页面中对应的位置的，后面的数据就是将信息添加在模板中在进行显示
if (rownum !== 1) {
$("#printArea").append($table);//将写好的信息添加至printArea的后面进行显示
}
rownum += 1;//进行自增长，表示是那条数据
}
数据分组
前端获取数据库的信息，返回的是一个json字符串。像上面的例子中根据一个表单号去查询其包含的表单信息，不做分组，数据会十分的混乱。如下例子
分组前
分组后
分组代码
var obj = {};
list.forEach(function (r, i) {//遍历获取到的每一条数据
var name = r.mcs_name;//这个就相当于上面例子中的部门
if (!!!obj[name]) {//根据这个部门新建一个数组，如果这个数组不存在那就新建一个空数组
obj[name] = [];
}
obj[name].push(r);//最后按照遍历的数据的部门信息进行分类添加，实现分组效果。
})
JQuery模板开发
原文：https://www.cnblogs.com/LanHai12/p/15258184.html