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数据映射之元素可见控制的更多相关文章

  1. json数据映射填充到html元素显示

    映射算法做了改进,支持name重复映射 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  2. Android中使用Gson解析JSON数据的两种方法

    Json是一种类似于XML的通用数据交换格式,具有比XML更高的传输效率;本文将介绍两种方法解析JSON数据,需要的朋友可以参考下   Json是一种类似于XML的通用数据交换格式,具有比XML更高的 ...

  3. Android中使用Gson解析JSON数据

      Android中使用Gson解析JSON数据 在Android中可以使用Gson解析JSON数据 首先,从 code.google.com/p/google-gson/downloads/list ...

  4. Golang: 解析JSON数据之二

    上次我们介绍了 Go 语言中序列化和反序列化 JSON 数据的两个方法 Marshal() 和 Unmarshal(),并以示例演示了它们的用法. 我们在例子中看到,需要事先声明好对应的结构体,才能跟 ...

  5. Golang: 解析JSON数据之一

    JSON 作为目前最流行的数据传输格式, 相信每个程序员都跟它打过交道吧.使用 Go 语言时,也不可避免的要操作 JSON 数据,令人惊喜的是,Go 内置了序列化和反序列化 JSON 的功能,今天就来 ...

  6. springmvc-高级参数绑定-映射-异常-json数据交互-拦截器

    1.1. 高级参数绑定 1.1.1. 复制工程 把昨天的springmvc-web工程复制一份,作为今天开发的工程 复制工程,如下图: 粘贴并修改工程名为web2,如下图: 工程右键点击,如下图: 修 ...

  7. json数据渲染表单元素出现的问题

    解析页面表单元素 parseForm: function () { var data = {}; $(this).find('input').each(function () { switch ($( ...

  8. 控制层解析post请求中json数据的时候，有些属性值为空

    原因: 1.默认json数据解析的时候,值会赋给键的首字母是小写的封装的bean中的属性,如果没有首字母小写的属性,也不会报错.即bean中有getXXX方法时,从json到model会增加xxx属性 ...

  9. 原生js，jquery通过ajax获得后台json数据动态新增页面元素

    一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...

随机推荐

  1. XSS和CSRF的区别

    XSS:攻击者发现XSS漏洞 => 构造代码 => 发送给受害者 => 攻击者获取受害者的cookie => 完成攻击 CSRF:攻击者发现CSRF漏洞 => 构造代码 ...

  2. tomcat指向外部项目

    参考 https://www.cnblogs.com/ysocean/p/6893446.html conf/server.xml中增加 <Context path="/myweb&q ...

  3. 二维数组中的查找(python)

    题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数 ...

  4. 第四章 栈与队列（c2）栈应用：括号匹配

  5. yaml文件 *.yml 写法简介

    YAML(Yet Another Markup Language)(发音 /ˈjæməl/ ) 一种基于Unicode容易阅读,容易和脚本语言交互的,用来表达资料序列的编程语言. 适应场景 脚本语言: ...

  6. SystemC_Basic

    1.http://baike.baidu.com/view/1018980.htm 百度百科介绍的很好,举例很清晰. 2.SystemC的三个基本进程:SC_METHOD,SC_THREAD,SC_C ...

  7. TOJ1302: 简单计算器 && TOJ 4873: 表达式求值&&TOJ3231: 表达式求值

    这些都是应用Python的eval函数的一些题目! TOJ1302传送门:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=show ...

  8. 微信小程序开发——导航失效的解决办法

    异常描述: 使用 navigator 导航,各种属性配置没问题,就是点击死活不跳转. 异常分析: 遇到这种情况,要先考虑的就是当前配置的导航url,是不是已经使用在tabBar中,因为小程序对于nav ...

  9. 【php 之获得当前日期以及比较日期大小】

    首先看一个例子: $currentTime = date('Y-m-d H:i'); // 获得当前时间 $timer = $searchDated . ' ' . $results['ctrip'] ...

  10. Javascript(es2016) import和require用法和区别

    http://blog.csdn.net/chinaycheng/article/details/52559439 其中这个总结很到位: 加载方式 规范 命令 特点 运行时加载 CommonJS/AM ...