json数据映射填充到html元素显示
映射算法做了改进，支持name重复映射
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript test</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<h3>script running ... ...</h3>
<form id="data">
<input type="text" name="name" value="">
<input type="text" name="list[0].index" value="">
<input type="text" name="list[1].no" value="">
<select name="dept" width="40">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select><br><br> <textarea name="desc" rows="2" cols="70"></textarea><br><br> <input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女 |
<input type="checkbox" name="favor" value="book">book
<input type="checkbox" name="favor" value="food">food
</form>
<button type="button" id="button">ajax</button>
</body>
<script type="text/javascript">
var json = {name:'tom',age: 20,dept: 2,sex: 1,favor: 'book,food',desc: 'descript...',
list:[{index:1,no:'0015'},{index:2,no:'0016'}]}; /**
* json数据映射到html
* @param obj: json数据
* @param type: 映射类型（text：值映射为innerHTML；其他：值映射为value）
* @param path: 根路径，name属性的映射前缀
**/
function parseJson2Html(obj,type,path){
var props = {};
for (var key in obj) {
var propPath = path;
if (path) propPath = path + '.' + key;
else propPath = key; if(typeof obj[key] === 'object') arguments.callee(obj[key], type, propPath);
else {
propPath = propPath.replace(/\.(\d+)\./g, '[+$1+].').replace(/[+]/g,'');
props[propPath] = obj[key];
}
}
/* 数据映射到 html */
for (var key in props) {
var doms = document.querySelectorAll("[name='"+key+"']");
if(doms.length==0) continue;
for(var domIndex in doms) setValue(doms[domIndex],props[key]);
}
function setValue(domObj,value){
if(domObj.type == 'radio' || domObj.type == 'checkbox'){// 扩展radio、checkbox
if(domObj.type == 'radio'){
if(domObj.value == value) domObj.setAttribute('checked',true);
}else{
let checkboxs = value.split(',');
if(checkboxs.indexOf(domObj.value)>=0) domObj.setAttribute('checked',true);
}
}else if((domObj.value+'') != (value+'') && type != 'text') domObj.value = value;
else if(domObj.innerText != (value+'') ) domObj.innerHTML = value;
}
} parseJson2Html(json);
</script>
</html>
效果图：
表单元素基本都包含了。
附：由于项目中用到了easyui作为框架，故扩展了对easyui支持的版本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript test</title>
<link rel="stylesheet" type="text/css" href="css/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<h3>script running ... ...</h3>
<form id="data">
<input type="text" name="name" value="">
<input type="text" class="easyui-textbox" name="list[0].index" value="">
<input type="text" name="list[1].no" value="">
<select name="dept" class="easyui-combobox" data-options="width: 40">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select><br><br> <textarea name="desc" rows="2" cols="70"></textarea><br><br> <input type="radio" name="sex" value="0">男
<input type="radio" name="sex" value="1">女 |
<input type="checkbox" name="favor" value="book">book
<input type="checkbox" name="favor" value="food">food
</form>
<button type="button" id="button">ajax</button>
</body>
<script type="text/javascript">
var json = {name:'tom',age: 20,dept: 2,sex: 1,favor: 'book,food',desc: 'descript...',
list:[{index:1,no:'0015'},{index:2,no:'0016'}]}; /**
* json数据映射到html
* @param obj: json数据
* @param type: 映射类型（text：值映射为innerHTML；其他：值映射为value）
* @param path: 根路径，name属性的映射前缀
**/
function parseJson2Html(obj,type,path){
var props = {};
for (var key in obj) {
var propPath = path;
if (path) propPath = path + '.' + key;
else propPath = key; if(typeof obj[key] === 'object') arguments.callee(obj[key], type, propPath);
else {
propPath = propPath.replace(/\.(\d+)\./g, '[+$1+].').replace(/[+]/g,'');
props[propPath] = obj[key];
}
}
/* 数据映射到 html */
for (var key in props) {
var doms = document.querySelectorAll("[name='"+key+"']");
if(doms.length==0) continue;
for(var domIndex in doms) setValue(doms[domIndex],props[key]);
}
function setValue(domObj,value){
if(domObj.type == 'radio' || domObj.type == 'checkbox'){// 扩展radio、checkbox
if(domObj.type == 'radio'){
if(domObj.value == value) domObj.setAttribute('checked',true);
}else{
let checkboxs = value.split(',');
if(checkboxs.indexOf(domObj.value)>=0) domObj.setAttribute('checked',true);
}
}else if((domObj.value+'') != (value+'') && type != 'text') domObj.value = value;
else if(domObj.innerText != (value+'') ) domObj.innerHTML = value;
// 支持easyui组件赋值
parseEasyUI(domObj,value)
}
function parseEasyUI(obj,value){// 扩展对easyui组件的支持
var dClass = obj.className;
if(dClass && dClass.includes('-value') && obj.type == 'hidden'){
var ctn = $(obj).parent().prev(), classArr = ctn.prop('class').split(' ');
$.each(classArr,function(index,item){
if(item.includes('easyui-')) ctn[item.replace('easyui-','')]('setValue',value);
});
}
}
} parseJson2Html(json);
</script>
</html>
json数据映射填充到html元素显示的更多相关文章
- JSON数据映射之元素可见控制
1.效果: 2.demo 源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- bootstrap通过ajax请求JSON数据后填充到模态框
1. JSP页面中准备模态框 <!-- 详细信息模态框(Modal) --> <div> <div class="modal fade" id=& ...
- bootstrap-treeview后台Json数据的封装及前台的显示
1.bootStrap-treeview是我们常用的树形结构,页面风格也比较清新,但是后台数据的封装比较麻烦,经过研究终于解决,和大家分享一下. 2.前端代码如下 <script> var ...
- Vue之循环遍历Json数据，填充Table表格
简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...
- MVC客户端使用 Mustache.js把json数据填充到模版中
使用Mustache的好处是:可以把一些反复用到的html部分定义成Mustache模版,以便多次使用.使用Mustache的大致步骤是: →从后台拿到json数据 →获取前台页面预先定义好Musta ...
- PHP+MySQL+Easyui tree菜单从后台加载json数据(一)
实现功能:从数据库加载出所有的数据库名,相应的数据库加载对应的数据库表名 原理:(首先看一下参考手册的内容) 异步加载Tree tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个 ...
- 把JSON数据载入到页面表单的两种思路（对easyui自带方法进行改进）
#把JSON数据载入到页面表单的两种思路(对easyui自带方法进行改进) ##背景 项目中经常需要把JSON数据填充到页面表单,一开始我使用easyui自带的form load方法,觉得效率很低,经 ...
- Echart实现多个y轴，坐标轴的个数及名称由后台传过来的json数据决定。
yAxis: function(){ var yAxis=[]; for(var i=0;i<legend1.length;i++){ var item={ name:legend1[i], t ...
- Android中使用Gson解析JSON数据的两种方法
Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下 Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...
随机推荐
- Python __init__ 特殊方法
在Python中有很多以双下划线开头且以双下划线结尾的固定方法.他们会在特定的时机被触发执行. __init__ 就是其中之一,它会在实例化之后自动被调用.以完成实例的初始化. >>> ...
- js实现商品颜色尺码联动以及购买数量的选择
<script type="text/javascript"> $(function(){ //初始化点击第一个颜色 jquery $("#colors a: ...
- python全栈 字符串,整数,bool 数据类型运用
python全栈 一.基本数据类型 1.int: 整数 2.str: 字符串, 一般不存放大量数据. 3.bool: 布尔值,用来判断. True 或者 False 4.list: 列表,用来存 ...
- day10 文件处理指针使用 函数基本使用
一:文件指针 强调:只有t模式下read(n),n代表字符个数,除此之外都是以字节为单位 with open('a.txt',mode='rt',encoding='utf-8') as f: #文本 ...
- 【scrapy】其他问题
今天看<python爬虫开发与项目实践>的17章写代码的时候发现,一个方法的结尾带了红色波浪线: def _process_booklist_item(self,item): ''' 处理 ...
- js两个数组对象通过相同元素匹配筛选
let a = [ { name: 'joy', year: '24' }, { name: 'eve', year: '25' } ] let b = [ { name: 'joy', city: ...
- Perl 随机数据生成
问题:在IC设计及验证过程中,经常会遇到mem初始化的问题,这时候需要产生hex 的文件,本程序实现这种需求,只需要输入行数,及hex文件的宽度即可. print"Hello World!\ ...
- mysql数据库导出CSV乱码问题
一.导出汉字为乱码 1. 鼠标右键点击选中的 csv 文件,在弹出的菜单中选择“编辑”,则系统会用文本方 式(记事本)打开该 csv 文件: 2. 打开 csv 文件后,进行“另存为”操作,在弹出的界 ...
- 计算Python运行时间
可以调用datetime 或者 time库实现得到Python运行时间 方法1 import datetime start_t = datetime.datetime.now() #运行大型代码 e ...
- 唯品会海量实时OLAP分析技术升级之路
本文转载自公众号 DBAplus社群 , 作者:谢麟炯 谢麟炯,唯品会大数据平台高级技术架构经理,主要负责大数据自助多维分析平台,离线数据开发平台及分析引擎团队的开发和管理工作,加入唯品会以来还曾负责 ...