underscore.js,js工具库
官方文档：http://underscorejs.org/
var totalCheckPriceVal = _.reduce(tableData[0],function(memo,num){
var memoint=memo-0;
var numint=num-0;
return memoint+numint; },0
)
_.reduce()
计算一个数组里所有值相加
var selectProdutData = _.indexBy(prodcutList,function(obj){
return obj.originalProductCode+obj.stationCode+obj.orderNumber;
});
._indexBy()
返回一个key-value形式的js对象可用于添加商品业务逻辑的实现；
_.map(productsData,function(product){
var objNegative={};
if((product.confirmedNumber-0)<=0){
isNegative=true;
objNegative.originalProductCode=product.originalProductCode;
objNegative.stationCode=product.stationCode;
objNegative.orderNumber=product.orderNumber;
arrayNegative.push(objNegative);
}
})
._map()
一个遍历函数；
遍历的时候遇到异步执行的函数会同步执行；
使用underscore制作一个打印分页html
<!doctype html>
<head>
<title></title>
<script src="./jquery.js"></script>
<script src="./underscore-min.js"></script>
<style type="text/css">
*{padding: 0;margin:0;}
table{border-collapse:collapse;border: 1px solid #000000;border-spacing:0;width: 100%;text-align: left;margin-top: 10px;}
table td,table th{padding: 0 3px;height: 19px;line-height: 15.5px;border: 1px solid #000;}
body{padding: 5px;font-size: 12px;}
ul{list-style-type: none;font-size: 0;position: relative;}
ul li{display: inline-block;width: 50%;font-size: 12px;margin: 10px 0;}
ul li.op{position: absolute;right: 100px;top: 15px;width: 80px;}
td.title{text-align: left;width: 100px;}
tr.blank{height: 17px;border: 1px solid #fff;}
#print{padding-right: 15px;position: relative;}
.pageer{position: absolute;right: 0px;display:none;top:0;color: #000000;font-size: 14px;}
@media print {
.paging {page-break-after:always;}
.page{display:inline-block;right: -5px;}
}
#list{margin: 15px 0;}
#list th{text-align: center;} .mouth{
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
} .ie8mouth{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script id="teml" type="text/template">
<div style="width:100%" align="center"><font size="6">服务商送货任务单</font></div>
<div id="print" class='paging'>
<table>
<tbody><tr>
<td rowspan="6" style="text-align:center;border-bottom: 0px;">
<p class="mouth">商</p><p class="mouth">务</p><p class="mouth">服</p><p class="mouth">：</p><p class="mouth">联</p><p class="mouth">色</p><p class="mouth">白</p>
</td>
<td class="title" colspan="2">原厂订单编号</td>
<td colspan="2"><%= productdescripe[0].orderCode %></td>
<td class="title" colspan="2">厂商品牌</td>
<td colspan="2"><%= productdescripe[0].brand %></td>
</tr>
<tr>
<td class="title" colspan="2">配送任务单号</td>
<td colspan="2"><%= productdescripe[0].taskCode %></td>
<td class="title" colspan="2">订单创建日期</td>
<td colspan="2"><%= productdescripe[0].createTime %></td>
</tr> <tr>
<td class="title" colspan="2">站点名称</td>
<td colspan="2"><%= productdescripe[0].stationName %></td>
<td class="title" colspan="2">ASC代码</td>
<td colspan="2"><%= productdescripe[0].ascCode %></td>
</tr>
<tr>
<td class="title" colspan="2">站点联系人</td>
<td colspan="2"><%= productdescripe[0].stationPerson %></td>
<td class="title" colspan="2">站点电话</td>
<td colspan="2"><%= productdescripe[0].stationPhone %></td>
</tr> <tr>
<td class="title" colspan="2">站点送货地址</td>
<td colspan="2"><%= productdescripe[0].stationAddress %></td> <td class="title" colspan="2">原厂订单日期</td>
<td colspan="2"><%= productdescripe[0].orderTime %></td>
</tr> <tr>
<td class="title" colspan="2">服务商名称</td>
<td colspan="2"><%= productdescripe[0].serviceName %></td>
<td class="title" colspan="2">服务商编号</td>
<td colspan="2"><%= productdescripe[0].serviceNumber %></td> </tr> <tr>
<td rowspan="31" style="text-align:center;border-bottom: 0px;border-top: 0px;" id="datalist"> <!-- 上海通用雪佛兰 --> <p class="mouth">
兰 </p> <p class="mouth">
佛 </p> <p class="mouth">
雪 </p> <p class="mouth">
用 </p> <p class="mouth">
通 </p> <p class="mouth">
海 </p> <p class="mouth">
上 </p> <p class="mouth">：</p><p class="mouth">联</p><p class="mouth">色</p><p class="mouth">蓝</p> <p class="mouth"> </p>
<p class="mouth"> </p>
<p class="mouth"> </p>
<p class="mouth"> </p>
<p class="mouth"> </p>
<p class="mouth"> </p> <p class="mouth">O</p><p class="mouth">Z</p><p class="mouth">K</p><p class="mouth">A</p>
<p class="mouth">：</p><p class="mouth">联</p><p class="mouth">色</p><p class="mouth">红</p> <p class="mouth"> </p>
<p class="mouth"> </p>
<p class="mouth"> </p>
<p class="mouth"> </p> <p class="mouth">理</p><p class="mouth">代</p><p class="mouth">总</p>
<p class="mouth">：</p><p class="mouth">联</p><p class="mouth">色</p><p class="mouth">绿</p>
</td>
<td class="title" colspan="2">服务商联系人</td>
<td colspan="2"><%= productdescripe[0].servicePerson %> </td>
<td class="title" colspan="2"><%= productdescripe[0].servicePhone %></td>
<td colspan="2">13301607008</td>
</tr> <tr>
<td style="text-align: right">序号</td>
<td>配件号</td>
<td colspan="2">配件名称</td>
<td colspan="2">订购数量(罐)</td>
<td colspan="2">实收数量(罐)</td>
</tr> <!--startprint-->
<% for(var i = 0; i < 29; i++) { %>
<% var item = list[i]; if(item){%>
<tr><td>1</td>
<td><%= item.code %> </td>
<td colspan="2"><%= item.name %></td>
<td colspan="2"><%= item.ordercount %></td> <td colspan="2"><%= item.receiptcount %></td>
</tr>
<%} else{%>
<tr><td></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td> <td colspan="2"></td>
</tr>
<%}%>
<% } %>
<tr>
<td rowspan="5" style="text-align:center;border-top: 0px;">
<p class="mouth">点</p><p class="mouth">站</p><p class="mouth">C</p><p class="mouth">S</p><p class="mouth">A</p>
<p class="mouth">：</p><p class="mouth">联</p><p class="mouth">色</p><p class="mouth">黄</p><p class="mouth"> </p>
</td>
<td></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td></td>
</tr> <tr><td>合计</td>
<td></td>
<td colspan="2"></td>
<td colspan="2" class="ordercount"></td>
<td colspan="2" class="receiptcount"></td></tr> <tr>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">送货人</td>
<td colspan="2">收件人</td>
<td colspan="2" style="text-align:center">盖章</td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">送货时间</td>
<td colspan="2">收货时间</td>
<td colspan="2"></td>
<td colspan="2">
</td>
</tr>
</tbody></table>
</div>
</script>
</head>
<body> </body>
<script type="text/javascript">
var data={
productdescripe:[{
orderCode:"P2200391160401000",
taskCode:"AKS16041515441113922",
stationName:"上海九炫汽车销售服务有限公司",
stationPerson:"test",
stationAddress:"上海奉贤区南亭公路1269号",
serviceName:"上海光环工贸有限公司",
servicePerson:"姜宏伟 ",
brand:"上海通用雪佛兰",
createTime:"2016-4-15 15:44:11",
ascCode:"2200391",
stationPhone:"22222",
orderTime:"2016-04-15",
serviceNumber:"107131",
servicePhone:"13301607008"
}],
list: [
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"7",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"4",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"5",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"6",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
{code: "YQ-9850918",name:"新劲7号底色漆 MM Q271 1升",ordercount:"8",receiptcount:"7"},
]
};
var arr=data.list;
var ordercountlist=_.pluck(arr, 'ordercount');
var ordercountsum = _.reduce(ordercountlist, function(memo, num){ return parseInt(memo) + parseInt(num); }, 0);
var length=arr.length;
var render = _.template($('#teml').html());
var html = render(data);
$("body").html(html);
var page=parseInt(length/29)+1;
for(j=1;j<page;j++){
arr.splice(0,29*j);
var render = _.template($('#teml').html());
var html = render(data);
$("body").append(html);
}
$("table").last().parent().removeClass("paging");
$("td[class=ordercount]").last().html(ordercountsum)
</script>
</html>
博客地址：http://www.cnblogs.com/windseek/
underscore.js,js工具库的更多相关文章
- lodash (js实用工具库)
是什么? 它提供了一整套函数式编程的实用功能, 并且支持模块化, 比underscore更优秀. 文档? http://lodashjs.com/docs/ 引用? <script src=&q ...
- [js高手之路] 跟GhostWu一起封装一个字符串工具库-架构篇(1)
所谓字符串工具库就是利用javascript面向对象的知识封装一个常用的字符串处理方法库,首先给这个库起个名字,好吧就叫ghostwu.js. 看下ghostwu.js的整体架构: ; (functi ...
- 我用的一些Node.js开发工具、开发包、框架等总结
开发工具 1.WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢. 2.做些小型项目用Sublime Text. 3.Browser ...
- Node.js开发工具、开发包、框架等总结
开发工具 1.WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢.2.做些小型项目用Sublime Text.3.Browserif ...
- Lo-Dash – 替代 Underscore 的优秀 JS 工具库
前端开发人员大都喜欢 Underscore,它的工具函数很实用,用法简单.这里给大家推荐另外一个功能更全面的 JavaScript 工具——Lo-Dash,帮助你更好的开发网站和 Web 应用程序. ...
- Underscore.js工具库
Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象. 他解决了这个问题:“如果我面对一个空白的 HTML ...
- JS工具库之Lodash
破狼 JavaScript工具库之Lodash 2015-04-11 16:08 by 破狼, 235 阅读, 2 评论, 收藏, 编辑 你还在为JavaScript中的数据转换.匹配.查找等烦恼吗? ...
- 可在 html5 游戏中使用的 js 工具库
可在 html5 游戏中使用的 js 工具库 作者: 木頭 时间: September 21, 2014 分类: Utilities,Game 使用 cocos2d-js 3.0 开发游戏项目两三个月 ...
- CSV.js – 用于 CSV 解析和编码的 JS 工具库
逗号分隔值(CSV )文件用于以以纯文本的形式存储表格化数据(数字和文本). CSV 文件包含任意数量的记录,通过某种换行符分隔,每条记录由字段,其他一些字符或字符串分隔,最常用的是文字逗号或制表符. ...
- js基础和工具库
/* * 作者: 胡乐 * 2015/4/18 * js 基础 和 工具库 * * * */ //根据获取对象 function hGetId(id){ return document.getElem ...
随机推荐
- Swift 2.0 单例的用法
单例我们项目中是很常用的,今天刚学了在swift中怎么写单例和调用单例.下面我们简单的介绍一下.我们先看看Swift单例的写法: import UIKit class Shareinstance: N ...
- 基于Selenium2+Java的UI自动化（6）-操作Alert、confirm、prompt弹出框
alert.confirm.prompt这样的js对话框在selenium1 时代处理起来比价麻烦,常常要用autoit来帮助处理.而现在webdriver对这些弹出框做了专门的处理,使用seleni ...
- vm虚拟机Kali2.0实现与物理机之间的文件拖动共享
MarkdownPad Document html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,ab ...
- 【翻译】Jay Kreps - 为何流处理中局部状态是必要的
译者注: 原文作者是 Jay Kreps,也是那篇著名的<The Log: What every software engineer should know about real-time da ...
- js零碎整理
本文格式: 大整合类标题 文章标题 作者:文章网址 USA:参考老外网址/老外网址 &&: 意思是内涵一个系列 javascript方面整理: 1. for in 循环的输出顺序问题 ...
- BZOJ ac100题存档
不知不觉AC100题了,放眼望去好像都是水题.在这里就做一个存档吧(特别感谢各位大神尤其是云神http://hi.baidu.com/greencloud和丽洁姐http://wjmzbmr.com/ ...
- Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩.图片转base64.css和js的压缩以及合并,文件的md5重命名 -- ...
- Altium Designer(DXP)小技巧之模块化布局
原创博客转载需注明地址 在我们用Altium Designer进行电路板的绘制的时候经常会遇到模块化布局的问题 就比如电源模块(电源芯片及其外围芯片)放在一起 传感器模块(传感器芯片及其外围芯片)放在 ...
- 无需Get更多技能，快速打造一个可持久化的任务调度
项目总是很忙,忙里偷闲还是要总结一下,前一段时间,由于项目中需要,我们需要很多定时汇总数据的情况,项目初期主要使用sql server 计划任务实现对数据的汇总与统计,但是开发到一定时间内,需求提出了 ...
- vue1升级到vue2的问题
router 不能用map方法了,需要改router的结构改为 routers= [ { // 当没有匹配路由时默认返回的首页 path:'/index', compone ...