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);

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

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

最后

以上就是欢喜芹菜为你收集整理的doT.js渲染列表数据和批量处理数据的全部内容，希望文章能够帮你解决doT.js渲染列表数据和批量处理数据所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。