JSON数据映射之元素可见控制
1、效果：
2、demo 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript test</title>
<style media="screen">
.write{
opacity: 0;
}
.visible {
opacity: 1;
}
button{
transition: opacity 1s ease;
}
</style>
</head>
<body>
<h3>控制前展示的项目依次：</h3> save、stop、cancel -- delete、submit、view -- update、export
<h3>控制之后展示项目：</h3>
<button type="button" class="cpe kpi write">save</button>
<button type="button" class="cpe kpi write">stop</button>
<button type="button" class="cpe kpi write">cancel</button> --
<button type="button" class="enb monitor write">delete</button>
<button type="button" class="enb monitor write">submit</button>
<button type="button" class="enb monitor write">view</button> --
<button type="button" class="operator query write">update</button>
<button type="button" class="operator query write">export</button> <h3>控制设置 - options：<font size="1">修改后点击窗口即生效</font></h3>
<textarea id="jsontxt" rows="18" cols="40">
{
cpe:{
kpi:{
write: true
}
},
enb:{
monitor:{
write: false
}
},
operator:{
query:{
write: true
}
}
}
</textarea>
</body>
<script type="text/javascript">
document.addEventListener('click',function(){
var jsonstr = document.querySelector('#jsontxt').value.trim(),
json = eval('('+jsonstr+')');
accessControl(json);
});
document.dispatchEvent(new Event('click'));
/**
* json数据映射到html
* @param obj: json数据
* @param path: 根路径，name属性的映射前缀(属性计算用到，使用者不用管)
**/
function accessControl(obj,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], propPath);
else props[propPath] = obj[key];
}
/* 数据映射到 html */
for (var key in props) {
var doms = Array.from(document.querySelectorAll(key));
if(doms.length==0) continue;
doms.map(function(dom){setPermission(dom,props[key]);})
}
function setPermission(domObj,visibale){/* 可见设置 */
var isHave = Array.from(domObj.classList).includes('visible');
if(visibale) {
if(!isHave) domObj.classList.add('visible');
}else {
if(isHave) domObj.classList.remove('visible');
}
}
}
</script>
</html>
JSON数据映射之元素可见控制的更多相关文章
- json数据映射填充到html元素显示
映射算法做了改进,支持name重复映射 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- Android中使用Gson解析JSON数据的两种方法
Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下 Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...
- Android中使用Gson解析JSON数据
Android中使用Gson解析JSON数据 在Android中可以使用Gson解析JSON数据 首先,从 code.google.com/p/google-gson/downloads/list ...
- Golang: 解析JSON数据之二
上次我们介绍了 Go 语言中序列化和反序列化 JSON 数据的两个方法 Marshal() 和 Unmarshal(),并以示例演示了它们的用法. 我们在例子中看到,需要事先声明好对应的结构体,才能跟 ...
- Golang: 解析JSON数据之一
JSON 作为目前最流行的数据传输格式, 相信每个程序员都跟它打过交道吧.使用 Go 语言时,也不可避免的要操作 JSON 数据,令人惊喜的是,Go 内置了序列化和反序列化 JSON 的功能,今天就来 ...
- springmvc-高级参数绑定-映射-异常-json数据交互-拦截器
1.1. 高级参数绑定 1.1.1. 复制工程 把昨天的springmvc-web工程复制一份,作为今天开发的工程 复制工程,如下图: 粘贴并修改工程名为web2,如下图: 工程右键点击,如下图: 修 ...
- json数据渲染表单元素出现的问题
解析页面表单元素 parseForm: function () { var data = {}; $(this).find('input').each(function () { switch ($( ...
- 控制层解析post请求中json数据的时候，有些属性值为空
原因: 1.默认json数据解析的时候,值会赋给键的首字母是小写的封装的bean中的属性,如果没有首字母小写的属性,也不会报错.即bean中有getXXX方法时,从json到model会增加xxx属性 ...
- 原生js，jquery通过ajax获得后台json数据动态新增页面元素
一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...
随机推荐
- pta7-7旅游规划（dijkstra算法）
题目链接:https://pintia.cn/problem-sets/1101307589335527424/problems/1101314114762387456 题意:给n给城市,m条公路,公 ...
- JavaScript oop proto与prototype原型图
[_proto_与prototype] 1.prototype(函数的原型):函数才有prototype.prototype是一个对象,指向了当前构造函数的引用地址. 2._proto_(对象的原型对 ...
- stm32 启动文件 C和汇编交叉嵌入
在嵌入式系统开发中,目前使用的主要编程语言是C和汇编,C++已经有相应的编译器,但是现在使用还是比较少的.在稍大规模的嵌入式软件中,例如含有OS,大部分的代码都是用C编写的,主要是因为C语言的结构比较 ...
- PHP面向对象之类的自动加载
类的自动加载 含义: 当某行代码需要一个类的时候,php的内部机制可以做到“自动加载该类文件”,以满足该行需要一个类的这种需求. 什么时候需要一个类? 1,new一个对象的时候: 2,使用一个类的静态 ...
- 洛谷 P1342 请柬(SPFA)
题目描述 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣传剧院,尤其是古色古香的喜剧片.他们已经打印请帖和所有必要的信息和计划.许多学生被雇来分发这些请 ...
- 鼠标移上去触动hover致使div向上移动几个相素（动画transition轻轻的移动）
- c#、.net、asp.net、asp 、ado.net、.net framework的区别
c#:一种编程语言 .net:一种运行环境 asp.net:基于.netFramework框架下的一种开发技术(相对与asp而言,引入了服务器控件,前后台可分,编译型的编程框架) asp:也是.net ...
- ckplayer iis6 mp4 播放404错误
设置mime. 1.右键网站 2.选择http头 3.点击编辑MIME按钮 4.新增MIME类型 5.在“扩展名”框内输入“mp4”,“MIME类型”框中输入“video/x-mp4” ps:类型不要 ...
- python 标准输入输出sys.stdout. sys.stdin
import sys, time ## print('please enter your name:')# user_input=sys.stdin.readline()# print(user_in ...
- 5E - A + B Again
There must be many A + B problems in our HDOJ , now a new one is coming. Give you two hexadecimal in ...