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更高的 ...
随机推荐
- DIV实现垂直居中的几种方法
说道垂直居中,我们首先想到的是vertical-align属性,但是许多时候该属性并不起作用.例如,下面的样式并不能达到内容垂直居中显示 div { width:200px; height:300px ...
- Beef的使用
应用普遍转移到B/S架构,浏览器成为统一客户端程序 通过注入JS脚本,利用浏览器攻击其他网站 ruby编写 攻击手段 利用网站XSS漏洞实现攻击 诱使客户端访问含有hook的伪造站点 结合中间人攻击注 ...
- HTML5 WebSocket 权威指南 学习一 （第二章 WebSocket API）
WebSocket 协议两种URL方案 ws 客户端和服务器之间的非加密流量 wss 客户端和服务器之间的加密流量 WebSocket Secure 表示使用传输层安全性(SSL)的WebSocket ...
- java面试题:jvm
jvm内存区域 Q:jvm内存怎么划分的? 答: 方法区(线程共享):各个线程共享的一个区域,用于存储虚拟机加载的类信息.常量.静态变量.即时编译器编译后的代码等数据.虽然 Java 虚拟机规范把方法 ...
- python基础入门学习1
python比较 -python执行效率低,开发效率高. -JAVA执行效率高,开发效率低. python种类多:比如Jpython Cpython pypy(这是Cpython开发的python) ...
- pta l2-5（集合相似度）
题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805070149828608 题意:求两个集合的相同的不同元素的 ...
- yaml文件 *.yml 写法简介
YAML(Yet Another Markup Language)(发音 /ˈjæməl/ ) 一种基于Unicode容易阅读,容易和脚本语言交互的,用来表达资料序列的编程语言. 适应场景 脚本语言: ...
- IDEA 创建HDFS项目 JAVA api
1.创建quickMaven 1.在properties中写hadoop 的版本号并且通过EL表达式的方式映射到dependency中 2.写一个repostory将依赖加载到本地仓库中 这是加载完成 ...
- Example of Formalising a Grammar for use with Lex & Yacc
Here is a sample of a data-file that we want to try and recognise. It is a list of students and info ...
- Delphi: TMemo垂直滚动条自动显示
项目中碰到此问题,之前一直没留意,研究一番用上,以做备忘.参考其它解决方法,不尽完美,自试之,达到效果. 直上代码: type TMemo = class(StdCtrls.TMemo) protec ...