artemplate的自动保存问题
2016-01-25 16:10
531 查看
artemplate作为前端模板,简洁,高效,兼容程度高。
但在数据输入时,不能非常高效地收集用户的数据数据。
这里提供了一种高效的数据自动收集方法,其主要原理是:
每一个 input 的 name 和 value 构成一组 key-value值。
其中key可以是一组用点号:"."分割的路径,写入值时,按照name指定的路径反向写到对象上即可。
其中 this.WA 是模板的显示容器,即渲染后 innerHTML写到的div.
nowData是input内容需要输出到的对象。
模板定义需要如下形式:
<div style="line-height:38px;">
名称:
<input name="SVRData.Name" type="text" style="width:200px;" value="{{SVRData.Name}}" />
<label style="padding-left:100px;"></label>
默认显示模板:<label id="temIDName"></label><input type="button" style="width:100px;margin-left:20px;" value="选择" />
<br />
助记名:
<input name="SVRData.namespace" type="text" style="width:500px;" value="{{SVRData.namespace}}" />
<br />Json默认值:
<br />
<textarea name="SVRData.Json" cols="100" rows="22">{{JsonString}}</textarea>
</div>
每个input的name需要与渲染对象上的路径相同。
但在数据输入时,不能非常高效地收集用户的数据数据。
这里提供了一种高效的数据自动收集方法,其主要原理是:
每一个 input 的 name 和 value 构成一组 key-value值。
其中key可以是一组用点号:"."分割的路径,写入值时,按照name指定的路径反向写到对象上即可。
function SetDataValue(name, value, nowData) { if (!name || name.length == 0) return; var spN = name.split('.'); var names = []; for (var i = 0; i < spN.length; i++) {//去掉空字符 var sn = spN[i]; if (sn.length > 0) names.push(sn); } var ObjT = nowData; for (var i = 0; i < names.length - 1; i++) { var n = names[i]; if (!ObjT ) { ObjT = {}; } ObjT = ObjT ; } ObjT[names[names.length - 1]] = value; } //收集一个容器下所有的input值,以key-value方式赋值到obj上 WorkArea.prototype.collectValues = function (nowData) { var err = this.DoSaveCall(); if (err) { var info = err.toString(); this.CB.FireEvent('onError', info); return info; } var inps = this.WA.getElementsByTagName('input'); for (var i = 0; i < inps.length; i++) { var inpt = inps[i]; SetDataValue(inpt.name, inpt.value, nowData); } var inps = this.WA.getElementsByTagName('textarea'); for (var i = 0; i < inps.length; i++) { var inpt = inps[i]; SetDataValue(inpt.name, inpt.value, nowData); } var inps = this.WA.getElementsByTagName('select'); for (var i = 0; i < inps.length; i++) { var inpt = inps[i]; var index = inpt.selectedIndex; if (index >= 0) { var value = inpt.options[index].value; SetDataValue(inpt.name, value, nowData); } else { SetDataValue(inpt.name, null, nowData); } } }
其中 this.WA 是模板的显示容器,即渲染后 innerHTML写到的div.
nowData是input内容需要输出到的对象。
模板定义需要如下形式:
<div style="line-height:38px;">
名称:
<input name="SVRData.Name" type="text" style="width:200px;" value="{{SVRData.Name}}" />
<label style="padding-left:100px;"></label>
默认显示模板:<label id="temIDName"></label><input type="button" style="width:100px;margin-left:20px;" value="选择" />
<br />
助记名:
<input name="SVRData.namespace" type="text" style="width:500px;" value="{{SVRData.namespace}}" />
<br />Json默认值:
<br />
<textarea name="SVRData.Json" cols="100" rows="22">{{JsonString}}</textarea>
</div>
每个input的name需要与渲染对象上的路径相同。
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享
- 如何创建对象以及jQuery中创建对象的方式
- 数组方法汇总