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更高的 ...
随机推荐
- sqlserver 数据库迁移
参考 https://blog.csdn.net/wuzhanwen/article/details/77449229 一.连接本地数据库引擎 新建一个数据库,如:rbrbsoft 二.连接远程数据库 ...
- beanstalkd 说明文档
BEANSTALKD(1) BEANSTALKD(1) NAME beanstalkd - simple, fast work queue SYNOPSIS beanstalkd [options] ...
- CentOS 下lvm 磁盘扩容
打算给系统装一个oracle,发现磁盘空间不足.在安装系统的时候我选择的是自动分区,系统就会自动以LVM的方式分区.为了保证系统后期的可用性,建议所有新系统安装都采用LVM,之后生产上的设备我也打算这 ...
- Android 环境搭建与Android SDK目录介绍
Android SDK下载和安装 本地已有合适版本Android SDK,则无需再下载,或者可以使用SDK Manager更新SDK: 没有SDK,则需要下载. 这里说一下使用SDK Manager下 ...
- Shell教程 之echo命令
1.显示普通字符串 这里的双引号完全可以省略,以下命令效果一致: echo "传递参数实例!" echo 传递参数实例! 2.显示转义字符 echo "\"传递 ...
- django的csrf
csrf:跨站请求网站 如果是ajax提交,可以按照下面的方式处理 <script src="/static/jq/jquery-3.3.1.js"></scri ...
- Nginx中超时时间配置（转）
本文介绍 Nginx 的 超时(timeout)配置.分享给大家,具体如下: Nginx 处理的每个请求均有相应的超时设置.如果做好这些超时时间的限定,判定超时后资源被释放,用来处理其他的请求,以此提 ...
- swift - VFL - 1.循环创建控件 2.metrics使用
1. /// 创建单个热门项目itemView private func creatProcduceItemView(producrName: String , producePrice: Strin ...
- day 24 socket 黏包
socket 套接字的使用: tcp是基于链接的,必须先启动服务端,然后再启动客户端去链接服务端 server 端 import socket sk = socket.socket() # 实例化一个 ...
- linux查看本服务端口开放情况
在Linux使用过程中,需要了解当前系统开放了哪些端口,并且要查看开放这些端口的具体进程和用户,可以通过netstat命令进行简单查询. 1.netstat命令各个参数说明如下: -t : 指明显示T ...