您的位置：首页 > Web前端 > JavaScript

JSON数据映射之元素可见控制

2017-11-29 12:21 120 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航