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. 外购半成品回写PR时将同一供应商同一编码的PR合并数量回写

    '); --PR 净需求 '); ---加上PR回写逻辑后 '); ---加上PR回写逻辑后 ') order by item; ---最终回写去SAP的数据 ) as LGORT ,'SAPRFC' ...

  2. Android的框架功能说明

    OkHttp网络框架 Picasso图片缓存框架 ORMLite数据库框架 GreenDao数据库框架

  3. tab template

    <div class="box"> <div class="box-body"> <div class="nav-tab ...

  4. as3.0 在数组中找个找个，并且替换

    var arr:Array=[1,2,7,9,3,5,6]; var findNum:Number =5//想要找到的数字 var replaceNum:Object =3//想要替换的数字 var ...

  5. Python3 round() 函数

    Python3 round() 函数  Python3 数字 描述 round() 方法返回浮点数x的四舍五入值. 语法 以下是 round() 方法的语法: round( x [, n] ) 参数 ...

  6. Jasperreport5.6.9-----1

    Jasperreport5.6.0生成PDF 最近项目中需要生成报表,先是看了下itext,觉得还可以,但是如果数据字段多的话,不太灵活.所以后来看了下ireport,觉得还可以,下面简单说一下它们: ...

  7. 100-days: Two

    Title: London HIV patient's remission spurs hope for curing AIDS HIV 艾滋病毒  human immunodeficiency vi ...

  8. 微信小程序开发-rem转换rpx小工具

    实现原理: 对样式进行格式化,然后根据 “rem” 进行拆分,这样就会拆分成一个数组 [str1,str2,str3...,str6], 除了最后一个元素,前边的元素都会以 “rem” 样式的数值结尾 ...

  9. leetcode 443. String Compression

    下面反向遍历,还是正向好. void left(vector<char>& v, bool p(int)) { ; ; ; while (del < max_index) { ...

  10. python第三方库requests简单介绍

    一.发送请求与传递参数 简单demo: import requests r = requests.get(url='http://www.itwhy.org') # 最基本的GET请求 print(r ...