通过ajax获取一个json数据字符串,将数据显示在页面中,初始页面(假设一个公司需要做一个发票,但是一次打印多个发票信息,获取到的数据是一个json字符串,而这个json字符串包含需要打印的全部信息)
<body onfocusout="parent.setEmailRange();" style="overflow-wrap: break-word;"> <div id="printArea"> <table> <th> <tr> <td colspan="7" style="border-bottom-style: none;"> <img class="logo"> </td> </tr> <tr> <td colspan="7" style="text-align:center;border-top-style: none;border-bottom-style: none;"> <span class="tit">XXXXXX销售公司售后配件</span> </td> </tr> <tr> <td colspan="7" style="padding-left: 800px;border-top-style: none;border-bottom-style: none;">仓库地点:<span id="mcs_spmwarehouseid"></span></td> </tr> <tr> <td colspan="7" style="text-align:center;border-top-style: none;border-bottom-style: none;"> <span class="tit">售货配件入库单</span> </td> </tr> <tr> <td colspan="3" style="border-top-style: none;border-bottom-style: none;border-right-style: none;">入库单号:<span id="mcs_name"></td> <td colspan="4" style="padding-left: 124px;border-top-style: none;border-bottom-style: none;border-left-style: none;">入库类型:<span id="mcs_receivetype"></span></td> </tr> <tr> <td colspan="3" style="border-top-style: none;border-bottom-style: none;border-right-style: none;">入库时间:<span id="time"></span></td> <td colspan="4" style="padding-left: 108px;text-align:left;border-top-style: none;border-bottom-style: none;border-left-style: none;">业务单据号:S00001<span id="mcs_spmpurchaseorderid"></span></td> </tr> </th> <tbody> <tr id="tbody_title"> <td style="150px;">序号</td> <td style="100px;">零件编号</td> <td style="180px;">零件名称</td> <td style="40px;">单位</td> <td style="40px;">数量</td> <td style="180px;">零件供应商</td> <td style="100px;">备注</td> </tr> <tr> <td style="border-top-style: none;border-bottom-style: none;border-right-style: none;">质检结论:</td> <td colspan="3" style="border-style: none;"> </td> <td colspan="3" style="text-align:left;border-top-style: none;border-bottom-style: none;border-left-style: none;">质检签章:</td> </tr> <tr> <td style="border-top-style: none;border-bottom-style: none;border-right-style: none;">送货人:</td> <td colspan="3" style="border-style: none;"> </td> <td colspan="3" style="text-align:left;border-top-style: none;border-bottom-style: none;border-left-style: none;">收货人:</td> </tr> <tr> <td colspan="7" style="border-top-style: none;">备注:本表一式三联。一联库房留存,二联计划物流部留存,三联财务部门留存。</td> </tr> <tr> <td colspan="7" style="height: 6px;border-style:none"></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);//最后按照遍历的数据的部门信息进行分类添加,实现分组效果。 })