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. 解决不联网无法启动struts2问题

    Unable to load configuration. - Class: java.net.PlainSocketImplFile: PlainSocketImpl.javaMethod: con ...

  2. JMeter学习（二十四）HTTP属性管理器HTTP Cookie Manager、HTTP Request Defaults（转载）

    转载自 http://www.cnblogs.com/yangxia-test Test Plan的配置元件中有一些和HTTP属性相关的元件:HTTP Cache Manager.HTTP Autho ...

  3. js setInterval参数设置

    语法  setInterval(code,interval) ①可以有第三个参数,第三个参数作为第一个参数(函数)的参数 ②第一个参数是函数,有三种形式: 1.传函数名,不用加引号,也不加括号,如 s ...

  4. TOJ5398: 签到大富翁（简单模拟） and TOJ 5395: 大于中值的边界元素（数组的应用）

    Python代码!!! 5395 传送门:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=53 ...

  5. AssetBundle Manager and Example Scenes

    示例 1:加载资源 使用 “Asset/AssetBundles/Simulation Mode” 菜单打开模拟模式 打开 “AssetBundleSample/Scenes/AssetLoader” ...

  6. CentOS查看进程、杀死进程、启动进程等常用命令

    关键字: linux 查进程.杀进程.起进程 1.查进程     ps命令查找与进程相关的PID号:     ps a 显示现行终端机下的所有程序,包括其他用户的程序.     ps -A 显示所有程 ...

  7. 【python-sql】sql操作时遇到的坑

    针对python的sql语句的封装以及调用: python的db操作类: # -*- coding: utf-8 -*- # coding=utf-8 import MySQLdb class Dat ...

  8. VTP

    VTP VLAN中继协议(Vlan Trunking Protocol),是CISCO专用协议.VTP负责在VTP域内同步VLAN信息,这样就不必在每个交换机上配置相同的VLAN信息.VTP还提供一种 ...

  9. swift -2018 - 创建PCH文件

    第一种:简单方式 在swift文件 创建一个OC文件 1> command + n 2> 3> 此时 你会发现有提示 让你创建桥接文件 4>删除 OC文件 5> 直接复制 ...

  10. how2j网站前端项目——天猫前端（第一次）学习笔记6

    开始我的订单页面 学着学着,会觉得我这是在干啥呢?我要学的是Java不是吗?怎么要学这么久的前端啊?说实话,我很迷茫,不知道以后的工作具体是做什么?学的这些能用到吗? 不过,还是要把这个项目跟着走完! ...