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 ...

随机推荐

hadoop编译
说明: hadoop版本:hadoop-2.5.0-cdh5.3.6 环境:centos6.4 必须可联网 hadoop 下载网址: http://archive.cloudera.com/cdh5/ ...
复制vmware中的centos后无法上网问题
复制vmware中的centos后无法上网问题查看IP命令 ip addr 网卡信息 eth1: mtu 1500 qdisc pfifo_fast state UP qlen 1000 使用的是e ...
BZOJ 3410: [Usaco2009 Dec]Selfish Grazing 自私的食草者（贪心）
这= =，就是线段覆盖对了= =直接贪心就行了= = CODE： #include<cstdio>#include<iostream>#include<cstring&g ...
BZOJ 1898: [Zjoi2004]Swamp 沼泽鳄鱼(矩阵乘法)
可以发现，如果没有鳄鱼，那么就是裸地一道题，但是可以发现鳄鱼最多每12次重复，那么就少于12的那部分dp，其他的就矩阵乘法就行了 PS：第一次吧矩阵乘法AC了好开心QAQ CODE： #include ...
AlloyTouch之select选择插件
原文地址:https://github.com/AlloyTeam/AlloyTouch/wiki/Simple-Select 写在前面很多情况下,产品希望统一安卓和IOS select交互和样式. ...
多个超链接a 选中的和不选中的两种样式
<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"> 浏览器自带的jquery库 <scri ...
纯CSS3之五子棋（黑白棋）画法
无聊想用JS写个五子棋玩玩,这边先用CSS3画出了五子棋,感觉挺惊艳的.发上来看看 PS:第一次发博文T-T 此为个人原创. 不多说上图: 代码如下: <!DOCTYPE html> & ...
jQuery_小测试
1.在div元素中,包含了一个<span>元素,通过has选择器获取<div>元素中的<span>元素的语法是? 提示使用has() 2.在<ul>元素 ...
NodeJS链接MongDB
创建一个mongdb.js var mongodb = require('mongodb') // 创建数据库服务的链接 var server = new mongodb.Server( 'local ...
问题： lang.NoClassDefFoundError: org/springframework/core/annotation/AnnotatedElementUtils，的解决方法
今天在做junit 测试的时候出现了一个问题,花了一段时间才解决. java.lang.NoClassDefFoundError: org/springframework/core/annota ...

underscore.js,js工具库

underscore.js,js工具库的更多相关文章

随机推荐

热门专题