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. appium API接口

    appium API接口 标签(空格分隔): appium常用api 1.contexts contexts(self) 返回当前会话的上下文,使用可以识别H5页面的控件: driver.contex ...

  2. spark快速开发之scala基础之2控制流程

    判断结构 大体与java相当.scala没有三元表达式. val num = if(1>0) 1 else 0 //相当于匿名函数 println(num) var num2 = 0 if(1& ...

  3. mysql5.6 基于Binlog ROW记录方式进行数据恢复（无备份）

    数据库配置注意事项 /etc/my.cnf 必须要开户binlog支持,字符集要求 是utf8 binlog类型为row server-id=121 log_bin=/home/mysqllog bi ...

  4. 第十一章 串 (c2)KMP算法：查询表

  5. 165. Compare Version Numbers (String)

    Compare two version numbers version1 and version2. If version1 > version2 return 1, if version1 & ...

  6. Codeforces Beta Round #40 (Div. 2)

    Codeforces Beta Round #40 (Div. 2) http://codeforces.com/contest/41 A #include<bits/stdc++.h> ...

  7. 微信小程序开发——打开另一个小程序

    微信小程序打开另一个小程序,有两种方法:1.超链接:2.点击按钮. 全局配置: 跳转到其他小程序,需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下: App.json { ... &quo ...

  8. TZOJ 4912 炮兵阵地(状压dp)

    描述 司令部的将军们打算在N*M的网格地图上部署他们的炮兵部队.一个N*M的地图由N行M列组成,地图的每一格可能是山地(用"H" 表示),也可能是平原(用"P" ...

  9. 2 c++对象被使用前要先被初始化

    虽然有些时候int x;会被初始化为0,但是也可能不会,这就造成随机初始值会影响我们程序的运行. 类成员变量初始化顺序是依照其声明顺序而来的.基类要早于派生类别初始化. 构造函数最好使用成员初值列: ...

  10. nodejs项目进程管理器之pm2

    如果用pm2作为nodejs的进程管理器的话,参考以下两篇文章 程序员小卡:http://www.cnblogs.com/chyingp/p/pm2-documentation.html 官方:htt ...