doT.js渲染列表数据和批量处理数据

    今天，做了列表上渲染数据并且支持批量选择。

1、引入doT

<script src="../js/doT.min.js"></script>

2、html，模板、

<!--listTemp-->
	<script type="text/x-dot-template" id="listTemp">
		{{ for(var i=0;i
		<it.length;i++){ }} <div class="list-item" data-c_name="{{=it[i].c_name}}" data-v_name="{{=it[i].v_name}}" data-materialspec="{{=it[i].materialspec}}"
		    data-nshouldassistnum="{{=it[i].nshouldassistnum}}" data-vbatchcode="{{=it[i].vbatchcode}}" data-cgeneralbid="{{=it[i].cgeneralbid}}" onclick="selectList(this,{{=i}})">
			<div class="list-item-inner">
				<div class="ibox">
					
				</div>
				<div class="cbox">
					<dl>
						<dt class="um-text-overflow mt10">{{=it[i].c_name}}</dt>
						<dt class="um-text-overflow mt10">物料：{{=it[i].v_name}}</dt>
						<dt class="um-text-overflow mt10">{{=it[i].materialspec}}</dt>
						<dt class="um-text-overflow mt10">{{=it[i].nshouldassistnum}}KG</dt>
						<dt class="um-text-overflow mt10">{{=it[i].vbatchcode}}</dt>
						
					</dl>
				</div>
				<div class="icon-box" id="icon-box">
					<div class="select icon-inner">
						<div class="um-check-inline">
							{{if(it[i].checked){}}
							<input name="um-checkbox-inline" type="checkbox" value="" checked> {{}else{}}
							<input name="um-checkbox-inline" type="checkbox" value=""> {{}}}
							<span class="um-icon-checkbox um-css3-vc"></span>
						</div>
					</div>
				</div>
			</div>
			</div>
			{{ } }}
	</script>

3、js渲染数据：

var dataText = doT.template($("#listTemp").text());
$("#list").html(dataText(data));

列表就渲染到设备上了，然后就是批量选择：

4、每次点击事件，发现自己的状态并改变，然后调用setArray ：

//  点击当前列选中或者取消
function selectList(obj, i) {
	var param = {
		c_name : $(obj).attr("data-c_name"),
		v_name : $(obj).attr("data-v_name"),
		materialspec : $(obj).attr("data-materialspec"),
		nshouldassistnum : $(obj).attr("data-nshouldassistnum"),
		vbatchcode : $(obj).attr("data-vbatchcode"),
		cgeneralbid : $(obj).attr("data-cgeneralbid")   //去重
	}
	// 发现自己的状态并改变
	var flag = $(obj).find("input").prop("checked");
	$(obj).find("input").prop("checked", !flag);
	//
	setArray(param);
}

5、将数据更新到arr数组中

function setArray(arrSearch) {
	
	if (arr.length == 0) {
		arr.push(arrSearch);
	} else {
		var result = isInArray(arr, arrSearch);
		if (result) {
			arr.splice(result - 1, 1)
		} else {
			arr.push(arrSearch)
		}
	}
	
	var length = arr.length;
	var text = "收料(" + length + ")"
	summer.setWinAttr({
		actionBar : {
			title : "待收料仓库",
			titleColor: "#333333",
            backgroundColor: "#007aff",
      		bottomLineColor: "#007aff",
			leftItem : {
				image : "",
				method : ""
			},
			rightItems : [{
				type : "text",
				text : text,
				textColor:"#333333",
				method : "saveClose()"
			}]
		}
	});
}

这里面有个数组去重：isInArray

//判断是否在这个数组中存在
function isInArray(arr, value) {
	for (var i = 0; i < arr.length; i++) {
		if (value.cgeneralbid === arr[i].cgeneralbid) {
			return i + 1;
		}
	}
	return false;
}

最后把这个值给另外一个页面：

// 点击保存
function saveClose() {
	
	var arrSt = $summer.jsonToStr(arr);
	//
	summer.openWin({
        "id" : "received",
        "url" : "html/received.html",
        "pageParam" : {
            "arrSt" : arrSt
        }
    });
}

数组通过json转str后，另外一个页面同样dot渲染，结果显示很多条重复的undefined，通过对比数据发现，这个不是json数组，是字符串，然后想了一下怎么转换：

data = $summer.strToJson(data);

成功，简直了！！！！！！！！

怕数组通过参数传类型会被改变，就这样吧。