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>

　　

时间： 2024-10-26 17:43:50

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

js常用工具库XCLJsTool v1.0发布

最近有空,整了一个js的工具库,还没有正式用于项目中,自己也没有时间写测试用例,想了一下,还是贴出来给大家看看,如果有问题,请留言,非常感谢!项目我放在了github上面,会经常更新的,过段时间会发布一版! /** * 欢迎使用本程序,您可以任意修改.复制.分享本程序所有代码,只需要保留本注释即可,谢谢! * 项目地址:<span style="color:#ff0000;">https://github.com/xucongli1989/XCLJsTool</spa

lodash (js实用工具库)

是什么? 它提供了一整套函数式编程的实用功能, 并且支持模块化, 比underscore更优秀. 文档? http://lodashjs.com/docs/ 引用? <script src="https://cdn.bootcss.com/lodash.js/4.17.4/lodash.min.js"></script> ;

原生JS兼容性工具库

(function (window) { "use strict"; var $ = eventUtil = {}; //添加事件 eventUtil.addHander = function (element, type, hander) { if (element.addEventListener) { element.addEventListener(type, hander, false); } else if (element.attachEvent) { element.a

我用的一些Node.js开发工具、开发包、框架等总结

开发工具 1.WebStorm,毫无疑问非他莫属,跨平台,强大的代码提示,支持Nodejs调试,此外还支持vi编辑模式,这点我很喜欢. 2.做些小型项目用Sublime Text. 3.Browserify:将你的nodejs模块应用到浏览器中 4.nvm:nodejs版本管理工具,你可能会用到多个nodejs版本(如v0.11.x支持generator的nodejs和stable的v0.10.x版本),用它可以方便切换 测试&自动化 1.mocha:一个简单.灵活有趣的 JavaScript

Underscore.js工具库

Underscore 是一个 JavaScript 工具库,它提供了一整套函数式编程的实用功能,但是没有扩展任何 JavaScript 内置对象. 他解决了这个问题:"如果我面对一个空白的 HTML 页面,并希望立即开始工作,我需要什么?" 他弥补了 jQuery 没有实现的功能,同时又是 Backbone 必不可少的部分. http://www.bootcss.com/p/underscore/

JS工具库之Lodash

破狼 JavaScript工具库之Lodash 2015-04-11 16:08 by 破狼, 235 阅读, 2 评论, 收藏, 编辑 你还在为JavaScript中的数据转换.匹配.查找等烦恼吗?一堆看似简单的foreach,却冗长无趣,可仍还在不停的repeat it!也许你已经用上了Underscore.js,不错,你已经进步很大一步了.然而今天我希望你能更进一步,利用lodash替换掉Underscore. lodash一开始是Underscore.js库的一个fork,因为和其他(U

封装自己的Common.js工具库

Code/** * Created by LT on 2013/6/16. * Common.js * 对原生JS对象的扩展 * Object.Array.String.Date.Ajax.Cookie */ ;(function(){ Object.extend =function(targetObj,fnJson){ for(var fnName in fnJson){ targetObj[fnName]=fnJson[fnName]; } return targetObj; }; /**

CSV.js – 用于 CSV 解析和编码的 JS 工具库

逗号分隔值(CSV )文件用于以以纯文本的形式存储表格化数据(数字和文本). CSV 文件包含任意数量的记录,通过某种换行符分隔,每条记录由字段,其他一些字符或字符串分隔,最常用的是文字逗号或制表符.CSV.js 是一个简单,超快的用于 CSV 解析和编码的 JavaScript 工具库,兼容浏览器,AMD 和 NodeJS 环境. 您可能感兴趣的相关文章 Web 开发中很实用的10个效果[附源码下载] 精心挑选的优秀jQuery Ajax分页插件和教程 12款经典的白富美型 jQuery 图片

js基础和工具库

1 /* 2 * 3 * 2015/4/18 4 * js 基础 和 工具库 5 * 6 * 7 * */ 8 //获取对象样式 9 function hGetStyle(obj , attr){ 10 return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj ,null )[attr]; 11 } 12 13 //移动函数 14 function hDoMove(obj , attr ,s ,target ,

JS模块化工具requirejs教程(二)：基本知识

前一篇:JS模块化工具requirejs教程(一):初识requirejs我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等 基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函数 前一篇中的a.js: