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更高的 ...
随机推荐
- js 事件event
var EventUtil = { addHandler: function(element,type,handler){ if(element.addEventListener){ element. ...
- tabindex 去掉虚线
参考 https://bbs.csdn.net/topics/390165247 style="outline: none"
- Android 集成高德地图
先上一张图片看看实现的效果啦!!! 首先登陆高德的开发者平台进行创建自己的应用程序,填写对应的包名,填写sHA1值(这个我这博客中写了获取的代码,可以直接复制粘贴),说了这么多其实都是废话,来我们看重 ...
- 生成二维码的JAVA
不多说,上代码 package tcc; import java.awt.Color;import java.awt.Graphics2D;import java.awt.image.Buffered ...
- 5. Longest Palindromic Substring （DP）
Given a string S, find the longest palindromic substring in S. You may assume that the maximum lengt ...
- 取得<asp:TextBox中的值：
取得<asp:TextBox中的值: var a= document.getElementById("<%= (ID名).ClientID %>").valu ...
- POJ 1177 Picture(线段树周长并)
描述 A number of rectangular posters, photographs and other pictures of the same shape are pasted on ...
- iOS版本设置
Base SDK指的是当前编译所用的SDK 版本: iOS Deployment Target指的是,编译后的 app 可在 终端的哪个 版本上运行. 设置方法: 点击xcode工程左侧项目名称-&g ...
- Javascript(es2016) import和require用法和区别
http://blog.csdn.net/chinaycheng/article/details/52559439 其中这个总结很到位: 加载方式 规范 命令 特点 运行时加载 CommonJS/AM ...
- spring boot项目打包成war并在tomcat上运行的步骤
把spring-boot项目按照平常的web项目一样发布到tomcat容器下 一.修改打包形式 在pom.xml里设置 <packaging>war</packaging> 二 ...